JavaScript——call、apply、bind区别（个人学习）

最新推荐文章于 2023-03-28 04:33:02 发布

阿彤の小铃铛

最新推荐文章于 2023-03-28 04:33:02 发布

阅读量227

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109801623

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

call、apply、bind主要作用都是改变this指向的，但使用上略有区别，下面解说下三者的区别

call、apply、bind

前言
一、call、apply、bind区别
总结

前言

call、apply、bind主要作用都是改变this指向的，但使用上略有区别。通过方法的调用改变this指向

一、call、apply、bind区别

- call和apply的主要区别是在传递参数上不同
-call后面传递的参数是以逗号的形式分开的
- apply是以数组的形式去传参
- bind 是一个一个参数去传，改变this指向后还得去调用一下，返回来得是一个函数

1.call

-call后面传递的参数是以逗号的形式分开的
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<script>
    let obj = {
        name: "张飞",
        say() {
            alert(this.name)
        }
    }
    // let obj = {
    //     name: "张飞",
    //     say(name) {
    //         alert(name)
    //     }
    // }

    let obj2 = {
        name: "关羽"
    }
    // obj2没有say
    // 先触发obj的say方法  在后面添加.call   改变其this指向，让obj2去调用
    obj.say.call(obj2)
    console.log(obj)
</script>

</html>

2.apply

- apply是以数组的形式去传参
apply传递的参数是数组形式 [Apply是以A开头的,所以应该是跟Array(数组)形式的参数

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
     let obj = {
         name: "张飞",
         say(name) {
             alert(name)
         }
     }
    let obj2 = {
        name: "关羽"
    }
    // obj2没有say
    // 先触发obj的say方法  在后面添加.apply ,第一个参数是指向谁，第二个参数就是所传得参数
    obj.say.apply(obj2, ['刘备'])
</script>
</html>

3.bind

- bind 是一个一个参数去传，改变this指向后还得去调用一下，返回来得是一个函数
如果要执行，则后面要再加一个小括号例如：bind(obj,参数1,参数2,)(),bind只能以逗号分隔形式，不能是数组形式

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<script>
     let obj = {
         name: "张飞",
         say(name) {
             alert(name)
         }
     }

    let obj2 = {
        name: "关羽"
    }
    // obj2没有say
    // 先触发obj的say方法  在后面添加.bind ,第一个参数是指向谁，后面跟的是 函数得自执行
    obj.say.bind(obj2)("赵云")
</script>

</html>

总结

call、apply、bind主要作用都是改变this指向的，通过方法的调用改变this指向，但使用上略有区别
-call后面传递的参数是以逗号的形式分开的
- apply是以数组的形式去传参， Apply是以A开头的,所以应该是跟Array(数组)形式的参数
- bind 是一个一个参数去传，改变this指向后还得去调用一下，返回来得是一个函数，如果要执行，则后面要再加一个小括号例如：bind(obj,参数1,参数2,)(),bind只能以逗号分隔形式，不能是数组形式

obj.say.bind(obj2)(“赵云”) 在后面添加.bind ,第一个参数是指向谁，后面跟的是函数得自执行