在JavaScript中,代码总是有一个上下文对象(context)。上下文对象通过this变量体现,这个变量永远指向当前代码所处的对象中。即使在全局上下文中,this变量也指向一个对象 — window对象。
var obj = { yes: function(){ // this == obj this.val = true; }, no: function(){ this.val = false; } }; // 'obj' 对象没有 val 属性 alert( obj.val == null ); // 执行了 yes 函数之后,将 val 属性与 obj 对象关联起来 obj.yes(); alert( obj.val == true ); // 现在把 window.no 指向 obj.no 并执行 window.no = obj.no; window.no(); // 结果是 obj 对象的 val 不变 // 因为 no 的上下文已经改编为 window 对象了 alert( obj.val == true ); // 而 window 的 val 属性被更新了 alert( window.val == false );
上面的示例中把obj.no变量的上下文对象切换为window对象时,代码变得不好理解了。JavaScript通过一些方法来让这个过程变得更好理解和实现。
// 一个设置上下文对象颜色样式的简单函数 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 元素 // 第二参数是传给函数的所有参数的数组 changeColor.apply( document.body, arguments ); } // 将 body 的背景色设置为黑色 setBodyColor( "black" );
转载请注明:陈童的博客 » JavaScript的语言特性 — 上下文对象