ES6之Class

Class

简介

类的由来

// ES5写法function Point(x, y) {  this.x = x;  this.y = y;}Point.prototype.toString = function () {  return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);// ES6写法class Point {  constructor(x, y) {    this.x = x;    this.y = y;  }  toString() {    return '(' + this.x + ', ' + this.y + ')';  }}

class Point {  // ...}typeof Point // "function"Point === Point.prototype.constructor // trueclass B {}let b = new B();b.constructor === B.prototype.constructor // true

class Point {  constructor(){    // ...  }}Object.assign(Point.prototype, {  toString(){},  toValue(){}});Point.prototype.constructor === Point // true

var Point = function (x, y) {  // ...};Point.prototype.toString = function() {  // ...};Object.keys(Point.prototype)// ["toString"]Object.getOwnPropertyNames(Point.prototype)// ["constructor","toString"]

class Foo {  constructor() {    return Object.create(null);  }}new Foo() instanceof Foo    // false

//定义类class Point {  constructor(x, y) {    this.x = x;    this.y = y;  }  toString() {    return '(' + this.x + ', ' + this.y + ')';  }}var point = new Point(2, 3);point.toString() // (2, 3)point.hasOwnProperty('x') // truepoint.hasOwnProperty('y') // truepoint.hasOwnProperty('toString') // falsepoint.__proto__.hasOwnProperty('toString') // true

var p1 = new Point(2,3);var p2 = new Point(3,2);p1.__proto__ === p2.__proto__   //true

__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

let methodName = 'getArea';class Square {  constructor(length) {    // ...  }  [methodName]() {    // ...  }}

const MyClass = class Me {  getClassName() {    return Me.name;  }};let inst = new MyClass();inst.getClassName() // MeMe.name // ReferenceError: Me is not definedlet person = new class {  constructor(name) {    this.name = name;  }  sayName() {    console.log(this.name);  }}('张三');person.sayName(); // "张三"

class Foo {  constructor(...args) {    this.args = args;  }  * [Symbol.iterator]() {    for (let arg of this.args) {      yield arg;    }  }}for (let x of new Foo('hello', 'world')) {  console.log(x);}// hello// world

class Logger {  printName(name = 'there') {    this.print(`Hello ${name}`);  }  print(text) {    console.log(text);  }}const logger = new Logger();const { printName } = logger;printName(); // TypeError: Cannot read property 'print' of undefined

class Logger {  constructor() {    this.printName = this.printName.bind(this);  }  // ...}

class Obj {  constructor() {    this.getThis = () => this;  }}const myObj = new Obj();myObj.getThis() === myObj // true

实例属性及新写法

class IncreasingCounter {  _count = 0;  //等效于  constructor() {    this._count = 0;  }  get value() {    console.log('Getting the current value!');    return this._count;  }  increment() {    this._count++;  }}

静态方法和静态属性

class Foo {  static bar() {    this.baz();  }  static baz() {    console.log('hello');  }  baz() {    console.log('world');  }}Foo.bar() // hello

class Foo {}Foo.prop = 1;Foo.prop // 1

class MyClass {  static myStaticProp = 42;  constructor() {    console.log(MyClass.myStaticProp); // 42  }}

私有方法和私有属性

现有的解决方案

class Widget {  foo (baz) {    bar.call(this, baz);  }  // ...}function bar(baz) {  return this.snaf = baz;}

const bar = Symbol('bar');const snaf = Symbol('snaf');export default class myClass{  // 公有方法  foo(baz) {    this[bar](baz);  }  // 私有方法  [bar](baz) {    return this[snaf] = baz;  }  // ...};

私有属性的提案

class Point {  #x;  constructor(x = 0) {    this.#x = +x;  }  get x() {    return this.#x;  }  set x(value) {    this.#x = +value;  }  #sum(a, b) {    return a + b;  }}const counter = new Point();counter.#x // 报错counter.#x = 42 // 报错

class Counter {  #xValue = 0;  #privateValue = 42;  get #x() { return #xValue; }  set #x(value) {    this.#xValue = value;  }  static getPrivateValue(foo) {    return foo.#privateValue;  }}Foo.getPrivateValue(new Foo()); // 42

new.target 属性

继承

class Point { /* ... */ }class ColorPoint extends Point {  constructor() {  }}let cp = new ColorPoint(); // ReferenceError

class ColorPoint extends Point {}// 等同于class ColorPoint extends Point {  constructor(...args) {    super(...args);  }}let cp = new ColorPoint(25, 8, 'green');cp instanceof ColorPoint // truecp instanceof Point // true

Object.getPrototypeOf(ColorPoint) === Point // true

function Super() {}function Sub() {}Sub.prototype = new Super();Sub.prototype.constructor = Sub;var sub = new Sub();Sub.prototype.constructor === Sub; // ② truesub.constructor === Sub; // ④ truesub.__proto__ === Sub.prototype; // ⑤ trueSub.prototype.__proto__ == Super.prototype; // ⑦ true

class Super {}class Sub extends Super {}var sub = new Sub();Sub.prototype.constructor === Sub; // ② truesub.constructor === Sub; // ④ truesub.__proto__ === Sub.prototype; // ⑤ trueSub.__proto__ === Super; // ⑥ trueSub.prototype.__proto__ === Super.prototype; // ⑦ true

super 关键字

class A {  constructor() {    console.log(new.target.name);  }}class B extends A {  constructor() {    super();  }}new A() // Anew B() // B

class A {  constructor() {    this.p = 2;  }}class B extends A {  get m() {    return super.p;  }}let b = new B();b.m // undefinedb.p // 2

class A {}A.prototype.p = 2;

class A {  constructor() {    this.x = 1;  }}class B extends A {  constructor() {    super();    this.x = 2;    super.x = 3;    console.log(super.x); // undefined    console.log(this.x); // 3  }}let b = new B();

class A {  constructor() {    this.x = 1;  }  static print() {    console.log(this.x);  }}class B extends A {  constructor() {    super();    this.x = 2;  }  static m() {    super.print();  }}B.x = 3;B.m() // 3

var obj = {  toString() {    return "MyObject: " + super.toString();  }};obj.toString(); // MyObject: [object Object]

类的 prototype 属性和proto属性

class A {}class B extends A {}B.__proto__ === A // trueB.prototype.__proto__ === A.prototype // true

class A extends Object {}A.__proto__ === Object // trueA.prototype.__proto__ === Object.prototype // true

class A {}A.__proto__ === Function.prototype // trueA.prototype.__proto__ === Object.prototype // true

实例的__proto__ 属性

var p1 = new Point(2, 3);var p2 = new ColorPoint(2, 3, 'red');p2.__proto__ === p1.__proto__ // falsep2.__proto__.__proto__ === p1.__proto__ // true

原生构造函数的继承

• Boolean()

• Number()

• String()

• Array()

• Date()

• Function()

• RegExp()

• Error()

• Object()

class ExtendableError extends Error {  constructor(message) {    super();    this.message = message;    this.stack = (new Error()).stack;    this.name = this.constructor.name;  }}class MyError extends ExtendableError {  constructor(m) {    super(m);  }}var myerror = new MyError('ll');myerror.message // "ll"myerror instanceof Error // truemyerror.name // "MyError"myerror.stack

class NewObj extends Object{  constructor(){    super(...arguments);  }}var o = new NewObj({attr: true});o.attr === true  // false

Mixin 模式的实现