比较 JavaScript 中的 new、apply、call、bind 方法

2023-09-19 00:55:51

简介

在 JavaScript 中，函数是一种特殊类型的对象，它可以被调用。调用函数时，函数体中的代码就会执行。函数可以接收参数，并返回一个值。

JavaScript 提供了多种方法来调用函数，其中最常见的是使用圆括号。例如，以下代码调用了一个名为 myFunction 的函数：

myFunction();

除了使用圆括号，还可以使用 new、apply、call 和 bind 方法来调用函数。这些方法都有不同的参数传递方式和作用域规则。

new 方法

new 方法用于创建一个新对象，并调用该对象的构造函数。构造函数是用来初始化新对象的一个特殊函数。

const person = new Person('John', 30);

上面的代码创建了一个名为 person 的新对象，并调用了 Person 构造函数。Person 构造函数接收两个参数：name 和 age。name 参数的值为 "John"，age 参数的值为 30。

构造函数在创建新对象时会执行一些初始化操作。例如，Person 构造函数可能会将 name 和 age 参数的值分别赋值给 this.name 和 this.age 属性。

new 方法只能用于调用构造函数。

apply 方法

apply 方法用于调用一个函数，并指定该函数的参数和作用域。

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.apply(Math, numbers);

上面的代码调用了 Math.max 函数，并使用 apply 方法指定了该函数的参数和作用域。apply 方法的第一个参数是函数的作用域，第二个参数是一个数组，其中包含了要传递给函数的参数。

apply 方法可以用于调用任何函数，无论该函数是否是构造函数。

call 方法

call 方法与 apply 方法类似，但它有一个额外的参数：函数的 this 值。

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet.call(person);

上面的代码调用了 person.greet 函数，并使用 call 方法指定了该函数的作用域和 this 值。call 方法的第一个参数是函数的作用域，第二个参数是函数的 this 值，第三个参数是一个数组，其中包含了要传递给函数的参数。

call 方法可以用于调用任何函数，无论该函数是否是构造函数。

bind 方法

bind 方法用于创建一个新的函数，该函数的作用域和 this 值与原函数相同。

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const greet = person.greet.bind(person);

greet();

上面的代码调用了 person.greet 函数，并使用 bind 方法创建了一个新的函数 greet。greet 函数的作用域和 this 值与 person.greet 函数相同。

bind 方法可以用于任何函数，无论该函数是否是构造函数。

比较

下表比较了 new、apply、call 和 bind 方法：

方法	用途	参数	作用域	`this` 值
`new`	创建新对象并调用构造函数	构造函数的参数	新对象	新对象
`apply`	调用函数并指定参数和作用域	函数的参数、函数的作用域	函数的作用域	调用 `apply` 方法时指定的 `this` 值
`call`	调用函数并指定参数和作用域	函数的参数、函数的作用域、函数的 `this` 值	函数的作用域	调用 `call` 方法时指定的 `this` 值
`bind`	创建一个新的函数，该函数的作用域和 `this` 值与原函数相同	函数的参数	新函数的作用域	新函数的 `this` 值