js 基础 关于this

Posted 2020-10-08 TristaLee

this指向问题。

this 关键字是 javascript 中很特别的一个关键字，被自动定义在所有函数的作用域中。this提供了一种更优雅的方式隐式“传递”一个对象的引用。今天就来说说 this 的指向问题。 

this 是在运行时，也就是说函数被调用时进行绑定，而不是在编写时进行绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数在哪里被调用。

 

一、调用位置

所谓 调用位置 就是 函数被调用的位置。找到这个位置并不是很简单的事情，因为有的时候，真正的调用位置会被隐藏起来。

这里要做的就是分析调用栈，即为了到达执行位置所调用的所有函数，我们关心的调用位置就在当前正在执行的函数的前一个调用中。

举个例子：

 1 function test(){
 2     // 当前调用栈是 test 
 3     // 因此当前调用位置是 全局作用域
 4     
 5     console.log("test");
 6     
 7     bar(); // bar的调用位置
 8 }
 9 
10 function bar(){
11     // 当前的调用栈是 test -> bar
12     // 因此当前的调用位置在 test 中
13 
14     console.log("bar");
15     foo(); // foo的调用位置
16 }
17 
18 function foo(){
19     // 当前的调用栈 test -> bar -> foo
20     // 因此调用位置在 bar 中
21     
22     console.log("foo");
23 }
24 
25 test(); // test的调用位置

那么知道调用位置之后，我们来看看 它是如何决定 this 的绑定对象的。

 

二、绑定规则

1、默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则的默认规则。

例子：

1 function test(){
2     console.log(this.a); 
3 }
4 var a = 2;
5 test(); // 2

声明在全局作用域中的变量（比如var a=2）就是全局对象的一个同名属性，即浏览器环境下的 window.a=2;

接下来，我们可以看到调用 test() 时，this.a 被解析成了全局变量 a，为什么呢？因为在这个例子中，test()是直接使用不带任何修饰的函数引用进行调用的，应用了默认规则，this 指向了全局对象。

 

这里要注意一个问题，如果使用了严格模式（strict mode），则不能将全局对象用于默认绑定，因此 this 会绑定到 undefined。

例子：

1 function test(){
2     "use strict";
3     console.log(this.a);
4 }
5 var a = 2;
6 test(); //TypeError:this is undefined

但是这里有一个非常重要的细节。虽然 this 的绑定规则完全取决于调用位置，但是只有 test() 运行在非 strict mode 下时，默认绑定才能绑定到全局对象；在严格模式下调用 test() 则不影响默认绑定。

例子：

1 function test(){
2     console.log(this.a)
3 }
4 var a =2;
5 (function(){
6     "use strict";
7     foo(); // 2
8 })()

比较一下上面的两个例子，发现不同 strict mode 中 this 应用默认绑定的差别。

 

2、隐式绑定

另一条需要考虑的规则是调用位置是否有上下文，或者说是否被某个对象拥有或者包含。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 obj.test(); // 2

当 test() 被调用时，它的前面加上了对 obj 的引用。当函数引用上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。在本例中， test() 调用时 this 被绑定到 obj，因此 this.a 即 obj.a。

在隐式绑定中需要注意两点：

a、对象属性引用链中只有上一层或者说最后一层在调用中起作用。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 var obj_1 = {
11     a:4,
12     obj:obj 
13 }
14 
15 obj_1.obj.test(); // 2

 

b、隐式丢失。隐式绑定的函数丢失绑定对象，即应用默认绑定，从而把 this 绑定到全局对象上或者是 undefined（如果是严格模式）。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 var foo = obj.test;
11 
12 var a = 4;
13 
14 foo(); // 4

这里的 foo 实际上 引用的是 test 函数本身，当在执行 var foo = obj.test; 时，就把 obj.test 对 test 的引用地址复制给了 foo，也就是说 foo 和 obj.test 指向同一个 引用地址。所以 调用 foo 其实是一个不带任何修饰的函数调用，应用了默认绑定。关于复制的引用这里要是还是不是很明白 可以看一下，http://www.cnblogs.com/lijiayi/p/jsdeeepcopy.html 中的第一部分基本类型 和 引用类型。

 

3、显示绑定

这里主要就是指通过 call() 、apply() 的函数调用，实现的绑定方式。

它们的第一个参数是一个对象，是给 this 准备的，接着在调用函数时将其绑定到 this。因为你可以直接指定 this 的绑定对象，所以就叫显示绑定。

例子： 

1 function test(){
2     console.log(this.a)
3 }
4 
5 var obj = {
6     a:2
7 };
8 
9 test.call(obj) // 2

通过 test.call() ，我们可以在调用 test 时强制把它的 this 绑定到 obj 上。

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

 

在显示绑定中需要注意一点：

显示绑定中 call apply 或者 bind 中传入 null 或者 undefined ，这些值在调用时会被忽略，实际应用的是默认绑定。

例子：

1 function test(){
2     console.log(this.a)
3 }
4 var a = 2;
5 test.call(null); // 2

你或许会想，我怎么会传个 null ？

一种非常常见的做法是 使用 apply 来 “展开” 数组，并当作参数传入一个函数。

例子：

1 function test(a,b){
2     console.log("a:"+ a + ",b:" + b)
3 }
4 foo.apply(null,[2,3]); // a:2,b:3

另一种做法 用bind 可以对参数进行柯里化（预先设置一些参数）

例子:

1 function test(a,b){
2     console.log("a:"+ a + ",b:" + b)
3 }
4 
5 var bar = test.bind(null,2);
6 bar(3) // a:2,b:3

以上两种方法都需要传入一个参数当作 this 的绑定对象，但如果函数并不关系 this 的话，你仍然需要一个占用值，这时 null 可能是一个不错的选择。

 

4、new 绑定

使用 new 来调用函数，或者说是发生构造函数调用时，会自动执行下面的操作。

a、创建（或者说构造）一个全新的对象。

b、这个新对象会被执行 [[prototype]] 连接。

c、这个新对象会绑定到函数调用的 this。

d、如果函数没有返回其他对象，那么 new 表达式中的函数会自动返回这个新对象。

例子：

1 function test(a){
2    this.a = a
3 }
4 
5 var bar = new test(2);
6 console.log(bar.a); // 2

使用 new 来调用 test() 时 ，我们会构造一个新对象并把它绑定到 test() 调用中的 this 上。

 

三、优先级

现在你已经知道 this 绑定的四条规则，那么当某个调用位置可以应用多个规则怎么办？

在这里我们说一下，上面四条规则的优先级：

new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定

 

总结：当我们在碰到 this 的时候先找到调用位置，然后按照以下顺序应用调用规则：

1、函数是否在 new 中调用，即应用的 new 绑定？如果是的话 this 绑定的是新创建的对象。

var bar = new test();

2、函数是否通过 call 和 apply 调用，即应用 显示绑定？如果是的话 this 绑定的是指定的对象。

test.call(obj)

3、函数是否在某个上下文中调用，即应用 隐式绑定？ 如果是的话 this 绑定的是那个上下文对象。

obj.test()

4、如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined ，否则绑定到全局对象。

test()

 

四、es6 中的 this

在 es 6 中 使用了一种无法应用上面这些规则的特殊函数类型：箭头函数。

箭头函数不是使用 function 关键字定义的，而是使用被称为 “胖箭头” 的操作符 => 定义的。箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作用域来决定 this。
例子：

 1 function test(){
 2     return (a)=>{
 3         console.log(this.a)
 4     }
 5 }
 6 
 7 var obj1 = {
 8     a:2
 9 }
10 
11 var obj2 = {
12     a:4
13 }
14 
15 var bar = test.call(obj1);
16 bar.call(obj2);  // 2，不是4！

test 内部创建的箭头函数会捕获调用时 test() 的 this。由于 test 的 this 绑定到了 obj 1，bar（引用箭头函数） 的 this 也会绑定到 obj 1 ，箭头函数的绑定无法被修改（new也不行）。箭头函数会继承外层函数调用的 this 绑定。

 

引用并感谢：

你不知道的JavaScript（上卷） （炒鸡推荐大家看）