JavaScript的奇妙this

this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。

光从字面意思上来看，很容易让人觉得 this 就是指向函数本身，事实上真是这样吗？我们可以看一个例子。

function foo() {this.count = this.count ? this.count + 1 : 1;}

for (let i = 0; i < 5; i++) {foo();
}
console.log(foo.count); // undefined

可以看到，foo.count 输出的并不是我们期待的5，而是一开始赋值的0。也就是说this 其实并没有指向函数本身。

还有一种比较常见的误解是，this 指向了函数的作用域。

function foo() {
    var a = 2;
    bar();}
function bar() {console.log(this.a);
}

foo(); // undefined

这段代码中，bar 在 foo 中运行，输出 this.a 得到的却是undefined。也就是说this 也不是指向函数的作用域的。

这也不是，那也不是，this 到底是什么呢？在函数执行过程中，会创建一个执行上下文（一个记录），this 就是这个上下文中的一个属性，在执行过程中用到。而 this 的指向则是取决于函数在哪里被调用。

this 的绑定有四条可以遵循的规则，下面将一一介绍。

独立函数调用，非严格模式下，指向 window；严格模式下指向 undefined。 这里说的独立函数可以理解成除开后面三种情况的一般函数调用。

// 非严格模式
var name = 'Willem';
function foo() {console.log(this.name);
}
foo(); // Willem

// 执行时启用严格模式
(function() {
    'use strict';
    foo(); // Willem
    bar(); // Cannot read property 'name' of undefined})();

// 函数体使用严格模式
function bar() {
    'use strict';
    console.log(this.name);
}

上述代码中，分别在普通环境中输出 Willem，说明指向的确实是 window 对象。需要特别注意的一点是：严格模式下指向 undefined 指的是函数体内启用了严格模式，而不是调用时。

隐式绑定说的是，在函数执行时，是否被某个对象拥有或包含。换句话说，在函数运行时，是否是作为某个对象的属性的方式运行的，这样说还是不是很清楚，来个栗子：

function foo() {console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
obj.foo(); // 2
var obj2 = {
    a: 3,
    obj
};
obj2.obj.foo(); // 2

示例中，foo 被当做了 obj 的一个属性进行执行，此时 obj 作为了函数的上下文，此时 this 指向了 obj，this.a等价于obj.a。在对象属性链式的调用中，只有最后一层会对调用位置产生影响，也就是说最后一层会影响 this 指向。

有很多前端的小伙伴面试时或许还见过这样的题：

function foo() {console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
var bar = obj.foo;
bar(); // 1

这是隐式绑定最常见的一个问题，隐式丢失：被隐式绑定的函数会丢失绑定对象。虽然 bar 是对 obj.foo 的一个引用，但实际上引用的还是 foo 函数本身，bar 函数就是一个独立函数的调用，参考第一条，此时this 指向了 window|undefined。

还有一种经典的回调函数的 this 指向问题也是隐式丢失。

function foo() {console.log(this.a);
}
function doFoo(fn) {fn();
}
var a = 1;
var obj = {
    a: 2,
    foo
};
doFoo(obj.foo); // 1

小结：在隐式绑定中，赋值的情况下（回调是隐式赋值）需要特别注意隐式丢失的问题。

JavaScript 中的 Function 提供了两个方法 call 和apply，传入的第一个参数是一个对象，会把 this 绑定到这个对象。如果是传入的是一个原始值（字符串、数字、布尔），会被转换成它的对象形式（new String(), new Boolean(), new Number()）。

function foo() {console.log(this.a);
}
var obj = {a: 1};
foo.call(obj); // 1

虽然我们可以使用 call 和apply显式指定 this 的指向，但是还是会存在丢失绑定的问题。可以通过所谓的 硬绑定（bind 函数）来解决，这里就不过多赘述了。

最后要介绍的是使用 new 来做 this 的绑定的修改，有手动实现过 new 的童鞋应该比较清楚，js 中的 new 和其他语言的 new 完全不同。
new 的执行过程：

创建一个空对象
当前空对象执行原型对接
返回函数执行结果或者当前这个空对象

function Foo(a) {this.a = a;}

var bar = new Foo(2);
bar.a; // 2

使用 new 来调用函数时，我们会构造一个新对象并把它绑定到函数调用中的 this 上。

最后简单说一下优先级的关系：new > 显示绑定 > 隐式绑定 > 默认绑定。

参考：《你不知道的 JavaScript》
相关：
模拟实现 Javascript 中的 bind 函数
模拟实现 js 中的 new 操作符
模拟实现 Javascript 中的 call 和 apply

JavaScript的奇妙this

this 是什么？

指向函数本身？

指向作用域？

this 的绑定规则

1. 默认绑定

2. 隐式绑定

3. 显示绑定

4. new

优先级