this指向的进阶总结

太过爱你忘了你带给我的痛 2023-10-02 09:28 19阅读 0赞

**目录**

1.this指向之基础

2. this指向之进阶

2.1 如果在构造函数中出现了显式return的情况，那么需要注意

3.this指向的优先级

3.1 先了解下什么是显式绑定和隐式绑定

3.2 优先级排序

4.手写一个bind函数

5.总结

--------------------

### 1.this指向之基础 ###

> **有种广为流传的说法：谁调用它，就指向谁。**

**默认情况下（非严格模式），this指向的规律是：**

> 一、普通函数中的this指向**window（**严格模式下，指向underfined**）**
> 
> 二、定时器方法中的this指向**window（**严格模式下，指向underfined**）**
> 
> 三、构造函数中的this指向**实例对象**
> 
> 四、对象方法中的this指向 **实例对象**
> 
> 五、原型对象方法中的this指向**实例对象**
> 
> 六、箭头函数指向是由**外层作用域来决定的**
> 
> 七、通过call、apply、bind，调用函数时，this会被绑定到指定参数的对象上
> 
> 八、一般通过上下文对象调用函数时，函数体内的this会被绑定到该对象上

--------------------

###  ###

### 2. this指向之进阶 ###

--------------------

#### 2.1 如果在构造函数中出现了显式return的情况，那么需要注意 ####

> 如果构造函数中显式的返回一个值，且返回的是一个对象（复杂类型），那么this就指向这个返回的对象；
> 
> 如果返回的不是一个对象（返回基本类型），那么this仍然指向实例。

--------------------

###  ###

### 3.this指向的优先级 ###

--------------------

#### 3.1 先了解下什么是显式绑定和隐式绑定 ####

> 显式绑定：把通过call、apply、bind、new进行绑定的
> 
> 隐式绑定：根据调用关系确定this指向的情况，称之为隐式绑定

#### 3.2 优先级排序 ####

--------------------

**new > call、apply、bind > 隐式绑定**

**注意：箭头函数的绑定无法被修改**

--------------------

### 4.手写一个bind函数 ###

> 注意：有两个细节我没考虑：一个是length属性的失真问题，还有一个就是没有考虑new 和 bind同时出现，bind绑定的this会失效问题（这个上文提到过，new的优先级要高于bind ）

Function.prototype.bind = Function.prototype.bind || function(context){
    
     var me  = this 
     var args = Array.prototype.slice.call(arguments,1)
     return function bound (){
    
     var innerArgs = Array.prototype.slice.call(arguments)
     var finalArgs = args.concat(innerArgs)
    return me.apply(context,finnalArgs)
    }

--------------------

###  5.总结 ###

> 最常用的还是隐式，根据上下文确定的this指向时，谁离得近，谁最后执行就是指向它。特别注意的是，var fn = A1.fn（） return fn() 这种 ,那么此时的this应该是指向全局的 ，再把var 换成const 或let ，那么指向的应该是underfined。