JavaScript 中的 this 简单规则

几条规则确定函数里的 this 是什么。

想确定 this 是什么其实非常简单。总体的规则是，通过检查它的调用位置，在函数被调用的的时候确定 this。它遵循下面这些规则，接下来以优先级顺序说明。

规则

1、如果在调用函数时使用 new 关键字，那么函数里的 this 就是一个全新的对象。

function ConstructorExample() {  console.log(this);  this.value = 10;  console.log(this);}new ConstructorExample();// -> {}// -> { value: 10 }

2、如果使用 apply、call 或者 bind 调用函数，那么函数里的 this 就是作为参数传进去的对象。

function fn() {  console.log(this);}var obj = {  value: 5};var boundFn = fn.bind(obj);boundFn();   // -> { value: 5 }fn.call(obj); // -> { value: 5 }fn.apply(obj); // -> { value: 5 }

3、如果函数作为一个方法调用，就是说如果使用点符号调用函数，那么 this 就是拥有这个函数作为属性的对象。换句话说，当一个点在函数调用的左侧时，this 就是这个点左侧的那个对象。

var obj = {  value: 5,  printThis: function() {    console.log(this);  }};obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函数作为一个纯粹的函数调用，也就是说，它在没有上述任何条件的情况下被调用，那么 this 就是全局对象。在浏览器里，就是 window 对象。

function fn() {  console.log(this);}// 如果在浏览器里调用：fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意这个规则其实和第三个规则是一样的，区别在于没有声明为方法的函数会自动成为全局对象 window 的属性。因此，这其实是一个隐式的方法调用。当我们调用 fn()，其实就会被浏览器理解为 window.fn()，所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述规则有多个适用，那么优先级更高的就会设置 this 值。

6、如果是 ES2015 里的箭头函数，那么它将忽略上述所有规则，并在创建的时候接收包含它的作用域作为 this 的值。想确定 this 具体是什么的话，只需从创建箭头函数那里往上一行，看看那儿的 this 是什么，箭头函数里的 this 值和它一样。

const obj = {  value: 'abc',  createArrowFn: function() {    return () => console.log(this);  }};const arrowFn = obj.createArrowFn();arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三个规则，当我们调用 obj.createArrowFn() 的时候，createArrowFn 里的 this 是 obj，因为这是方法调用。因此，obj 会在 arrowFn 里绑定到 this 上。如果我们在全局作用域创建一个箭头函数，那么 this 值就会是 window。