[译] 继承 JavaScript 类中的静态属性

• 原文地址：Static Properties in JavaScript Classes with Inheritance
• 原文做者：Valeri Karpov
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Augustwuli
• 校对者：RicardoCao-Biker, Mcskiller

自 ES6 发布以来，JavaScript 对类和静态函数的支持相似其余面向对象语言中的静态函数。不幸的是，JavaScript 缺少对静态属性的支持，并且谷歌上的推荐方案没有考虑到继承问题。在实现一个 Mongoose 特性的时候，我陷入了一个须要更健壮的静态属性概念的困难。尤为是我须要经过设置 prototype 或者 extends 来支持继承静态属性。在本文，我将介绍在 ES6 中实现静态属性的模式。

静态方法和继承

假设你有一个带有静态方法的简单的符合 ES6 语法的类。

class Base {
  static foo() {
    return 42;
  }
}
复制代码

你可使用 extends 建立一个子类而且可以继续使用 foo() 函数。

class Sub extends Base {}

Sub.foo(); // 42
复制代码

你可使用静态的 getter 和 setter 在 Base 类中设置一个静态的属性。

let foo = 42;

class Base {
  static get foo() { return foo; }
  static set foo(v) { foo = v; }
}
复制代码

不幸的是，在继承 Base 的时候，这个模式就行不通了。若是你设置子类 foo 的值，它将会覆盖 Base 和全部其余的子类的 foo。

class Sub extends Base {}

console.log(Base.foo, Sub.foo);

Sub.foo = 43;

// 打印 "43, 43"。在上面会覆盖 “Base.foo” 和 “Sub.foo” 的值
console.log(Base.foo, Sub.foo);
复制代码

若是属性是一个数组或者是对象这个问题会变得更糟。由于典型的继承，若是 foo 是一个数组，每个子类都会有一个数组副本的引用，以下所示。

class Base {
  static get foo() { return this._foo; }
  static set foo(v) { this._foo = v; }
}

Base.foo = [];

class Sub extends Base {}

console.log(Base.foo, Sub.foo);

Sub.foo.push('foo');

// 如今这两个数组都包含 “foo”，由于它们都是同一个数组！
console.log(Base.foo, Sub.foo);
console.log(Base.foo === Sub.foo); // true
复制代码

因此 JavaScript 支持静态的 getter 和 setter，可是在数组和对象的状况下使用它们将会是搬起石头砸本身脚。事实证实，你能够在 JavaScript 内置的 hasOwnProperty() 函数的帮助实现它。

继承静态属性

关键思想是 JavaScript 类只是另外一个对象，因此你能够区分 自己的属性 和继承的属性。

class Base {
  static get foo() {
    // 若是 “_foo” 被继承了，或者不存在的时候将它当作 “undefined”
    return this.hasOwnProperty('_foo') ? this._foo : void 0;
  }
  static set foo(v) { this._foo = v; }
}

Base.foo = [];

class Sub extends Base {}

// 打印 "[] undefined"
console.log(Base.foo, Sub.foo);
console.log(Base.foo === Sub.foo); // false

Base.foo.push('foo');

// 打印 "['foo'] undefined"
console.log(Base.foo, Sub.foo);
console.log(Base.foo === Sub.foo); // false
复制代码

这个模式在类中的实现是很简洁，它也能够被用于 ES6 以前的 JavaScript 标准的继承。这一点很重要，由于 Mongoose 仍然使用 ES6 风格以前的继承。过后看来，咱们本应该尽早使用这个方法，这个特性是咱们第一次看到使用 ES6 类和继承比只设置函数的 prototype 有明显优点。

function Base() {}

Object.defineProperty(Base, 'foo', {
  get: function() { return this.hasOwnProperty('_foo') ? this._foo : void 0; },
  set: function(v) { this._foo = v; }
});

Base.foo = [];

// ES6 以前版本的继承
function Sub1() {}
Sub1.prototype = Object.create(Base.prototype);
// Static properties were annoying pre-ES6
Object.defineProperty(Sub1, 'foo', Object.getOwnPropertyDescriptor(Base, 'foo'));

// ES6 的继承
class Sub2 extends Base {}

// 打印 "[] undefined"
console.log(Base.foo, Sub1.foo);
// 打印 "[] undefined"
console.log(Base.foo, Sub2.foo);

Base.foo.push('foo');

// 打印 "['foo'] undefined"
console.log(Base.foo, Sub1.foo);
// 打印 "['foo'] undefined"
console.log(Base.foo, Sub2.foo);
复制代码

继续前进

ES6 类相对于老的 Sub.prototype = Object.create(Base.prototype) 有一个主要的优点，由于它 extends 了静态属性和函数的副本。使用 Object.hasOwnProperty() 作一些额外的工做，就能够建立正确处理继承的静态 getter 和 setter。在 JavaScript 中使用静态属性要很是地当心：extends 在底层仍然使用典型的继承。这意味着，除非你使用本篇文章提到的 hasOwnProperty() 模式，不然静态的对象和数组在全部的子类中被共享。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。