【笔记】call、apply、bind函数

dahuihuiya

已于 2024-01-07 11:40:18 修改

阅读量563

点赞数 16

文章标签：笔记 javascript

于 2024-01-07 11:35:14 首次发布

本文链接：https://blog.youkuaiyun.com/dahuihuiya/article/details/135436131

版权

本文介绍了JavaScript中call、apply和bind三个方法，它们都可用于改变函数调用时的this指向。call和apply允许通过传递参数列表改变this，而bind创建一个新的函数实例，其this固定但不执行。这些技巧在处理对象方法、类型检测和函数封装等方面有广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 作用

用于指定或改变普通函数中的this指向；

2.1call函数

使用call方法可以在调用函数的同时改变被调用函数中的this指向；

语法：

fun.call(指定的this值，参数1，参数2，···) //返回值是函数的返回值

如下：

const obj = {
    name:'huihui',
    age:18
}

function fn(a,b) {
    return a * b
}

const result = fn.call(obj,5,6) //a=5,b=6,fn中的this指向obj,result=30

使用场景：

通过Object.prototype.toString.call(数据)来检测类型，比typeof()对数据类型的检测更加精确；

//Object.prototype.toString() 返回结果为[object 数据类型]

console.log(Object.prototype.toString.call('huihui')) //[object String]
console.log(Object.prototype.toString.call([1,2,3])) //[object Array]
console.log(Object.prototype.toString.call(null)) //[object Null]

2.2apply函数

与call函数类似，在调用函数的同时，可以改变被调用函数的this指向；

语法：

fun.apply(指定的this，[传递的参数]) //返回值是函数的返回值，与call的不同点是传递的参数必须在数组里；

如下：

const obj = {
    name:'huihui',
    age:18
}

function fn(a,b) {
    return a * b
}

const result = fn.apply(obj,[5,6]) //a=5,b=6,fn中的this指向obj,result=30

使用场景：

求数组的最大/最小值；

如下：

const max = Math.max.apply(null,[4,6,8]) // max = 8

2.3bind函数

bind函数能改变函数内部this的指向，但不进行函数调用；

语法：

fun.bind(指定this，参数1，参数2，···) //返回的是改造后的新函数（拷贝函数）

如下：

const obj = {
    name:'huihui',
    age:18
}

function fn(a,b) {
    return a * b
}

const fn1 = fn.bind(obj,5,6) //fn1中的this指向obj fn1中的参数a=5,b=6

const result = fn1() //得到result = 30

使用场景：

只想改变this指向而不想调用函数的时候；

3 总结

函数名	是否调用函数	数据参数格式	返回值
call	调用	参数列表	调用函数的返回值
apply	调用	数组	调用函数的返回值
bind	不调用	参数列表	拷贝后的新函数