精通JavaScript的this关键字

JS中的this关键字让很多新老JS开发人员都感到困惑。这篇文章将对this关键字进行完整地阐述。读完本文以后，您的困惑将全部消除。您将学会如何在各种不同的情形正确运用this。

我们和在英语、法语这样的自然语言中使用名词一样地使用this。比如，“John飞快地跑着，因为他想追上火车”。请注意这句话中的代指John的代名词“他”。我们原本也可以这样表达，“John飞快地跑着，因为John想追上火车”。按照正常的语言习惯，我们并不按第二种方式表达。如果我们真按第二种方式说话，我们的家人和基友一定会把我们当成怪胎。说不定不止家人，甚至连我们的酒肉朋友和同事都会远离我们。类似地，在JS中，我们把this关键字当成一种快捷方式，或者说是引用（referent）。this关键字指向的是当前上下文（context，下文中将会对此作专门的解释）的主体（subject），或者当前正在被执行的代码块的主体。

考虑以下代码：

var person = {   firstName: "Penelope",   lastName: "Barrymore",   fullName: function () {   // 正如我们在文中提到的使用“他”作为代名词一样，我们在这里使用this   console.log(this.firstName + " " + this.lastName);   //我们其实也可以这样写：   console.log(person.firstName + " " + person.lastName);   }  }

如果我们使用person.firstName和person.lastName，某些情况下代码会变得模棱两可。例如，全局变量中有一个跟person同名的变量名。这种情况下，如果我们想要读取person.firstName的值，系统将有可能从全局变量的person变量中读取firstName属性（property）。这样一来，我们调试代码的时候很难发现错误。所以this并不只起到美化代码的作用，同时也是为了保证程序的准确性。这种做法实际上和前面讲到的“他”的用法一样，使得我们的代码更加清晰。“他”所引用的正是句首的“John”。

正如代名词“他”被用来代指句中的先行词（先行词就是代名词所指示的名词），this关键字以同样的方式来引用当前方法（function，也可以称为函数）所绑定（bound）的对象。this不只引用对象，同时包含了对象的值。跟先行词一样，this也可以被理解成在上下文中用来引用当前对象（又叫作“先行词对象”）的快捷方式（或者来适度减少歧义的替代品）。我们迟些会专门讲解“上下文”。

this关键字基本理论

首先我们得知道，对象(Object)有属性集（properties），所有的方法（function）也有属性集。运行到某个方法的时候就有了一个this属性—一个存储了调用该方法（准确地说是使用了this关键字的方法）的对象的值的变量。

this关键字始终指向一个对象并持有这个对象的值，尽管它可以出现在全局范围（global scope）方法（函数）以外的地方，但它通常出现在方法体中。值得注意的是，如果我们使用严格模式（strict mode），并在全局方法（global functions）或者没有绑定到任何对象的匿名方法中使用this关键字时，this将会指向undefined。