ES12 中的继承方法 apply() /call() 的应用和误用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，继承是一个非常重要的概念，它可以让我们复用代码并减少重复性的工作。在 ES12 中，我们可以使用 apply() 和 call() 这两个方法来实现继承。

apply() 和 call() 的基本概念

apply() 和 call() 都是 JavaScript 中的方法，它们用于调用函数并设置函数内部 this 的值。这两个方法的区别在于传递参数的方式不同。

apply() 方法接收两个参数：第一个参数是函数内部的 this 值，第二个参数是一个数组，包含了函数的参数列表。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.apply(null, ['John']);

call() 方法也接收两个参数：第一个参数是函数内部的 this 值，后面的参数是函数的参数列表，但是这些参数是逐个传递的。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, 'John');

apply() 和 call() 的应用

1. 继承

在 JavaScript 中，我们可以使用 apply() 和 call() 方法来实现继承。这种方式被称为“借用构造函数”。

// javascriptcn.com 代码示例
function Animal(name, age) {
  this.name = name;
  this.age = age;
}

function Dog(name, age, breed) {
  Animal.call(this, name, age);
  this.breed = breed;
}

const dog = new Dog('Buddy', 5, 'Golden Retriever');
console.log(dog.name); // 'Buddy'
console.log(dog.age); // 5
console.log(dog.breed); // 'Golden Retriever'

上面的例子中，我们定义了一个 Animal 类和一个 Dog 类，Dog 类继承了 Animal 类的属性和方法。在 Dog 类的构造函数中，我们使用 Animal.call(this, name, age) 来调用 Animal 类的构造函数，并设置 this 的值为 Dog 类的实例。

2. 改变函数内部的 this 值

apply() 和 call() 还可以用来改变函数内部的 this 值。

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

const person2 = {
  name: 'Jane',
  age: 25
}

person.greet(); // 'Hello, my name is John and I am 30 years old.'
person.greet.apply(person2); // 'Hello, my name is Jane and I am 25 years old.'

在上面的例子中，我们定义了一个 person 对象和一个 person2 对象。person 对象有一个 greet() 方法，当调用 greet() 方法时，它会输出一段字符串。我们使用 apply() 方法来改变 greet() 方法内部的 this 值，使其指向 person2 对象。

apply() 和 call() 的误用

虽然 apply() 和 call() 方法非常有用，但是它们也容易被误用。下面是一些常见的误用情况。

1. 过度使用 apply() 和 call()

有些开发者可能会过度使用 apply() 和 call() 方法，导致代码难以维护和理解。在使用这些方法时，我们应该时刻记住它们的作用，只在必要的情况下使用。

2. 忘记传递参数

在使用 apply() 和 call() 方法时，我们需要记得传递参数。如果忘记传递参数，代码可能会出现错误。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.apply(); // TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

在上面的例子中，我们忘记传递参数，导致代码抛出了一个 TypeError。

3. 使用箭头函数

由于箭头函数没有自己的 this 值，因此 apply() 和 call() 方法在箭头函数中无法使用。

// javascriptcn.com 代码示例
const person = {
  name: 'John',
  age: 30,
  greet: () => {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

person.greet.apply(person); // 'Hello, my name is undefined and I am undefined years old.'

在上面的例子中，我们定义了一个箭头函数 greet()，当调用 greet() 方法时，它会输出一段字符串。由于箭头函数没有自己的 this 值，apply() 方法无法改变 greet() 方法内部的 this 值。

总结

apply() 和 call() 方法是 JavaScript 中非常有用的方法，它们可以用于继承、改变函数内部的 this 值等。但是，我们在使用这些方法时需要注意它们的作用和传递参数的方式，避免出现代码错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65729b9fd2f5e1655db8766b