js中bind、call、apply的区别

本文详细解析了JavaScript中Function.prototype上的bind、call、apply三个方法的区别与使用方式。bind方法允许开发者提前设置函数的this上下文及部分参数,并返回一个待调用的新函数;call与apply则立即执行函数,主要区别在于参数传递的不同。

这三个方法都是写到Function对象的原型上的,也就是写到Function.prototype上的;其中bind方法是ES5里新增的。

bind方法

bind方法第一个参数是指定this,其他是直接传递给函数的参数。
用来固定某个函数的this和参数并返回一个函数等待后续调用。

function demo(a, b) {
    console.log(this, a, b);
}
let fn = demo.bind("this is bind", 12) // 没有任何输出,说明没有执行

fn() // "this is bind" 12 undefined
fn(10) // "this is bind" 12 10 
// bind方法可以在需要的时候再调用,也可以在调用的时候再添加参数,并且原有的参数也不会被覆盖。
call方法

call 方法第一个参数是指定this,其他是直接传递给函数的参数

demo.call("this is call",1) // "this is call" 1 undefined
demo.call("this is call", 1, 2) // "this is call" 1 2

//call方法是在指定this 和参数后立即调用这个函数
apply方法

apply方法第一个参数是指定this,第二个参数是传递给函数的参数的的数组;apply方法只有两个参数。

可以用于不知道参数个数的场景

demo.apply("this is apply", [1]) // "this is apply" 1 undefined
demo.apply("this is apply", [1,2]) // "this is apply"  1 2

// apply方法也是在指定this和参数后立即调用

总结

call和apply方法都是在指定this和参数后立即执行,区别是传递给函数的参数形式不一样;bind方法是在指定this和参数后返回一个函数,什么时候需要调用了再调用,并且可以在调用的时候添加参数,其他的和call方法一样

### JavaScript 中 `call`、`bind` 和 `apply` 的区别与用法 #### 1. 核心功能 `call`、`bind` 和 `apply` 都是用来改变函数执行时的 `this` 指向,从而动态绑定上下文对象[^1]。它们的主要区别在于调用方式和返回值。 #### 2. `call` 方法 `call` 方法会立即调用函数,并允许传入参数列表。它的第一个参数是需要绑定的 `this` 对象,后续参数为传递给函数的具体参数。 ```javascript function greet(greeting, punctuation) { return greeting + ', ' + this.name + punctuation; } const person = { name: 'Alice' }; console.log(greet.call(person, 'Hello', '!')); // 输出: Hello, Alice! ``` 这里,`call` 将 `this` 绑定到 `person` 对象,并传递了两个参数[^1]。 #### 3. `apply` 方法 `apply` 方法与 `call` 类似,但它接受一个数组作为参数列表。因此,当参数已经是数组形式时,使用 `apply` 更为方便。 ```javascript function greet(greeting, punctuation) { return greeting + ', ' + this.name + punctuation; } const person = { name: 'Alice' }; console.log(greet.apply(person, ['Hello', '!'])); // 输出: Hello, Alice! ``` 可以看到,`apply` 的第二个参数是一个数组[^2]。 #### 4. `bind` 方法 `bind` 方法不会立即调用函数,而是返回一个新的函数,该函数的 `this` 被永久绑定到指定的对象。这使得可以在稍后的时间点调用该函数。 ```javascript function greet(greeting, punctuation) { return greeting + ', ' + this.name + punctuation; } const person = { name: 'Alice' }; const boundGreet = greet.bind(person); console.log(boundGreet('Hello', '!')); // 输出: Hello, Alice! ``` 通过 `bind`,可以创建一个具有固定 `this` 值的新函数[^4]。 #### 5. 总结区别 - **`call`**:立即调用函数,参数以逗号分隔的形式传递。 - **`apply`**:立即调用函数,参数以数组形式传递。 - **`bind`**:不立即调用函数,而是返回一个新函数,其 `this` 被绑定到指定对象。 这些方法的核心差异在于是否立即执行函数以及参数的传递方式[^3]。 #### 示例代码对比 以下代码展示了三者的具体用法: ```javascript function multiply(a, b) { return a * b * this.value; } const obj = { value: 10 }; // 使用 call console.log(multiply.call(obj, 2, 3)); // 输出: 60 // 使用 apply console.log(multiply.apply(obj, [2, 3])); // 输出: 60 // 使用 bind const boundMultiply = multiply.bind(obj); console.log(boundMultiply(2, 3)); // 输出: 60 ``` ### 注意事项 - 如果需要将数组作为参数传递,则优先使用 `apply`。 - 如果需要延迟执行函数并绑定 `this`,则使用 `bind`。 - 在实际开发中,根据具体需求选择合适的方法[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值