JS中 改变this指向 bind 解释原理
时间: 2024-05-27 15:12:48 浏览: 7
bind 方法可以改变函数执行时的 this 指向。bind 方法会创建一个新函数,其 this 值会被绑定到 bind 的第一个参数,即传入 bind 方法的对象。当新函数被调用时,它会以指定的 this 值作为函数体内 this 的值,无论它最终是如何被调用的。此外,bind 方法还接受若干个附加参数,在新函数被调用时会作为参数传递给原函数。这样,我们便可以方便地改变函数的上下文环境,并传递一些参数。
相关问题
改变this指向手写bind
好的,下面是手写实现bind方法并改变函数this指向的示例代码:
```javascript
Function.prototype.myBind = function(context) {
var self = this;
return function() {
return self.apply(context, arguments);
};
};
```
这个函数使用了原型链的方式来给所有函数添加一个myBind方法。myBind方法接受一个上下文对象作为参数,并返回一个新的函数。当新函数被调用时,它将以指定的上下文对象作为“this”关键字,并将所有传递给它的参数传递给原始函数。
使用示例:
```javascript
var person1 = {
name: "Alice",
sayHi: function() {
console.log("Hi, my name is " + this.name);
}
};
var person2 = {
name: "Bob"
};
person1.sayHi.myBind(person2)(); // 输出:Hi, my name is Bob
```
在这个示例中,我们使用“person1.sayHi.myBind(person2)”来创建一个新的函数,该函数将“person1.sayHi”函数绑定到“person2”对象上。我们立即调用返回的新函数,并输出“Hi, my name is Bob”。这是因为新函数中的this指向了“person2”对象。
js中改变this指向的方法
在 JavaScript 中,有几种方法可以改变 this 的指向,包括:
1. 使用 call() 方法:call() 方法接受一个参数作为 this 的新值,并立即调用该函数。
2. 使用 apply() 方法:apply() 方法和 call() 方法类似,只是它接受一个参数数组作为函数的参数。
3. 使用 bind() 方法:bind() 方法返回一个新函数,其 this 值被绑定到指定的对象,但不会立即调用该函数。而是返回一个新函数,需要手动调用。
4. 使用箭头函数:箭头函数的 this 始终指向其定义时所在的作用域,而不是运行时所在的作用域。
需要注意的是,使用箭头函数或者 bind() 方法时,无法再次更改函数的 this 值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)