js this指向判断，this指向绑定与修改

灰太狼 2023-02-16 00:43 24阅读 0赞

在JavaScript中，`this`的指向，大多数情况下是比较头疼的问题，本篇文章，来让你对于`this`指向问题有明确的判断方法  
正常的函数中`this`绑定的判断主要遵循4个绑定规则：默认绑定、隐式绑定、显式绑定和new绑定

### 默认绑定和隐式绑定 ###

默认绑定和隐式绑定不太了解的话请去看我领已篇文章  
[js 隐式绑定与隐式丢失][js]  
这里我主要介绍另外两种绑定规则

### 显式绑定 ###

显式绑定主要是通过`call`、`apply`和`bind`来实现的

function fn(){ 
    	console.log(this.a)
    }
    var a = "windowsA"
    var obj = { 
    	a:"objA"
    }
    fn.call(obj); //objA

通过`fn.call(obj)`可以在调用`fn`时强制把他的`this`绑定在`obj`对象上  
`call`与`apply`用法上没差别，只是传参上有所不同，`bind`方法是会返回一个函数，需要调用才会执行，这里具体不会对其用法详细介绍了，想去了解的可以百度一下\\ (•◡•) /

### new绑定 ###

function fn(a){ 
    	this.a = a
    }
    var demo = new fn("hello");
    console.log(demo.a); //hello

使用`new`来调用`fn`时，会构造一个新对象，并把他绑定到`fn`调用的this上，`new`是可以影响this绑定的方法之一

### 判断this ###

判断`this`指向可以按照下面的顺序来进行判断

1.  函数是否在`new`中调用（`new`绑定）？如果是的话`this`绑定的就是新创建的对象，`var demo = new fn()`
2.  函数是否通过`call`、`apply`或`bind`绑定调用（显式绑定）？如果是的话`this`绑定的是指定的对象（`bind`的多次绑定只有第一次是有效的）`var demo = fn().call(obj)`
3.  函数是否在某个上下文对象中调用（隐式绑定）？如果是的话`this`绑定的是哪个上下文对象，`var demo = obj.fn()`
4.  如果都不是的话，就是默认绑定，严格模式下就是`undefined`，非严格模式下就是`windwos`，`var demo = fn()`

–来自《你不知道的JavaScript》

《你不知道的JavaScript》学习记录系列  
其他笔记请查看专栏：  
[《你不知道的JavaScript》学习笔记][JavaScript]

[js]: https://blog.csdn.net/guoqing2016/article/details/106586478
[JavaScript]: https://blog.csdn.net/guoqing2016/category_10080263.html