Javascript高级指南：重塑new、call、apply、bind

2023-11-15 04:01:13

JavaScript中的new：创造一个新对象
new操作符是Javascript中创建新对象的便捷方法，其作用在于：

调用构造函数，创建一个该构造函数实例的新对象。
将创建的新对象作为this的绑定值。
执行构造函数，并将参数传递给该构造函数。
返回创建的新对象。

举个例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

在这段代码中，Person是构造函数，new Person('John Doe', 30)是new操作符的调用，它会创建一个Person构造函数的新实例，并将name和age作为参数传递给构造函数。然后，它将创建的新对象person作为this关键字的绑定值，并执行构造函数Person(name, age)，最后返回person对象。

JavaScript中的call、apply和bind：灵活调用函数

除了new操作符，call、apply和bind是Javascript中调用函数的另外三种方式，它们可以改变函数的执行上下文，即改变this关键字的指向。

call

call方法允许我们以指定的对象作为this关键字调用函数，其语法为：

function.call(object, arg1, arg2, ...)

其中，function是需要调用的函数，object是作为this关键字的指定对象，arg1、arg2等是传递给函数的参数。

举个例子：

const person = {
  name: 'John Doe',
  age: 30
};

function greet() {
  console.log(`My name is ${this.name} and I am ${this.age} years old.`);
}

greet.call(person); // "My name is John Doe and I am 30 years old."

在这段代码中，我们使用call方法将greet函数的this关键字指向person对象，从而使greet函数能够访问person对象中的name和age属性。

apply

apply方法与call方法类似，其语法为：

function.apply(object, [args])

其中，function是需要调用的函数，object是作为this关键字的指定对象，args是一个包含所有参数的数组。

举个例子：

const person = {
  name: 'John Doe',
  age: 30
};

function greet() {
  console.log(`My name is ${this.name} and I am ${this.age} years old.`);
}

greet.apply(person, ['Jane Doe', 25]); // "My name is Jane Doe and I am 25 years old."

在这段代码中，我们使用apply方法将greet函数的this关键字指向person对象，并将['Jane Doe', 25]作为参数数组传递给greet函数。

bind

bind方法与call和apply方法不同，它不会立即执行函数，而是返回一个新的函数，这个新的函数拥有相同的代码，但其this关键字被绑定到了指定的object上。bind方法的语法为：

function.bind(object)

其中，function是需要绑定的函数，object是作为this关键字的指定对象。

举个例子：

const person = {
  name: 'John Doe',
  age: 30
};

function greet() {
  console.log(`My name is ${this.name} and I am ${this.age} years old.`);
}

const boundGreet = greet.bind(person);

boundGreet(); // "My name is John Doe and I am 30 years old."