call、apply和bind

2024-05-25 22:36

文章标签 bind call apply

本文主要是介绍call、apply和bind，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

call、apply和bind都是JavaScript中函数对象的方法，用于改变函数的this值。

call：call方法接收一个对象和一系列参数，并立即调用函数，将this值设置为提供的对象。例如：

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}
let person = {name: 'Alice'};
greet.call(person, 'Hello', '!'); // 输出 "Hello, Alice!"

这段代码中定义了一个函数greet，并创建了一个对象person。然后，使用call方法调用greet函数，并将this值设置为person对象。

让我们逐行解释这段代码：

function greet(greeting, punctuation) {...}：这是一个函数定义，greet函数接收两个参数：greeting和punctuation。
console.log(greeting + ', ' + this.name + punctuation);：这是greet函数的主体，它将greeting、, 、this.name和punctuation连接成一个字符串，并打印到控制台。这里的this是函数运行时的上下文，它的值取决于函数是如何被调用的。
let person = { name: 'Alice' };：这行代码创建了一个对象person，并给它一个属性name，值为Alice。
greet.call(person, 'Hello', '!');：这行代码使用call方法调用greet函数，并将this值设置为person对象。call方法的第一个参数是this的值，后面的参数是传递给greet函数的参数。所以，在这个函数调用中，this.name的值是Alice，greeting的值是Hello，punctuation的值是!。

因此，这段代码的输出是Hello, Alice!。

apply：apply方法和call方法类似，但是它接收一个对象和一个数组（或类数组对象），而不是一系列参数。例如：

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}
let person = {name: 'Alice'};
greet.apply(person, ['Hello', '!']); // 输出 "Hello, Alice!"

bind：bind方法接收一个对象和一系列参数，并返回一个新的函数，这个新的函数的this值被绑定到提供的对象。这个新的函数可以在以后任何时候调用，而不是立即调用。例如：

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}
let person = {name: 'Alice'};
let greetAlice = greet.bind(person, 'Hello', '!');
greetAlice(); // 输出 "Hello, Alice!"