另一个关于呼叫、应用和绑定的博客..!!-js教程-PHP中文网

另一个关于呼叫、应用和绑定的博客..!!

DDD

发布： 2024-11-25 09:17:11

原创

975 人浏览过

Yet another blog on Call, Apply & Bind..!!
布拉布拉布拉..

好的，听我说..!!

数百篇博客和教程解释了调用、绑定和应用。哎呀，甚至 ChatGPT 和 Copilot 都可以为您简化它们！

那为什么还要发一篇文章呢？好吧，这不是给你的，这是我在重新审视 JavaScript 基础知识时的自我笔记。

即使在前端开发了 8 年之后，我有时也会混淆这些方法。事实证明，这种混乱往往源于它们在面试问题中的分组方式。这次让我以一种容易记住的方式为您分解。

我们可以跳到精彩的部分吗？

为什么面试的时候总是调用、绑定、申请？从功能上讲，call 和 apply 更接近，它们立即调用该函数，而 bind 返回一个新函数。这就是为什么我在标题中将它们分组。

让我们看看它们的用法以更好地理解它。

呼叫、绑定和应用之间有什么共同点？

call 、 bind 和 apply 是函数上可用的方法，允许您显式设置 this 的值并传递函数的参数。

调用、绑定和应用之间有什么区别？

当 Call 和 Apply Immediately 调用该函数时，Bind 方法不会立即调用该函数。相反，它返回一个新函数，并将 this 设置为指定值，并且可以稍后调用/执行此返回的函数。

那么Call和Apply有什么区别呢？

虽然 Call 和 Apply 都会立即使用自定义 this 调用函数，但它们如何采用附加参数来区分它们。

Call 接受单个参数，而 Apply 接受一组参数。

示例

让我们看看下面的参数来了解 call、apply 和 bind 的用法。

function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function

登录后复制

一些额外的例子

使用调用:从另一个对象借用方法：

let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar

登录后复制

使用 apply :查找数组中的最大值：

let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5

登录后复制

使用绑定:使用自定义this进行事件处理:

let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user));

登录后复制

另外，我希望这张表能够帮助您更好地理解。

功能	执行	参数	用例
致电	立即执行函数	单独通过	当你在调用时知道参数时
申请	立即执行函数	作为数组传递	当参数位于数组中时
绑定	返回一个新函数（不执行）	可选择预先填写新功能	当您需要可重用或预配置的功能时