js apply call bind
时间: 2023-04-22 20:02:02 浏览: 70
js中的apply、call、bind是三个函数方法,都可以用来改变函数的this指向。
apply和call的作用是一样的,都是改变函数的this指向,并且立即执行该函数。区别在于传入参数的方式不同,apply接收一个数组作为参数,而call则是一个一个参数传入。
bind则是返回一个新的函数,改变函数的this指向,但不会立即执行该函数,需要手动调用。
这三个方法在实际开发中经常用到,特别是在处理函数作为参数传递的情况下,可以方便地改变函数的执行环境。
相关问题
apply call bind
`apply`, `call`, 和 `bind` 都是 JavaScript 中用于调用函数的方法。
`apply` 和 `call` 都是用来改变函数执行时的上下文(即 this 的指向)的。它们的第一个参数都是要绑定给 this 的值。`apply` 的第二个参数是一个数组,它会被作为函数的参数传入;而 `call` 的第二个到第 n 个参数是直接传入函数的参数。
举个例子:
```javascript
function addNumbers(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(addNumbers.apply(null, numbers)); // 6
console.log(addNumbers.call(null, ...numbers)); // 6
```
`bind` 方法也可以用来改变函数执行时的上下文,但是它不会立即执行函数,而是返回一个新的函数,这个函数的 this 值会绑定到 bind 的第一个参数。bind 的第二个到第 n 个参数也会被作为函数的参数传入。这个新函数可以稍后执行。
举个例子:
```javascript
function addNumbers(a, b, c) {
return a + b + c;
}
const addTwoNumbers = addNumbers.bind(null, 1, 2);
console.log(addTwoNumbers(3)); // 6
console.log(addTwoNumbers(4)); // 7
```
在这个例子中,`addTwoNumbers` 是一个新函数,它的 this 值被绑定到了 null,前两个参数被固定为 1 和 2。我们可以多次调用这个新函数,并传入第三个参数。
js手写call bind apply
好的,以下是手写 `call`、`bind` 和 `apply` 的实现:
```javascript
// 手写 call
Function.prototype.myCall = function(context, ...args) {
context = context || window;
const fn = Symbol();
context[fn] = this;
const result = context[fn](...args);
delete context[fn];
return result;
}
// 手写 apply
Function.prototype.myApply = function(context, args) {
context = context || window;
const fn = Symbol();
context[fn] = this;
const result = context[fn](...args);
delete context[fn];
return result;
}
// 手写 bind
Function.prototype.myBind = function(context, ...args1) {
const self = this;
return function(...args2) {
context = context || this;
return self.apply(context, [...args1, ...args2]);
}
}
```
这些方法的核心思想都是通过改变 `this` 的指向来实现调用函数,并且在调用完毕后删除添加到 `context` 对象中的临时属性。其中,`bind` 方法需要返回一个新函数,因此我们可以使用闭包来保存 `this` 和 `args1`,并在返回的函数中重新调用原函数。