JavaScript中的this

初级前端程序员常见的误区：

• this指向函数自身
• this指向函数的作用域

this指向

this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用，和函数声明的位置没有任何关系。

绑定规则

默认绑定

可以把这条规则看作是无法应用其他规则时的默认规则。
不带任何修饰的函数调用，绑定到全局对象。

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

隐式绑定

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

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

隐式丢失：

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

虽然bar是obj.foo的一个引用，但实际上引用的是foo函数本身，所以bar()其实是一个不带任何修饰的函数调用，应用了默认绑定。

function foo(){
     console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var a = 'oops, global';
setTimeout(obj.foo, 100);//oops, global

js环境中，setTimeout函数实现和下面伪代码类似：

function setTimeout(fn, delay) {
    // 等待delay毫秒
    // 在执行时，fn 应用了默认绑定
    fn();
}

显式绑定

通过call、apply直接指定this的绑定对象。

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

硬绑定，可以解决隐式丢失的问题

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

利用硬绑定实现bind：

function foo(b){
    console.log(this.a, b);
}
var obj = {
    a: 2,
}
var bind = function(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}
var bar = bind(foo, obj);
bar(3); // 2 3

API调用的上下文
第三方库的许多函数，以及js中的许多内置函数，都提供一个可选参数，确保你的回调函数使用指定的this。

var obj = {
    id: 'awesome'
};
[1, 2, 3].forEach(function(item) { // 如果这里使用箭头函数的话，this指向window
    console.log(item, this.id);
}, obj);
// 1 awesome
// 2 awesome
// 3 awesome

new绑定

在JavaScript中，构造函数只是被new操作符调用的普通函数而已，不会实例化一个类。
使用new来调用函数，会自动执行以下操作：

1. 创建一个新对象
2. 新对象会被执行[[prototype]]连接，即将新对象的__proto__指向构造函数的prototype对象
3. 将新对象绑定到函数调用的this
4. 如果函数没有返回对象，那么new表达式中的函数调用会自动返回这个新对象。

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

优先级

new > 显示绑定call, apply > 隐式绑定 > 默认绑定

绑定例外

把null、undefined作为this的绑定对象传入call、apply、或bind，这些值在调用时会被忽略，实际应用的是默认绑定规则
但使用null来忽略this的绑定可能产生一些副作用。如果某个函数确实使用了this，默认绑定规则将this绑定到全局对象，将导致不可预计的后果。

更安全的this

传入一个特殊对象，将this的使用限制在此空对象中。

function foo(a, b) {
    console.log('a: ' + a + ', b: ' + b);
}
var ø = Object.create(null);
foo.apply(ø, [2, 3]); // a: 2, b: 3

this词法
箭头函数并不适用this的四种标准规则，而是根据外层作用域来决定this。
箭头函数的绑定无法被修改。

function foo() {
    return (a) => {
        console.log(this.a);
    }
}
var obj1 = {
    a: 2
}
var obj2 = {
    a: 3
}
var bar = foo.call(obj1);
bar.call(obj2); // 2