24.原型链和类

const proto = {
  protoProp: 'a',
};
const obj = {
  __proto__: proto,
  objProp: 'b',
};
// obj 继承 .protoProp:
assert.equal(obj.protoProp, 'a');
assert.equal('protoProp' in obj, true);

> const obj = { foo: 1 };
> typeof obj.foo // 自身属性
'number'
> typeof obj.toString  // 继承属性
'function'

> Object.keys(obj)
[ 'foo' ]

const proto = {
  protoProp: 'a',
};
const obj = {
  __proto__: proto,
  objProp: 'b',
};

// 最开始，obj 有一个自身属性
assert.deepEqual(Object.keys(obj), ['objProp']);
obj.protoProp = 'x'; // (A)
// 我们创建了一个新的自身属性：
assert.deepEqual(Object.keys(obj), ['objProp', 'protoProp']);
// 继承属性自身没有改变：
assert.equal(proto.protoProp, 'a');
// 自身属性覆盖继承属性：
assert.equal(obj.protoProp, 'x');

• 获取原型的最佳方法是通过以下方法：

  Object.getPrototypeOf(obj: Object) : Object
  

• 设置原型的最佳方法是创建对象——通过对象字面值中的__proto__或通过：

  Object.create(proto: Object) : Object
  

  如果必须，你可以使用 Object.setPrototypeOf() 来更改现有对象的原型。但这可能会对性能产生负面影响。

const proto1 = {};
const proto2 = {};
const obj = Object.create(proto1);
assert.equal(Object.getPrototypeOf(obj), proto1);
Object.setPrototypeOf(obj, proto2);
assert.equal(Object.getPrototypeOf(obj), proto2);

p.isPrototypeOf(o)

const a = {};
const b = {__proto__: a};
const c = {__proto__: b};
assert.equal(a.isPrototypeOf(b), true);
assert.equal(a.isPrototypeOf(c), true);
assert.equal(a.isPrototypeOf(a), false);
assert.equal(c.isPrototypeOf(a), false);

const jane = {
  name: 'Jane',
  describe() {
    return 'Person named ' + this.name;
  },
};
const tarzan = {
  name: 'Tarzan',
  describe() {
    return 'Person named ' + this.name;
  },
};
assert.equal(jane.describe(), 'Person named Jane');
assert.equal(tarzan.describe(), 'Person named Tarzan');

const PersonProto = {
  describe() {
    return 'Person named ' + this.name;
  },
};
const jane = {
  __proto__: PersonProto,
  name: 'Jane',
};
const tarzan = {
  __proto__: PersonProto,
  name: 'Tarzan',
};

assert.equal(jane.describe(), 'Person named Jane');
assert.equal(tarzan.describe(), 'Person named Tarzan');

class Person {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return 'Person named ' + this.name;
  }
}

const jane = new Person('Jane');
assert.equal(jane.name, 'Jane');
assert.equal(jane.describe(), 'Person named Jane');
const tarzan = new Person('Tarzan');
assert.equal(tarzan.name, 'Tarzan');
assert.equal(tarzan.describe(), 'Person named Tarzan');

• 类声明：在前面的章节我们已经见过。
• 类表达式：接下来我们会看到。

// 匿名类表达式
const Person = class { ··· };
// 命名类表达式
const Person = class MyClass { ··· };

> typeof Person
'function'

• .__proto__ 是用于访问对象原型的伪属性。
• .prototype 是一个普通的属性，取决于 new 操作符的使用方式，它只是特殊的。这个命名并不理想：Person.prototype 没有指向 Person 的原型，它指向 Person 的所有实例的原型。

> Person.prototype.constructor === Person
true

const jane = new Person('Jane');
const cheeta = new jane.constructor('Cheeta');
// cheeta 也是 Person 的一个实例
// (instanceof 操作符稍后解释)
assert.equal(cheeta instanceof Person, true);

const tarzan = new Person('Tarzan');
assert.equal(tarzan.constructor.name, 'Person');

class Foo {
  constructor(prop) {
    this.prop = prop;
  }
  protoMethod() {
    return 'protoMethod';
  }
  get protoGetter() {
    return 'protoGetter';
  }
}

• 在创建 Foo 的新实例后调用 .constructor() 来设置该实例。
• .protoMethod() 是一种常规方法。它存储在Foo.prototype中。
• .protoGetter 是存储在 Foo.prototype 中的 getter （获取方法）。

> const foo = new Foo(123);
> foo.prop
123
> foo.protoMethod()
'protoMethod'
> foo.protoGetter
'protoGetter'

class Bar {
  static staticMethod() {
    return 'staticMethod';
  }
  static get staticGetter() {
    return 'staticGetter';
  }
}

> Bar.staticMethod()
'staticMethod'
> Bar.staticGetter
'staticGetter'

> new Person('Jane') instanceof Person
true
> ({}) instanceof Person
false
> ({}) instanceof Object
true
> [] instanceof Array
true

• 类是对象创建和继承的通用标准，现在跨框架（React，Angular，Ember 等）广泛支持。这是对以前事物的改进，几乎每个框架都有自己的继承库。
• 他们帮助 IDE 和类型检查器等工具完成工作并启用新功能。
• 如果你是从其他语言来转向JavaScript，并熟悉类，那么你可更快地开始学习。
• JavaScript 引擎会进行优化。也就是说，使用类的代码几乎比使用比使用自定义继承库的代码更快。
• 你可以子类化内置构造函数，例如 Error。

• 存在过度继承的风险。
• 存在在类中放置太多函数细节的风险（当其中某些细节还是放在函数中时更好一些）。
• 他们在表面上和内部的运行过程是完全不同的。 换句话说，语法和语义之间存在脱节。 两个例子是：
  • 一个定义在类 C 中的内部方法，在对象 C.prototype 中创建了一个方法。
  • 类即函数。

class Countdown {
  constructor(counter, action) {
    this._counter = counter;
    this._action = action;
  }
  dec() {
    this._counter--;
    if (this._counter === 0) {
      this._action();
    }
  }
}
// 这两个属性并非真正私有：
assert.deepEqual(
  Object.keys(new Countdown()),
  ['_counter', '_action']);

const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}
// 这两个伪属性是真正私有的：
assert.deepEqual(
  Object.keys(new Countdown()),
  []);

class Person {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return `Person named ${this.name}`;
  }
  static logNames(persons) {
    for (const person of persons) {
      console.log(person.name);
    }
  }
}
class Employee extends Person {
  constructor(name, title) {
    super(name);
    this.title = title;
  }
  describe() {
    return super.describe() +
      ` (${this.title})`;
  }
}
const jane = new Employee('Jane', 'CTO');
assert.equal(
  jane.describe(),
  'Person named Jane (CTO)');

• 在 .constructor() 方法中，必须先通过 super() 调用父类构造函数，然后才能访问 this。那是因为在调用父类构造函数之前 this 不存在（这种现象特定于类）。
• 静态方法也是继承的。例如，Employee 继承静态方法 .logNames()：

  > 'logNames' in Employee
  true
  

• 实例原型链，在右侧。
• 类原型链，在左边。

> Object.getPrototypeOf(Person.prototype) === Object.prototype
true

> Object.getPrototypeOf(Person) === Function.prototype
true

x instanceof C

x instanceof C
C.prototype.isPrototypeOf(x)

> jane instanceof Employee
true
> jane instanceof Person
true
> jane instanceof Object
true

const p = Object.getPrototypeOf.bind(Object);

> p({}) === Object.prototype
true
> p(p({})) === null
true

> p([]) === Array.prototype
true
> p(p([])) === Object.prototype
true
> p(p(p([]))) === null
true

> p(function () {}) === Function.prototype
true
> p(p(function () {})) === Object.prototype
true

> ({}) instanceof Object
true
> (() => {}) instanceof Object
true
> /abc/ug instanceof Object
true

> ({ __proto__: null }) instanceof Object
false

> Object.prototype instanceof Object
false

class Object {
  get __proto__() {
    return Object.getPrototypeOf(this);
  }
  set __proto__(other) {
    Object.setPrototypeOf(this, other);
  }
  // ···
}

> '__proto__' in {}
true
> '__proto__' in { __proto__: null }
false

class Person {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return 'Person named ' + this.name;
  }
}
const jane = new Person('Jane');

• 调度：在 jane 的原型链中，找到其键为'describe'的第一个属性并检索其值。

  const func = jane.describe;
  

• 调用：调用找到的值，同时将this设置为jane。

  func.call(jane);
  

Person.prototype.describe.call(jane)

> const obj = { foo: 123 };
> obj.hasOwnProperty('foo')
true
> obj.hasOwnProperty('bar')
false

> const obj = { hasOwnProperty: true };
> obj.hasOwnProperty('bar')
TypeError: obj.hasOwnProperty is not a function

> Object.prototype.hasOwnProperty.call(obj, 'bar')
false
> Object.prototype.hasOwnProperty.call(obj, 'hasOwnProperty')
true

> ({}).hasOwnProperty.call(obj, 'bar')
false
> ({}).hasOwnProperty.call(obj, 'hasOwnProperty')
true

const S1 = (Sup) => class extends Sup { /*···*/ };
const S2 = (Sup) => class extends Sup { /*···*/ };

class C extends S2(S1(Object)) {
  /*···*/
}

const Branded = (Sup) => class extends Sup {
  setBrand(brand) {
    this._brand = brand;
    return this;
  }
  getBrand() {
    return this._brand;
  }
};

class Car extends Branded(Object) {
  constructor(model) {
    super();
    this._model = model;
  }
  toString() {
    return `${this.getBrand()} ${this._model}`;
  }
}

const modelT = new Car('Model T').setBrand('Ford');
assert.equal(modelT.toString(), 'Ford Model T');

• 同一个类可以继承单个父类和零个或多个 mixin。
• 多个类可以使用相同的mixin。