JavaScript中，this的绑定规则

对于 JavaScript 新手来讲，this 是很是基础同时也难以理解的知识点。

好比下面的代码，this 指向就有三种方式。

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

foo(); // 1
obj.foo(); // 2
foo.call({ a: 3 }); // 3

在《你不知道的 JavaScript》一书中，我总算比较清晰理解了 this。

this 就是函数运行时所在的环境对象，它指向运行时所在的位置，而不是定义时的位置。

根据 this 绑定规则，分为下面四种：

1. 默认绑定
2. 隐式绑定
3. 显式绑定
4. new 绑定

1. 默认绑定

默认状况下，this 指向全局对象。例以下面的代码。

var a = 2;
console.log(this.a); // 2

// 在函数中
function foo() {
  console.log(this.a);
}
foo(); // 2

// 在回调函数中
function doFoo() {
  return function() {
    console.log(this.a);
  };
}
doFoo()(); // 2

不过，函数在严格模式下，this 没法指向全局对象，所以this会绑定到undefined。

function foo() {
  "use strict";
  console.log(this);
}
foo(); // undefined

2. 隐式绑定

当函数做为方法被调用，需考虑运行时上下文环境。

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

代码中，foo()前面添加了obj对象的修饰，所以，obj对象就是函数的上下文。

this 会绑定到这个对象上。

另外，须要注意下面三种状况，它们会出现绑定对象丢失，从而把this绑定到全局对象或undefined上。

状况一

这段代码中，虽然obj.foo()和bar()都指向同一函数，但执行结果并不同。

能够理解为，bar()是一个不带任何修饰的函数调用，等价于直接调用foo()，所以应用了默认绑定。

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

obj.foo(); // 2
bar(); // 3

状况二

另外一种状况，发生在回调函数中。原理和上面的状况同样。

修改上面的代码，obj.foo做为参数传入doFoo()函数中，实际上，引用的是foo()函数自己，所以应用了默认绑定。

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

doFoo(obj.foo);  // 3

状况三

在一些流行的 JavaScript 库，进行事件处理操做时，回调函数的 this 可能会强制绑定到 DOM 元素上。

这种状况也值得注意。

3. 显式绑定

JavaScript 提供了call()、apply()和bind()方法，能够强制绑定函数的this对象。

function fn() {
  console.log(this.a);
}
fn.call({ a: 3 }); // 3

经过fn.call(obj)，咱们将函数运行时，this强制绑定到obj上。

call apply和bind的区别

call 和 apply 改变了函数的 this 上下文后，便执行该函数，而 bind 则是将该函数返回。

function fn() {
    console.log(this.a);
}
fn.call({ a: 3 }); // 3
fn.bind({ a: 4 })(); // 4

call和apply的区别

call 和 apply 的区别在于传入参数不一样。

call 方法接收若干个参数列表。

apply 第一个参数和 call 同样，第二个参数接收一个包含多个参数的数组。

let arr = [2, 5, 9]
console.log(Math.max.call(3, 2, 5, 9))  // 9
console.log(Math.max.call(3, arr))  // NaN
console.log(Math.max.apply(3, arr))  // 9

4. new 绑定

若是使用 new 构造函数，在函数内部，this 指向新建立的对象。

function foo() {
  console.log(this);
}
new foo(); // foo {}
foo(); // Window {...}

其余状况

须要忽略的this

若第三方库的某个函数使用了 this，默认绑定会把this指向全局对象，从而致使不可预测的后果。

一个安全的作法，就是使用显式绑定，将函数的this指向空对象。

function foo() {
  console.log(this);
}
// 建立空对象
var ø = Object.create(null);
// 使用bind()进行柯里化（Curry）
var bar = foo.bind(ø);
bar(); // {}

这方法一般也用于对象初始化，以得到一个干净且高度可定制的对象。

箭头函数

箭头函数经常使用于回调函数中。

它会继承父级做用域 this 绑定的对象，等价于ES6以前self = this的书写方式。

const people = {
    name: "Merry",
    sayHi() {
        console.log(this.name)
    },
    wait() {
        setTimeout(() => {
            console.log(this.name)
        })
    }
}
people.sayHi() // Merry
people.wait()  // Merry

此外还有软绑定（softBind），用的很少，了解一下便可。

---

参考连接

学习JavaScript闭包

JavaScript的this用法

JavaScript 的 this 原理