js上下文

在JavaScript中，你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。这也是其它面向对象语言所共有的功能，但它们都不如JavaScript处理得这样极端。上下文是通过变量this工作。变量this总是引用代码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里，this 变量仍然引用一个对象。上下文可以成为一个强大的工具，是面向对象代码不可或缺的一环。程序1展示了一些关于上下文的简单例子。

 

程序1. 在上下文中使用函数然后将其上下文切换到另一个变量的例子

 

 1 var obj = {
 2 yes: function(){
 3 // this == obj
 4 this.val = true;
 5 },
 6 no: function(){
 7 this.val = false;
 8 }
 9 };
10 //我们看到，obj对象没有"val"的属性
11 alert( obj.val == null );
12 //我们运行yes函数，它将改变附着在obj 对象的val属性
13 obj.yes();
14 alert( obj.val == true );
15 //然而，我们现在让window.no指向obj.no方法，并运行之
16 window.no = obj.no;
17 window.no();
18 //这导致obj对象保持不变(上下文则切换到了window对象)，
19 alert( obj.val == true );
20 //而window的val属性被更新
21 alert( window.val == false );

你可能已经注意到，在程序1中，当我们切换obj.no方法的上下文到变量window时，笨重的代码需要切换函数的上下文。幸运的是，JavaScript 提供了两种方法使这一过程变得更加易于理解和实现。程序2展示了恰能些目的的两种不同方法，call和apply。 

 

程序2. 改变函数上下文的示例 

 

 1 //一个简单的设置其上下文的颜色风格的函数
 2 function changeColor( color ) {
 3 this.style.color = color;
 4 }
 5 //在window对象上调用这个函数将会出错，因为window没有style对象
 6 changeColor( "white" );
 7 //得到一个id为"main"的对象
 8 var main = document.getElementById("main");
 9 //用call方法改变它的颜色为黑
10 //call方法将第一个参数设置为上下文，
11 //并其它所有参数传递给函数
12 changeColor.call( main, "black" );
13 //一个设置body元素的颜色的函数
14 function setBodyColor() {
15 //apply方法设置上下文为body元素
16 //第一个参数为设置的上下文,
17 //第二个参数是一个被作为参数传递给函数的数组
18 // of arguments that gets passed to the function
19 changeColor.apply( document.body, arguments );
20 }
21 //设置body元素的颜色为黑
22 setBodyColor( "black" );