JavaScript--call()函数 & apply()函数 & bind()函数

Posted 2021-08-10 Z && Y

1. call()函数 & apply()函数 & bind()函数

call()、apply()、bind() 都是用来重定义 this 这个对象的

1.1 不传参数

首先定义这样一段函数

    function logEgg() {
        alert("egg is : " + this.egg);
    }

    let hen = {
        egg: "鸡蛋"
    }

call()

    logEgg.call(hen);// egg is : 鸡蛋

---

apply()

    logEgg.apply(hen);// egg is : 鸡蛋

---

bind()

    logEgg.bind(hen)();// egg is : 鸡蛋

以上出了 bind 方法后面多了个 () 外 ，结果返回都一致！
由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。

---

1.2 传参数

首先定义这样一段函数

    function logInfo(name, weather) {
        alert(`name: ${name} , homeTown is: ` + this.homeTown + " and weather is: " + weather);
    }

    let chongQing = {
        homeTown: "重庆",
    }

call()

    logInfo.call(chongQing, '花花', '晴天');//name: 花花 , homeTown is: 重庆 and weather is: 晴天

apply()

    logInfo.apply(chongQing, ['草草', '雨天']);// name: 草草 , homeTown is: 重庆 and weather is: 雨天

bind()

    logInfo.bind(chongQing, '叶叶', '阴天')();// name: 叶叶 , homeTown is: 重庆 and weather is: 阴天

从上面四个结果不难看出:

• call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
• call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔
• bind 除了返回是函数以外，它 的参数和 call 一样。
• apply 的所有参数都必须放在一个数组里面传进去。

---

1.3 方法源码

call()

apply()

bind()

bind<A0, A1, A2, A extends any[], R>(this: new (arg0: A0, arg1: A1, arg2: A2, ...args: A) => R, thisArg: any, arg0: A0, arg1: A1, arg2: A2): new (...args: A) => R;

---

---