Javascript作用域及每一个函数都有一个call和apply方法,他们是如何改变作用域的!
经常接触Context这个词语,对这个词语越来越模糊,书中一般翻译为上下文!
作用域应该是一个范围,什么范围呢,就是一个环境执行的时候所属的范围,环境中定义的所有变量和函数都保存在其中,那么从这里来说,也应该是一个容器,容器内部的东西都是自己的,容器外部的东西就是别人的,理解了作用域对于学习Javascript大有裨益!
对JavaScript中的this的理解很不清楚,或者说甚至有点不解释,那是因为没有对作用域好好理解,如果对作用域理解清楚了,那么就会有柳暗花明又一村的感觉,茅塞顿开。
在Javascript中最大的作用域可以认为是window对象,但是在windows对象下面可以继续划分其他作用域,这样依次往下会形成一个以window为跟的倒挂树,不知道为什么,很多编程中的结构都可以用“倒挂树”来说明!《悟透Javascript》这本书中对作用域用了一幅图来说明,说明了作用域的层次结构,在这里我只能在网上找到一幅这样的图片。
<html>
<head>
<script
>
var p= "first" ;
function getp()
{
var p= "second" ;
document.write(p);
}
document.write(p+ "\n" );
getp();
</script>
</body>
</html>
|
在Javascript中, 函数中省略var操作符可定义全局变量,而这个变量实际上是相当于window的一个属性而已,在函数的外面以var开始的变量也可以认为是window的一个属性而已,其实所有全局变量和函数都是作为window对象的属性和方法创建的,window可以省略,其实很多框架在扩展的时候就是将自己扩展的对象直接作为window的一个变量。
第一步,我们先确定所在的作用域。第九行处于window里面。第十行处于getp()
第二步,从下搜索,一直搜索到顶层。
我们可以先总结一下:作用域链从下向上搜索,一直搜索到或者顶层。我们很容易明白,函数作用域高于全局定义域。全局变量其实就是window下面的变量。
下面的代码片段,函数中多了一个this,Javascript中的函数扮演的角色比较复杂,这里不讨论,那么这个this表示什么?大家不妨运行下试试。
window.color = 'red';
var o = { color: 'blue' };
function sayColor() {
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(o); //blue
函数内部有几个特殊对象的对象,这里出现的this就是一个,this是函数在执行时所处的作用域(当在网页的全局作用域中调用函数时,this对象引用的就是window),如果函数没有通过new ,那么这个函数中的this就是当前的作用域,也就是window,如果用了new,那么里面的this就是指当前这个函数自己的作用域。
在Javascript中,作用域是可以改变的,每一个函数都有一个call和apply方法,这两个方法可以认为就是替换了内部的this,,Javascript中的对象是动态的,我通过下面的代码来模拟这个this,具体的实现我就不清楚,只是自己猜想而已:
o.sayColor = sayColor;
o.sayColor();