上下文
在JavaScript中,你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。这也是其它面向对象语言所共有的功能,但它们都不如JavaScript处理得这样极端。 上下文是通过变量this工作。变量this总是引用代码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里,this变量仍然引用一个对象。上下文可以成为一个强大的工具,是面向对象代码不可或缺的一环。程序2-17展示了一些关于上下文的简单例子。 程序2-17. 在上下文中使用函数然后将其上下文切换到另一个变量的例子
var obj = { yes: function(){ // this == obj this.val = true; }, no: function(){ this.val = false; } };
//我们看到,obj对象没有"val"的属性 alert( obj.val == null );
//我们运行yes函数,它将改变附着在obj对象的val属性 obj.yes(); alert( obj.val == true );
//然而,我们现在让window.no指向obj.no方法,并运行之 window.no = obj.no; window.no();
//这导致obj对象保持不变(上下文则切换到了window对象), alert( obj.val == true ); //而window的val属性被更新 alert( window.val == false );
你可能已经注意到,在程序2-17中,当我们切换obj.no方法的上下文到变量window时,笨重的代码需要切换函数的上下文。幸运的是,JavaScript提供了两种方法使这一过程变得更加易于理解和实现。程序2-18展示了恰能些目的的两种不同方法,call和apply。
程序2-18. 改变函数上下文的示例
//一个简单的设置其上下文的颜色风格的函数 function changeColor( color ) { this.style.color = color; }
//在window对象上调用这个函数将会出错,因为window没有style对象 changeColor( "white" );
//得到一个id为"main"的对象 var main = document.getElementById("main");
//用call方法改变它的颜色为黑 //call方法将第一个参数设置为上下文, //并其它所有参数传递给函数 changeColor.call( main, "black" );
//一个设置body元素的颜色的函数 function setBodyColor() { //apply方法设置上下文为body元素 //第一个参数为设置的上下文, //第二个参数是一个被作为参数传递给函数的数组 // of arguments that gets passed to the function changeColor.apply( document.body, arguments ); }
//设置body元素的颜色为黑 setBodyColor( "black" );
上下文的有用性此处可能还没有立即显现。当我们进入下一节"面向对象的JavaScript"时,它会变得更加明显。
出处:蓝色理想
责任编辑:moby
上一页 语言特性:闭包 下一页 面向对象基础
◎进入论坛网页制作、网站综合版块参加讨论
|