js中的bind,call,apply方法的区别以及用法

简介: JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。

在javascript语言中改变this指向的方法有三种分别是bind,call,apply,那么它们的共同点,不同点以及各自的用法都是什么呢?

目录

bind,call,apply的共同点

bind,call,apply的不同点

总结

bind,call,apply的共同点

都能改变this的指向。
都能够进行传参。

bind,call,apply的不同点

bind会返回一个新的函数,新函数的this指向以及参数都是跟bind对应。

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

var newFunction = prinfName.bind(obj,'a')

newFunction () // 输出'aaa'

2.call的功能基本与bind一致,但call会在执行后立即调用改变了this指向的函数。

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

// 此时newFunction 将不是一个函数,而是prinfName.bind(obj,a)函数执行后的返回值
// 因为printName函数没有返回任何东西所以newFunction等于undefined
var newFunction = prinfName.bind(obj,'a') // 输出'aaa'

3.apply跟call一致也会在执行后调用改变this指向的方法,但apply的传参是一个数组

function printName(a){
console.log(this.name + 'a')
}

var obj = {
name:'aa'
}

// 此时newFunction 将不是一个函数,而是prinfName.apply(obj,['a'])函数执行后的返回值
// 因为printName函数没有返回任何东西所以newFunction等于undefined
var newFunction = prinfName.apply(obj,['a']) // 输出'aaa'

总结

    这三个方法的功能都是可以改变this指向,区别是bind改变this指向后不会立即执行那个函数,call和apply则会立即执行,而apply的传参是用数组,以上就是bind,call,apply的区别和用法。

相关文章
|
28天前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
10 1
|
2月前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。
|
2月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
17 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
2月前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
4月前
|
JavaScript
js【详解】call()、apply()、bind()方法
js【详解】call()、apply()、bind()方法
39 6
|
6月前
|
前端开发 JavaScript
前端 JS 经典:apply、call、bind
前端 JS 经典:apply、call、bind
94 0
|
JavaScript 前端开发 API
JavaScript中的new,bind,call,apply的原理及简易实现
JavaScript中的new,bind,call,apply的原理及简易实现
97 0
|
6月前
|
JavaScript
call、apply、bind的使用场景区分(js的问题)
call、apply、bind的使用场景区分(js的问题)
24 0
|
6月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
JavaScript 前端开发
JavaScript call、apply 和 bind 的区别
JavaScript call、apply 和 bind 的区别