【JavaScript】深入理解JavaScript中的this

清疚 2022-05-12 07:06 239阅读 0赞

### 1， 为什么要用this？ ###

来看一个例子：

如果不用this，代码会变成这样：

每次调用identify() 和 speak()都需要显式传入一个上下文对象给函数

然而， this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计  
得更加简洁并且易于复用。

随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this  
则不会这样。

### 2，对this的误解 ###

#### 第一种常见的错误：吧this 理解成指向函数自身 ####

来看一个例子：

显然this并没有指向foo函数

也许你会回避这个问题并使用其他方法来达到目的：

从某种角度来说这个方法确实“解决”了问题，但可惜它忽略了真正的问题——无法理解  
this 的含义和工作原理

#### 第二种常见的误解是， this 指向函数的作用域。在某种情况下它是正确的，但是在其他情况下它却是错误的。 ####

来看一个经典的例子：

function foo() {
    	var a = 2;
    	this.bar();
    }
    function bar() {
    	console.log( this.a );
    }
    foo(); // ReferenceError: a is not defined

你可能以为this.a就是foo()函数中定义的a，然而并不是你想的那样

理解this最重要的一点：  
**this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。 this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式.**

### 3，理解this的四种绑定规则 ###

#### 第一种：默认绑定 ####

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

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

应该注意到的第一件事是，声明在全局作用域中的变量（比如 var a = 2 ）就是全局对  
象(Window)的一个同名属性。

接下来我们可以看到当调用 foo() 时， this.a 被解析成了全局变量 a 。为什么？因为在本  
例中，函数调用时应用了 this 的默认绑定，因此 this 指向全局对象。

如果使用严格模式（ strict mode ），那么全局对象将无法使用默认绑定，因此 this 会绑定  
到 undefined ：

function foo() {
    	"use strict";
    	console.log( this.a );
    }
    var a = 2;
    foo(); // TypeError: this is undefined

#### 第二种：隐式绑定 ####

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

function foo() {
    	console.log( this.a );
    }
    var obj = {
    	a: 2,
    	foo: foo
    };
    obj.foo(); // 2

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj ，因此 this.a 和 obj.a 是一样的

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说：

function foo() {
    	console.log( this.a );
    }
    var obj2 = {
    	a: 42,
    	foo: foo
    };
    var obj1 = {
    	a: 43,
    	obj2: obj2
    };
    obj1.obj2.foo(); // 42

##### 隐式绑定出现的问题：隐式丢失 #####

1， 一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上，取决于是否是严格模式。  
看一个例子：

function foo() {
    	console.log( this.a );
    }
    var obj = {
    	a: 2,
    	foo: foo
    };
    var bar = obj.foo; // 函数别名！
    var a = "global"; // a 是全局对象的属性
    bar(); // "global"

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的  
bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

2，另一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时：

如果把函数传入语言内置的函数而不是传入你自己声明的函数，会发生什么呢？结果是一  
样的，没有区别：

function foo() {
    	console.log( this.a );
    }
    var obj = {
    	a: 2,
    	foo: foo
    };
    var a = "global"; // a 是全局对象的属性
    setTimeout( obj.foo, 100 ); // "global"

#### 第三种：显示绑定 ####

显示绑定的主要用法就是使用fn.call(), fn.apply(), fn.bind()  
call()和apply()的第一个参数都是你要绑定的对象，apply的第2个参数是一个数组，在使用  
call() 方法时，传递给函数的参数必须逐个列举出来  
**注意：call（）和apply（）都是立即调用函数**  
看一张图片：函数并没有等待2.5s再去调用  
![在这里插入图片描述][70]

接着往下看：

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

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

不过，这种绑定仍然无法解决丢失绑定的问题  
看一个例子:

function foo() {
    		console.log( this.a );
    	}
    	var obj = {
    		a:2,
    		foo: foo
    	};
    	var a = 100;
    	foo.call( obj ); // 2
    	setTimeout(obj.foo, 500) //100

你试图用call来显示将this绑定到obj上，不过失败了

不过显式绑定的一个变种可以解决这个问题。**称之为：硬绑定**

我们创建了函数 bar() ，并在它的内部手动调用了 foo.call(obj) ，因此强制把 foo 的 this 绑定到了 obj 。无论之后如何调用函数 bar ，它总会手动在 obj 上调用 foo 。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.  
bind ，它的用法如下：

function foo(something) {
    	console.log( this.a, something );
    	return this.a + something;
    }
    var obj = {
    	a:2
    };
    var bar = foo.bind( obj );
    var b = bar( 3 ); // 2 3
    console.log( b ); // 5

**注意：bind(…) 会返回一个硬编码的新函数**，它会把参数设置为 this 的上下文并调用原始函数。

#### 第四种：new绑定 ####

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

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

看一个例子：

function foo(a) {
    	this.a = a;
    }
    var bar = new foo(2);
    console.log( bar.a ); // 2

使用 new 来调用 foo(…) 时，我们会构造一个新对象并把它绑定到 foo(…) 调用中的 this  
上，也就是说this就是bar

[70]: /images/20220512/4c5e267df3f64da2ae27a7585ba39538.png