JavaScript的语言特性 — 上下文对象

前端技术 everyinch 1317℃ 0评论

在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" );

js10



转载请注明:陈童的博客 » JavaScript的语言特性 — 上下文对象

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量