ECMAScript 2016 (ES7) 新特性之修复 constructor 问题-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的面向对象编程中，constructor 是一个非常重要的属性，它指向一个函数，这个函数被用来创建当前对象的实例。然而，在一些情况下，constructor 属性被意外地修改或重写，从而导致一些问题。ECMAScript 2016 (ES7) 引入了修复 constructor 问题的新特性，本文将详细介绍该特性的学习和指导意义。

constructor 问题的来源

constructor 问题一般指在原型继承中的问题，例如：

// javascriptcn.com code example
function Animal() {}
Animal.prototype.walk = function() {
  console.log('Animal is walking');
}

function Cat() {}
Cat.prototype = Object.create(Animal.prototype);

var cat = new Cat();
console.log(cat.constructor); // 输出 Animal()

上面的例子中，我们创建了一个 Animal 构造函数和一个 Cat 构造函数。我们将 Cat 的原型设置为 Animal 的实例，从而实现了 Cat 对象从 Animal 对象继承 walk 方法的功能。然而，当我们打印出 cat.constructor 的时候，我们发现它并不是 Cat 构造函数，而是 Animal 构造函数，这是由于 Cat 的原型被重写的缘故。

这种问题会导致一些意外的行为，例如：

var anotherCat = new cat.constructor();
console.log(anotherCat instanceof Cat) // false

我们原本希望 anotherCat 也是一个 Cat 对象，但是由于它的 constructor 被修改了，变成了 Animal 构造函数，因此 instanceof 操作符的结果也是错误的。

ES7 新特性

为了解决 constructor 问题，ECMAScript 2016 (ES7) 引入了一个新特性：可选的 Class 元素。

在 ES6 中，我们使用 class 关键字创建类，例如：

// javascriptcn.com code example
class Animal {
  constructor() {}
  walk() {
    console.log('Animal is walking');
  }
}

class Cat extends Animal {
  constructor() {
    super();
  }
}

在 ES7 中，我们可以在 class 中添加一个可选的元素 constructor，例如：

// javascriptcn.com code example
class Animal {
  constructor() {}
  walk() {
    console.log('Animal is walking');
  }
}

class Cat extends Animal {
  constructor(...args) {
    super(...args);
    this.name = 'cat';
  }
  static get [Symbol.species]() {
    return this;
  }
  get [Symbol.toStringTag]() {
    return 'Cat';
  }
}

上面的例子中，我们从 Animal 继承了 walk 方法，并且在 Cat 的 constructor 中添加了一些自己的逻辑。此外，我们还添加了两个新元素：Symbol.species 和 Symbol.toStringTag。

Symbol.species 元素用于指定从当前类创建的新实例的构造函数，默认值为当前类本身。这样就可以避免通过修改 constructor 属性导致的问题。

Symbol.toStringTag 元素用于返回一个字符串，表示当前对象的类型。在下文会有演示。

使用示例

现在我们来看一下如何使用 ES7 中的新特性来修复 constructor 问题。

首先我们定义一个 Animal 类：

// javascriptcn.com code example
class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }
  walk() {
    console.log(`${this.name} is walking`);
  }
}

然后我们定义一个 Cat 类，这个类继承自 Animal 类：

// javascriptcn.com code example
class Cat extends Animal {
  constructor(name) {
    super(name, 'cat');
  }
  static get [Symbol.species]() {
    return this;
  }
  get [Symbol.toStringTag]() {
    return 'Cat';
  }
}

现在我们创建一个 Cat 对象：

let cat = new Cat('Kitty');

我们可以打印一下该对象的 constructor 属性：

console.log(cat.constructor); // 输出 Cat()

我们将 Cat 构造函数设置为返回自身，从而解决了 constructor 问题。此外，我们还重写了 Symbol.toStringTag 元素，返回一个字符串 'Cat'，这样我们可以方便地知道该对象的类型：

console.log(cat.toString()); // 输出 "[object Cat]"

通过这个例子，我们可以看到 ES7 中的新特性确实能够有效地解决 constructor 问题，而且代码更加清晰易读。

结论

constructor 问题是 JavaScript 面向对象编程中常见的问题之一，它会导致一些意外的行为。ES7 中的新特性修复了这个问题，使得代码更加清晰易读，同时也提供了更多的扩展性。在实际项目中，我们可以使用这个新特性来提高代码的可维护性和可扩展性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672f1a17eedcc8a97c8c948d