JS基础（五）this解析

2020-07-19 5023

欢迎阅读，本篇主要介绍JS中的this。

前言

本篇将全面学习this。

1. 为什么要使用this

function identify () {
  return this.name.toUpperCase();
}

function speak () {
  var greeting = "Hello, 我是" + identify.call(this);
  console.log(greeting); 
}

var me = {
  name: "Kyle"
}

var you = {
  name: "Reader"
}

identify.call(me);  // KYLE
identify.call(you); // Reader

speak.call(me); // Hello, 我是 KYLE
speak.call(you); // Hello, 我是 READER

无需看懂代码执行逻辑，只需要能看出我们可以在不同的上下文对象（me和you）中重复使用函数 identify() 和 speak()，不用针对每个对象编写不同版本的函数即可。
如果不使用 this，那就需要给 identify() 和 speak() 显示的传入一个上下文对象。
如下：

function identify(context) {
  return context.name.toUpperCase();
}

function speak(context) {
  var greeting = "Hello, 我是" + identify(context);
  console.log(greeting);
}

identify(you); // READER
speak(me); // Hello, 我是 READER

this提供了更优雅的方式隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。
随着你使用模式越来越复杂，显示传递上下文对象会让代码变得越来越混乱，使用this则不会变成这样。

2. 对this的误解

说起this，很容易将其理解成指向函数自身。

从英语的词法角度来说似乎说得通，但其实不是，看下面这个例子：

function foo(num) {
  console.log("foo: " + num);

  // 记录foo被调用的次数
  this.count++;
}

foo.count = 0;
var i;
for (i = 0; i<10; i++) {
  if (i > 5) {
    foo(i);
  }
}

// foo: 6
// foo: 7
// foo: 8
// foo: 9

// foo被调用多少次？
console.log(foo.count); // 0

console.log产生了4条输出，证明foo(…)确实被调用了4次，但是foo.count仍是0，显然从字面理解this是错误的。
执行foo.count = 0时，的确向函数对象foo添加了一个属性count，但是函数内部代码this.count中的this并不是指向那个函数对象，所以虽然属性名相同，根对象却并不相同。

第二种常见误解：this指向函数的作用域

这个问题有些复杂，因为某种情况下它是正确的，但是在其他情况下它却是错误的。
需要明确的是，this在任何情况下都不指向函数的词法作用域。
在此先说明作用域的相关概念：
通常来说，作用域一共有两种主要的工作模型：词法作用域和动态作用域。

词法作用域是大多数编程语言所采用的模式，而动态作用域仍有一些编程语言在用，而 JavaScript 就是采用的词法作用域，也就是在编程阶段，作用域就已经明确下来了。

function foo(){
  console.log(a);   // 输出 2
}

function bar(){
  let a = 3;
  foo();
}

let a = 2;

bar();

因为 JavaScript 所用的是词法作用域，在 foo() 声明的阶段，就已经确定了变量 a 的作用域了。
倘若，JavaScript 是采用的动态作用域，foo() 中打印的将是 3。

function foo(){
  console.log(a);   // 输出 3 （不是 2）
}

function bar(){
  let a = 3;
  foo();
}

let a = 2;

bar();

而 JavaScript 的 this 机制跟动态作用域很相似，是在运行时在被调用的地方动态绑定的。

3. this到底是什么

学习this的第一步是明白this既不指向函数自身也不指向函数的词法作用域，抛开以前错误的假设和理解，this实际上是在函数被调用时发生的绑定，
它指向什么完全取决于函数在哪里调用。当一个函数被调用时，会创建一个活动记录（既执行上下文）。
这个记录会包含函数在哪里调用（调用栈）、函数的调用方法、传入的参数等信息。this就是这个记录的一个属性，会在函数执行过程中用的。

4. this的四种绑定规则

在 JavaScript 中，影响 this 指向的绑定规则有四种：默认绑定、隐式绑定、显式绑定、new绑定

1. 默认绑定

默认绑定是最直接的一种方式，就是不加任何的修饰符直接调用函数，如：

function foo() {
  console.log(this.a)   // 输出 a
}
var a = 2;  //  变量声明到全局对象中
foo();

使用 var 声明的变量 a，被绑定到全局对象中，如果是浏览器，则是在 window 对象。foo() 调用时，引用了默认绑定，this 指向了全局对象。

2. 隐式绑定

隐式绑定会发生在调用位置存在【上下文对象】的情况，如：

function foo() {
  console.log(this.a);
}

let obj1 = {
  a: 1,
  foo,
};

let obj2 = {
  a: 2,
  foo,
}

obj1.foo();   // 输出 1
obj2.foo();   // 输出 2

当函数调用时，拥有上下文对象的时候，this 会被绑定到该上下文对象。正如上面的代码，obj1.foo() 被调用时，this 绑定到了 obj1,而 obj2.foo() 被调用时，this 绑定到了 obj2。

3. 显式绑定

显式绑定就是使用 Function.prototype 中的三个方法 call(), apply(), bind() 了。这三个函数，都可以改变函数的 this 指向到指定的对象，不同之处在于，call() 和 apply() 是立即执行函数，并且接受的参数的形式不同：

1 2	`call(this, arg1, arg2, ...) apply(this, [arg1, arg2, ...])`

而 bind() 则是创建一个新的包装函数，并且返回，而不是立刻执行。

1	`bind(this, arg1, arg2, ...)`

apply() 接收参数的形式，有助于函数嵌套函数的时候，把 arguments 变量传递到下一层函数中。
思考下面代码：

function foo() {
  console.log(this.a);  // 输出 1
  bar.apply({a: 2}, arguments);
}

function bar(b) {
  console.log(this.a + b);  // 输出 5
}
var a = 1;
foo(3);

上面代码中， foo() 内部的 this 遵循默认绑定规则，绑定到全局变量中。而 bar() 在调用的时候，调用了 apply() 函数，把 this 绑定到了一个新的对象中 {a: 2}，而且原封不动的接收 foo() 接收的函数。

4. new绑定

new 绑定是使用 new 操作符会产生 this 的绑定。在理解 new 操作符对 this 的影响，首先要理解 new 的原理。在 JavaScript 中，new 操作符并不像其他面向对象的语言一样，而是一种模拟出来的机制。在 JavaScript 中，所有的函数都可以被 new 调用，这时候这个函数一般会被称为【构造函数】，实际上并不存在所谓「构造函数」，更确切的理解应该是对于函数的「构造调用」。
使用 new 来调用函数，会自动执行下面操作：

创建一个全新的对象。
这个新对象会被执行 [[Prototype]] 连接。
这个新对象会绑定到函数调用的 this。
如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

所以如果 new 是一个函数的话，会是这样子的：

function New(Constructor, ...args){
    let obj = {};   // 创建一个新对象
    Object.setPrototypeOf(obj, Constructor.prototype);  // 连接新对象与函数的原型
    return Constructor.apply(obj, args) || obj;   // 执行函数，改变 this 指向新的对象
}
function Foo(a){
    this.a = a;
}

New(Foo, 1);  // Foo { a: 1 }

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

5. this绑定的优先级

如果一个位置发生了多条改变 this 的规则，那么优先级是如何呢？
看几段代码：

function foo() {
    console.log(this.a);
}
let obj1 = {
    a: 2,
    foo,
}

obj1.foo();     // 输出 2
obj1.foo.call({a: 1});      // 输出 1

这说明「显式绑定」的优先级大于「隐式绑定」

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

let obj1 = {};

let bar = foo.bind(obj1);
bar(2);
console.log(obj1); // 输出 {a:2}

let obj2 = new bar(3);
console.log(obj1); // 输出 {a:2}
console.log(obj2); // 输出 foo { a: 3 }

这说明「new 绑定」的优先级大于「显式绑定」而「默认绑定」，毫无疑问是优先级最低的。所以优先级顺序为：
「new 绑定」 > 「显式绑定」 > 「隐式绑定」 > 「默认绑定。」

6. ES6的箭头函数

ES6中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this，具体来说，箭头函数会继承外层函数调用的this绑定（无论this绑定到什么）。这其实和ES6之前代码中的self = this机制一样。