JavaScript基础之this详解

JavaScript的this和Java等面向对象语言中的this大不一样，bind()、call()和apply()函数更是将this的灵活度进一步延伸。

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

如果对JavaScript的关键字this理解不够深刻，有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况，但日常大部分情况都可以使用这些规则来正确推断。

this的值通常是由所在函数的执行环境决定，也就是说要看函数是如何被调用的；
同一个函数每一次调用，this都可能指向不同的对象;

全局对象 (Global Object)

打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)，并且输入:

console.log(this);

看看输出了什么？

// Window {}

window对象！ 因为在全局作用域下，this指向全局对象。在浏览器中全局对象就是window对象。
为了让你更加清楚理解为什么this会指向window对象，我们来看另外一个例子：

var myName = 'Brandon';
我们可以通过在控制台输入myName来访问其值：

myName// 输出 'Brandon'

其实，所有在全局定义的变量都绑定到window对象。我们来做如下测试：

window.myName// 输出 'Brandon'window.myName === myName// 输出 true

现在我们将this放到函数内部，看看有何效果。

function test(){ return this;}test();

你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部，默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章，你就会豁然开朗。
注意：如果在strcit模式下，上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题：

var person = { first: 'John', last: 'Smith',  full: function() {  console.log(this.first + ' ' + this.last); }};person.full();// 输出 'John Smith'

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此，this指向person。

为了更好的描述this实际上是指向person对象的，你可以拷贝如下代码到浏览器控制台，将this打印出来。

var person = { first: 'John', last: 'Smith',  full: function() {  console.log(this); }};person.full();// 输出 Object {first: "John", last: "Smith", full: function}

我们接下来看一个更复杂的例子：