日期:2014-05-16  浏览次数:20312 次

揭秘JavaScript中谜一样的this

在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助。作为JavaScript程序员学习this对于你的发展有很大帮助,可以说利大于弊。这篇文章的灵感来自于我最近的工作——我即将完成的书的最后章节——JavaScript 应用程序设计(JavaScript Application Design)(注意:现在你可以购买早期版本),我写的是关于scope工作原理的方面。

似是而非,这可能是你对this的感觉:

很疯狂,不是吗?在这篇短文,我旨在揭开它的神秘面纱。

this的工作原理

如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象。

var parent = {
    method: function () {
        console.log(this);
    }
};

parent.method();
// <- parent

注意这种行为非常“脆弱”,如果你获取一个方法的引用并且调用它,那么this的值不会是parent了,而是window全局对象。这让大多数开发者迷惑。

var parentless = parent.method;

parentless();
// <- Window

底线是你应该查看调用链去理解被调用函数是一个对象的属性还是它自己。如果它被作为属性调用,那么this的值将变成该属性的对象,否则this的值将被指派为全局对象或window。如果在严格模式下,this的值将是undefined。

在被当作构造函数的情况下,当使用new关键字时,this将被指派为被创建的实例对象。

function ThisClownCar () {
  console.log(this);
}

new ThisClownCar();
// <- ThisClownCar {}

注意在这种情况下没有办法识别出一个函数是否应该被用作构造函数,从而省略new关键字this的结果将是全局对象,就像我们上面看到的没有用parent调用的例子。

ThisClownCar();
// <- Window

篡改this

.call,.apply和.bind方法被用来操作调用函数的方式,帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数,第一个参数被分配给this,剩下的被传递给调用函数。