bind、call、apply区别?如何实现一个bind?
时间: 2024-01-27 18:03:54 浏览: 26
bind、call、apply都是用来改变函数执行时的上下文(this指向)的方法。
- `call`和`apply`作用相似,都是立即执行函数,并且可以传递参数,不同的是`call`接收的是参数列表,而`apply`接收的是参数数组。
- `bind`方法与`call`和`apply`不同的是,它不会立即执行函数,而是返回一个新函数,这个新函数可以在稍后被调用,且可以传递参数。同时,`bind`方法返回的函数中的this指向绑定的对象。
下面是一个模拟实现`bind`的代码:
```javascript
Function.prototype.bind = function(context) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
return function() {
var bindArgs = Array.prototype.slice.call(arguments);
return self.apply(context, args.concat(bindArgs));
}
}
```
该代码将`bind`方法添加到`Function.prototype`上,函数在调用`bind`时传入一个`context`参数,表示绑定的上下文(即函数执行时的`this`指向),然后返回一个新函数,新函数中的`this`指向绑定的`context`,并将传入`bind`方法的参数和新函数调用时传入的参数合并后作为参数传递给原函数。
相关问题
bind,call,apply 的区别?
简单来说,bind、call和apply的区别在于它们用来绑定函数到对象上的不同方式。bind可以将函数与对象绑定在一起,但不会立即调用,而call和apply可以立即调用函数。call接受参数时需要一个接一个传入,而apply可以传入一个参数数组。
call apply bind实现
call、apply和bind都是用来改变函数中的this指向的方法。其中,call和apply可以直接调用函数并传递参数,而bind则返回一个新的函数,需要手动调用。
具体实现方案如下:
- call的实现:
1. 给想要绑定的对象设置一个属性,并将该属性指向需要调用的函数。
2. 使用该对象调用函数,并传递参数。
3. 结束调用后,删除该属性。
- apply的实现:
1. 给想要绑定的对象设置一个属性,并将该属性指向需要调用的函数。
2. 使用该对象调用函数,并传递参数数组。
3. 结束调用后,删除该属性。
- bind的实现:
1. 创建一个新的函数,并将原函数作为其中的属性保存起来。
2. 当新函数被调用时,将之前绑定的对象作为this,并传递参数。
3. 返回新函数供后续调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [如何实现call、apply、bind](https://blog.csdn.net/XIAO_A_fighting/article/details/116701887)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [原生JS实现 call apply bind](https://download.csdn.net/download/weixin_38628990/14046564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]