js中 call apply bind的区别

2024-08-07  本文已影响0人  幻影道哥

最近在回顾以前的知识,整理下这三位this指向的使用。
在 JavaScript 中,call()apply()bind() 是函数原型上的方法,它们可以用来改变函数的 this 指向。

  1. call() 方法用于调用一个函数,并将第一个参数作为 this 的值,后续参数作为函数的参数。
  2. apply() 方法与 call() 类似,但第二个参数是一个数组,该数组包含要传递给函数的参数。
  3. bind() 方法创建一个新的函数,并将第一个参数作为 this 的值,后续参数作为新函数的参数。

下面是一个使用这些方法的示例代码片段:

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'John Doe' }; // 假设这是一个对象

// 使用 call() 方法调用函数,并设置 this 为 person 对象
greet.call(person, 'Hello', '!'); // 输出 'Hello, John Doe!'

// 使用 apply() 方法调用函数,并设置 this 为 person 对象
greet.apply(person, ['Hi', '.']); // 输出 'Hi, John Doe.'

// 使用 bind() 方法创建一个新的函数,并设置 this 为 person 对象
const boundGreet = greet.bind(person, 'Hey', '?');
boundGreet(); // 输出 'Hey, John Doe?'

在这个示例中,我们定义了一个名为 greet 的函数,它接受两个参数:greetingpunctuation。然后,我们定义了一个名为 person 的对象,其中包含一个 name 属性。

我们使用 call() 方法调用 greet 函数,并将 person 对象作为 this 的值,同时传递 'Hello''!' 作为参数。这会输出 'Hello, John Doe!'

我们还使用 apply() 方法调用 greet 函数,并将 person 对象作为 this 的值,同时传递一个包含 'Hi''.' 的数组作为参数。这会输出 'Hi, John Doe.'

最后,我们使用 bind() 方法创建一个新的函数 boundGreet,并将 person 对象作为 this 的值,同时传递 'Hey''?' 作为参数。然后,我们调用 boundGreet 函数,它会输出 'Hey, John Doe?'

上一篇 下一篇

猜你喜欢

热点阅读