JS中最让人疑惑的机制：this

如果你系统学习过JS，肯定花过不少精力在this的机制上，但估计大部分人从来没彻底搞明白过，而现实开发过程中，确实发生过一些this导致的bug，而且这种bug有不错的隐蔽性，难以排查。this有时会略显玄学，主要是因为这几点：

1. this的绑定发生在函数调用时；
2. this的指向可以被开发者手动更改；
3. 箭头函数的this规则和普通函数是完全不一样的；

重要：下文中若无说明，所有例子都运行在浏览器环境下；Node.js中的this有一些不同，文章最后会提到。

this到底是什么？

JS的函数本质上是一个对象，比如有个函数function foo() {}，在内存中foo保存的其实是函数的地址，而函数本身则单独存在一块内存区域中，所以foo函数定义在哪里并不意味着其执行在哪里（好像是句废话），我们需要以某种方式获取到当前的执行环境（一般称之为执行上下文，context），这就是this存在的目的。

如何准确判断this的指向

一、找到函数的调用位置

理解了前面说的this的存在意义，则 “this取决于函数的调用位置” 这句话就不难理解了，先来看个简单的例子：
#例子1：

var x = 1;
function foo() {
  var x = 2;
  console.log(this.x);
}
foo(); // ?

浏览器环境下答案为：1。

这里foo函数在全局环境下被调用，所以函数中的this指向的就是全局环境，即:

function foo() {
  console.log(this === window); // true
}
foo();

调用独立函数时this的绑定一般称为默认绑定

然而，默认绑定有个限制条件：函数运行在非严格模式下！如果函数运行在严格模式下，如：

var x = 1;
function foo() {
  'use strict';
  var x = 2;
  console.log(this.x);
}
foo();

则会报错Uncaught TypeError，因为严格模式下，函数中的this无法绑定全局环境。

接下去，我们看一种稍微复杂点的情况：
#例子2：

var a = {
  x: 1,
  y: function() {
    return this.x;
  }
};
console.log(a.y()); // ?
var b = {
  x: 2,
  y: a.y
};
console.log(b.y()); // ？

答案：a.y()结果为1，b.y()结果为2。

来分析一下：

1. 对象a中定义了一个函数并赋值给了属性y，属性y保存了函数的地址；
2. 在对象a中找到y保存的内存地址所指向的函数，并执行该函数，所以当前函数执行在a环境下，查找到a环境下的x为1；
3. 将对象a下属性y保存的函数地址赋值给对象b的属性y；
4. 在对象b下找到y保存的内存地址所指向的函数，并执行该函数，所以该函数目前的执行环境是b，查找到b环境下的x为2；

上述的分析过程中很重要的一点是理解属性y保存的仅仅是函数的地址，而函数的this则取决于是谁通过函数的地址找到了函数本身并调用了！
例子2中的写法其实和下面的写法输出结果是一样的，属性y都只是拿函数的地址而已：

function foo() {
  return this.x;
}
var a = {
  x: 1,
  y: foo,
};
var b = {
  x: 2,
  y: foo,
};
console.log(a.y()); // ?
console.log(b.y()); // ?

类似上面这种函数的调用位置已存在上下文对象的情况（或者说，函数被调用在某个对象里面），一般称之为this的隐式绑定。

#例子3：

var x = 1;
var a = {
  x: 2,
  y: function() {
    return this.x;
  }
};
var b = a.y;
console.log(b()); // ?

按照上面的步骤去分析，很容易得到答案1。因为函数的地址最终赋值给了一个全局变量，并且在全局环境下执行了，这里this最后应用了默认绑定。

这种情况有个术语叫做隐式丢失，即函数中this丢失了它想要绑定的对象，而绑定到了全局上（或者undefined上，取决于是否严格模式）。

变态的情况来了：
#例子4：

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

答案：1。
这里依然还是理解一点：虽然foo函数是在对象a下调用的，但是foo函数本身不属于对象a，所以foo函数内部调用的bar函数与对象a无关！所以bar函数的this使用的默认绑定，即绑定在全局对象上。

接着看高阶函数中this的绑定行为，这可能也是很多人为之困惑的一个地方，来看个例子：
#例子5：

var x = 1;
var a = {
  x: 2,
  y: function() {
    console.log(this.x)
  }
}
setTimeout(a.y, 10)

答案：浏览器中执行，结果为1。
浏览器环境内置的setTimeout函数实现和下面的伪代码类似：

function setTimeout(fn, delay) {
  fn(); // delay毫秒之后执行fn
}

和前面分析的一样，通过a.y保存的是函数的地址，现在把该函数地址传递给了setTimeout，setTimeout内部调用该函数时已与对象a无关了，所以这里应用了默认绑定，又是一个隐式丢失的问题！

二、手动更改this的指向

上面所说的都是在开发者无意识情况下的this绑定，下面介绍开发者刻意更改this指向的情况。
JS提供了几个可以更改函数执行上下文的方式，首先是著名的call和apply，我们正常调用一个函数时样子：

function foo(arg1, arg2, ...) {}; // 声明函数
foo(arg1, arg2, ...); // 调用函数

调用函数的行为foo()其实可以显式成foo.call(ctx, arg1, arg2, ...)或foo.apply(ctx, [args])。call和apply的第一个参数，就是要执行的函数的上下文，默认情况下，ctx指向foo的调用者，比如例子2中，a.y()和a.y.call(a)等效，b.y()和b.y.call(b)等效。我们也可以更改ctx：

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

这种绑定方式称之为显示绑定。

如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作 this 的绑定对 象，这个原始值会被转换成它的对象形式(也就是new String(..)、new Boolean(..)或者 new Number(..))，这通常被称为“装箱”。

call和apply两个方法作用是一样的，只是他们的传参方式不一样。现在我们可以在调用函数时，任意更改函数的this指向了！但是，例子5中的情况我们应该如何做呢？call或apply只能在调用时进行手动绑定，可setTimeout这类JS内置函数我们无法更改回调函数的调用行为。
JS提供了bind方式来解决这种问题。如例子5这样写：

var x = 1;
var a = {
  x: 2,
  y: function() {
    console.log(this.x); // 2
  }
}
setTimeout(a.y.bind(a), 10);

bind() 方法会创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

关于bind的用法，这里不做更多介绍，可查看MDN，里面介绍很详细

三、new绑定

简单来说，当我们用new关键字修饰一个函数时，会自动执行下面一系列操作：

1. 创建(或者说构造)一个全新的对象。
2. 这个新对象会被执行[[原型]]连接。（本文不关心原型知识）
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

#例子6：

function Foo() {
  this.x = 2;
}
foo = new Foo();
console.log(foo.x); // 2

构造函数很简单，是初级的JS基础，但简单的语法可能遇到复杂场景，比如当new绑定遇上隐式绑定甚至显式绑定时，会发生什么？

先来看下如果遇到隐式绑定的情况：
#例子7：

function foo(num) {
  this.x = num;
}
var a = {
  foo: foo
};
a.foo(1)
console.log(a.x); // ?
var b = new a.foo(2);
console.log(a.x); // ?
console.log(b.x); // ?

答案：第一个a.x结果为1，第二个a.x结果也为1，b.x结果为2。
执行结果告诉我们，当函数调用位置在某个对象中时（即隐式绑定），如果调用使用了new关键字进行修饰，则函数内部的this指向的是新创建的实例对象，即：new绑定的优先级高于隐式绑定。

接下去探索new绑定遇上显式绑定的情况，注意：call或apply不能与new一起使用，即JS不允许这么做：new foo.call(ctx)，会报错：Uncaught TypeError: foo.call is not a constructor。但我们通过bind来绑定this：
#例子8：

function foo(num) {
  this.x = num;
}
var a = {
  x: 0,
};
var bar = foo.bind(a); // 将foo内的this绑定到a上
bar(1);
console.log(a.x); // ?
var b = new bar(2);
console.log(a.x); // ?
console.log(b.x); // ?

答案：第一个a.x结果为1，第二个a.x结果也为1，b.x结果为2。
虽然我们先通过bind把foo函数的this绑定到了对象a上，但是我们new这个绑定后的函数，函数内部的this依然指向了新的实例对象！由此可见：new绑定的优先级高于显式绑定。

普通函数的this绑定小总结

1. 判断this指向最重要的一点是找到函数的调用位置，还要理解一点：无论函数如何被赋值，赋值的都是函数的地址，而不是函数本身。函数的this取决于是谁通过函数的地址找到了函数本身并调用了。
2. 如果函数被调用在全局环境，严格模式下，this无法指向window，而是undefined。
3. call、apply、bind可以手动更改函数的this指向，但遇到new实例化函数时，new绑定的优先级最高！

ES6中的箭头函数的this绑定

回顾一下前文关于隐式丢失的例子5：

var x = 1;
var a = {
  x: 2,
  y: function() {
    console.log(this.x);
  }
}
setTimeout(a.y, 10); // 输出：1

如果不用显示绑定，我们该如何做呢？我相信很多人都写过类似这样的代码：
#例子9：

var x = 1;
var a = {
  x: 2,
  y: function() {
    var self = this;
    setTimeout(function() {
      console.log(self.x);
    }, 10);
  }
}
a.y(); // 输出：2

例子9中我们使用了熟悉的词法作用域来解决this绑定丢失的问题：在this指向确定的作用域内将this赋值给一个变量，此时，该作用域内的子作用域内，就可以直接拿这个变量进行使用了，非常直观！
虽然这样比较完美的解决了this绑定丢失的问题，但是如果项目中充斥着这样的代码，会显得不美观优雅，现在ES6的箭头函数很好地解决了这个问题：
#例子10：

var x = 1;
var a = {
  x: 2,
  y: function() {
    setTimeout(() => {
      console.log(this.x);
    }, 10);
  }
}
a.y(); // 输出：2

例子10中的箭头函数的行为和例子9中的写法类似，但是代码更简洁优雅。

箭头函数的this绑定规则和普通函数是完全不一样的，它用箭头函数所定义的词法作用域覆盖了this本来的值。

我们把例子2中的函数改成箭头函数形式，再来看下结果：

var x = 1;
var a = {
  x: 2,
  y: () => {
    return this.x;
  }
};
console.log(a.y()); // ?
var b = {
  x: 3,
  y: a.y
};
console.log(b.y()); // ？

答案：a.y()输出1，b.y()输出也是1。
即使用call/apply/bind，箭头函数的this也不会改变：

var x = 1;
var a = {
  x: 2
}
var foo = () => {
  console.log(this.x);
}
foo.call(a);

答案：1。

记住：箭头函数没有自己this，所以它的this就是它所在的作用域的this！也正因为箭头函数没有this，所以箭头函数不能作为构造函数用new实例化。

image.png

Node.js中的this机制

Node.js下的this和浏览器环境下有所不同，主要表现在以下几处：

1. 全局环境的this指向module.exports

console.log(this === module.exports); // true

2. 独立普通函数的this指向global

function foo() {
  console.log(this === global); 
}
foo(); // true

这里需要注意一点，Node.js的每个js文件都是单独的模块，就算使用var定义在顶层，也只是这个module的全局变量。

var x1 = 1;
global.x2 = 2;
function foo() {
  console.log(this.x1);  // undefined
  console.log(this.x2);  // 2
}
foo();

3. setTimout机制和浏览器不一致

Node.js的setTimeout可查看官方文档：timer，Node.js环境的setTimeout中的this指向的是Timeout类（setInterval也是一样），看个例子：

var x = 1;
var a = {
  x: 2,
  y: function() {
    console.log(this)
  }
}
setTimeout(a.y, 10)

输出结果为：

image.png

大致就是这些不同，若还有别的情况下this绑定不一致，请无情指出，谢谢！

总结

确实蛮复杂。