本文共 2025 字，看完只需 8 分钟

概述

前面的文章讲解了 JavaScript 中的执行上下文，作用域，变量对象，this 的相关原理，但是我后来在网上看到一些例题的时候，依然没能全做对，说明自己有些细节还没能掌握，本文就结合例题进行深入实践，讨论函数在不同的调用方式 this 的指向问题。

老规矩，先给结论 1 和 结论 2：

this 始终指向最后调用它的对象

“箭头函数”的 this，总是指向定义时所在的对象，而不是运行时所在的对象。

特别提示：
本文的例子，最好自己在浏览器控制台中去试一遍，看完过两天就会忘的，一定要实践。

一、隐式绑定

1
2
3
4
5
6
7
8
9
10
// 例 1
var name = "window";

function foo() {
  var name = "inner";

  console.log(this.name);
}

foo(); // ?

输出：

window

例 1 中，非严格模式，由于 foo 函数是在全局环境中被调用，this 会被默认指向全局对象 window;

所以符合了我们的结论一：

this 始终指向最后调用它的对象

二、一般函数和箭头函数的对象调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 例 2
var name = "window";

var person = {
  name: "inner",
  show1: function() {
    console.log(this.name);
  },
  show2: () => {
    console.log(this.name);
  }
};

person.show1(); // ?
person.show2(); // ?

输出：

inner
window

person.show1() 输出 inner 没毛病，person.show2() 箭头函数为什么会输出 window 呢。MDN 中对 this 的定义是：

箭头函数不绑定 this, 箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层继承 this。

再看本文前面给的结论：

“箭头函数”的 this，总是指向定义时所在的对象，而不是运行时所在的对象。

由于 JS 中只有全局作用域和函数作用域，箭头函数在定义时的上一层作用域是全局环境，全局环境中的 this 指向全局对象本身，即 window。

三、call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 例 3
var name = "window";

var person1 = {
  name: "person1",
  show1: function() {
    console.log(this.name);
  },
  show2: () => console.log(this.name),
  show3: function() {
    return function() {
      console.log(this.name);
    };
  },
  show4: function() {
    return () => console.log(this.name);
  }
};
var person2 = { name: "person2" };

person1.show1(); // ？
person1.show1.call(person2); // ？

person1.show2(); // ？
person1.show2.call(person2); // ？

person1.show3()(); // ？
person1.show3().call(person2); // ？
person1.show3.call(person2)(); // ？

person1.show4()(); // ？
person1.show4().call(person2); // ？
person1.show4.call(person2)(); // ？

输出：

person1
person2

window
window

window
person2
window

person1
person1
person2

上面 10 行打印，你对了几个呢？

首先：
person1.show1() 和 person1.show1.call(person2) 输出结果应该没问题，call 的作用就是改变了调用的对象 为 person2。

其次：
person1.show2()，person1.show2.call(person2)，由于调用的是箭头函数，和本文例 2 中是一样的，箭头函数定义时 this 指向的是上一层，也就是全局对象， 并且 箭头函数不绑定自己的 this, 所以通过 call() 或 apply() 方法调用箭头函数时，只能传递参数，不能传递新的对象进行绑定。故打印的值都是 window。

进而：

1
2
3
4
5
6
7
function foo() {
  return function() {
    console.log(this.name);
  };
}

foo()();

博客前面的文章有讲过闭包，上面这段代码也是典型的闭包运用，可以看作：

1
2
3
4
5
6
7
8
function foo() {
  return function() {
    console.log(this.name);
  };
}

var bar = foo();
bar();

所以，很明显，被返回的内部函数其实是在全局环境下被调用的。回到前面看我们的结论 1，this 始终指向最后调用函数的对象，这句话的关键词应该是什么？我觉得应该是 调用，什么时候调用，谁调用。

再回过头来看：
person1.show3()() 输出 window，因为内部函数在全局环境中被调用。

person1.show3().call(person2) 输出 person2, 因为内部函数被 person2 对象调用了。

person1.show3.call(person2)() 输出 window，也是因为内部函数在全局环境中被调用。

最后：
重点理解结论 2：

“箭头函数”的 this，总是指向定义时所在的对象，而不是运行时所在的对象。

1
2
3
show4: function () {
    return () => console.log(this.name)
  }

这段代码中，箭头函数是在 外层函数 show4 执行后才被定义的。为什么？可以翻看我前面关于作用域链，执行上下文，变量对象的文章，函数在进入执行阶段时，会先查找内部的变量和函数声明，将他们作为变量对象的属性，关联作用域链，并绑定 this 指向。

所以：
person1.show4()() 输出 person1，因为外部函数在执行时的 this 为 person1, 此时定义了内部函数，而内部函数为外部函数的 this。

person1.show4().call(person2) 输出 person1，箭头函数不会绑定 this, 所以 call 传入 this 指向无效。

person1.show4.call(person2)() 输出 person2，因为外部函数在执行时的 this 为 person2,此时定义了内部函数，而内部函数为外部函数的 this。

四、构造函数中的 this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 例 4
var name = "window";

function Person(name) {
  this.name = name;
  this.show1 = function() {
    console.log(this.name);
  };
  this.show2 = () => console.log(this.name);
  this.show3 = function() {
    return function() {
      console.log(this.name);
    };
  };
  this.show4 = function() {
    return () => console.log(this.name);
  };
}

var personA = new Person("personA");
var personB = new Person("personB");

personA.show1(); //
personA.show1.call(personB); //

personA.show2(); //
personA.show2.call(personB); //

personA.show3()(); //
personA.show3().call(personB); //
personA.show3.call(personB)(); //

personA.show4()(); //
personA.show4().call(personB); //
personA.show4.call(personB)(); //

输出：

personA
personB

personA
personA

window
personB
window

personA
personA
personB

例 4 和 例 3 大致一样，唯一的区别在于两点:

  1. 构造函数中 this 指向被创建的实例
  2. 构造函数，也是函数，所以存在作用域，所以里面的箭头函数，它们的 this 指向，来自于上一层，就不再是全局环境 window, 而是构造函数 的 this。

五、setTimeout 函数

1
2
3
4
5
6
7
8
9
10
11
// 例 5
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
    setTimeout(() => {
      console.log("id:", this.id);
    }, 100);
  }, 100);
}

foo.call({ id: 111 }); //

输出：

111
111

注意一点：
setTimeout 函数是在全局环境被 window 对象执行的，但是 foo 函数在执行时，setTimtout 委托的匿名箭头函数被定义，箭头函数的 this 来自于上层函数 foo 的调用对象, 所以打印结果才为 111；

六、setTimeout 函数 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 例 6
function foo1() {
  setTimeout(() => {
    console.log("id:", this.id);
    setTimeout(function() {
      console.log("id:", this.id);
    }, 100);
  }, 100);
}

function foo2() {
  setTimeout(function() {
    console.log("id:", this.id);
    setTimeout(() => {
      console.log("id:", this.id);
    }, 100);
  }, 100);
}

foo1.call({ id: 111 }); // ？
foo2.call({ id: 222 }); // ?

输出：

111
undefined

undefined
undefined

例 5 中已经提到，setTimeout函数被 window 对象调用，如果
是普通函数，内部的 this 自然指向了全局对象下的 id, 所以为 undefined，如果是箭头函数，this 指向的就是外部函数的 this。

七、嵌套箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 例 7
function foo() {
  return () => {
    return () => {
      return () => {
        console.log("id:", this.id);
      };
    };
  };
}

var f = foo.call({ id: 1 });

var t1 = f.call({ id: 2 })()(); //
var t2 = f().call({ id: 3 })(); //
var t3 = f()().call({ id: 4 }); //

输出：

1
1
1

这段代码是为了巩固我们的结论 2：

“箭头函数”的 this，总是指向定义时所在的对象，而不是运行时所在的对象。

  1. foo.call({}) 在执行时，内部的第一层箭头函数才被定义
  2. 箭头函数无法绑定 this, 所以 call 函数指定 this 无效
  3. 箭头函数的 this 来自于上一层作用域（非箭头函数作用域）的 this

总结

有本书中有提到，当理解 JavaScript 中的 this 之后，JavaScript 才算入门，我深以为然。

原因是，要彻底理解 this, 应该是建立在已经大致理解了 JS 中的执行上下文，作用域、作用域链，闭包，变量对象，函数执行过程的基础上。

有兴趣深入了解上下文，作用域，闭包相关内容的同学可以翻看我之前的文章。

参考链接：

1：this、apply、call、bind
2: 从这两套题，重新认识 JS 的 this、作用域、闭包、对象
3: 关于箭头函数 this 的理解几乎完全是错误的
4: 深入 JS 系列

欢迎关注我的个人公众号“谢南波”，专注分享原创文章。
image