基本语法

简介

JavaScript语言中,生成实例对象的传统方法是通过构造函数.

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(类)这个概念,作为对象的模板.通过class关键字,可以定义类.
基本上,ES6的class可以看做只是一个语法糖,只是让对象原型的写法更加清晰,更像面向对象编程的语法而已.上面的代码用class改写,如下:

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

constructor方法就是构造方法,而this关键字则代表实例对象.
注意,定义"类"的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去就可以.另外,方法之间不需要逗号隔开,加了反而报错.
ES6的类,完全可以看做构造函数的另一种写法.累的数据类型就是函数,类本身就指向构造函数.
构造函数的prototype属性,在ES6的"类"上面继续存在.事实上,类的所有方法都定义在类的"prototype"属性上面.

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

在类的实例上调用方法,其实就是调用原型上的方法.
Objet.assgin方法可以很方便的一次向类添加多个方法.

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

另外,类的内部所有定义的方法,都是不可枚举的.

var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function() {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

采用ES5的写法,toString方法就是可枚举的.
类的属性名,可以采用表达式.

严格模式

类和模块的内部,默认就是严格模式.只要你的代码写在类或模块之中,就只有严格模式可用.

constructor方法

construtor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会被默认添加.
constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象.

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

类必须使用new调用,而普通构造函数不用new也可以执行.

类的实例对象

与ES5一样,实例的属性除非显示定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)
类的所有实例共享一个原型对象,这就意味着,可以通过实例的__proto__属性为"类"添加方法.
__protp__并不是语言本身的特性,是各大厂商具体实现时添加的私有属性,不建议生产使用该属性,避免对环境产生依赖.生产环境中,可以使用Object.getPrototypeOf方法来获取实例对象的原型,然后再来为原型添加方法/属性.

Class表达式

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

注意:这个类的名字是MyClass而不是Me,Me只在Class的内部代码可用,指代当前类.
如果类的内部没有用到的话,可以省略Me.
采用Class表达式,可以写出立即执行的Class

不存在变量提升

ES6不会把类的声明提升到代码头部,这种规定的愿意与继承有关,必须保证子类在父类之后定义.

私有方法和私有属性

现有方法

ES6不提供私有方法这个常见需求,变通方法:
1.在命名上加以区别
2.将私有方法移除模块,因为模块内部的所有方法都是对外可见的
3.利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值

私有方案的提案

目前有一个提案,为class加了私有属性,方法是在属性名之前,使用#表示.

class Point {
  #x;

  constructor(x = 0) {
    #x = +x; // 写成 this.#x 亦可
  }

  get x() { return #x }
  set x(value) { #x = +value }
}

#x就表示私有属性x,在Point类之外是读取不到这个属性的.而且私有属性与实例的属性是可以同名的.
另外,私有属性也可以设置getter和setter方法.

this的指向

类的内部如果含有this,它默认指向类的实例.

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

如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境.
一个比较简单的解决方法是,在构造方法中绑定this.

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

  // ...
}

另一种解决方法是试用箭头函数

class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

还有一种解决方法就是使用Proxy,获取方法的时候,自动绑定this.

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}

const logger = selfish(new Logger());

name属性

name属性总是返回紧跟在class关键字后面的类名

Class的取值函数(getter)和存执函数(setter)

在"类"的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为.
存值函数和取值函数是设置在属性的Descriptor对象上

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }

  get html() {
    return this.element.innerHTML;
  }

  set html(value) {
    this.element.innerHTML = value;
  }
}

var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html"
);

"get" in descriptor  // true
"set" in descriptor  // true

Class的Generator方法

如果某个方法之前加上星号*,就表示该方法是个Generator函数.

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

Symbol.iterator方法返回一个Foo类的默认遍历器,for...of循环会自动调用这个遍历器.

Class的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就成为"静态方法".
注意:如果静态方法包含this关键字,这个this指的是类,而不是实例.

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

Foo.bar() // hello

静态方法可以与非静态方法重名.
父类的静态方法,可以被子类继承,静态方法也是可以从super对象上调用的.

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

//从super对象上调用
class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

Class的静态属性和实例属性

静态属性指的是Class本身的属性,即Class.propName,而不是定义在实例对象this上的属性.

class Foo {
}

Foo.prop = 1;
Foo.prop // 1
为Foo类定义了一个静态属性prop

目前,只有这种方法可行,因为ES6明确规定,Class内部只有静态方法,没有静态属性.
目前有一个关于静态属性的提案,对实例属性和静态属性都规定了新的写法:
1.类的实例属性
类的实例属性可以用等式,写入类的定义之中

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

以前我们定义实例属性,只能写在类的constructor方法里面.

class ReactCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

为了可读性的目的,对于那些在construtor里面已经定义的实例属性,新鞋发允许直接列出.
2.类的静态属性
只要在上面的实例写法前面加上static关键字就可以了

class MyClass {
  static myStaticProp = 42;

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

new.target属性

new是从构造函数生成实例对象的命令.ES6为new命令引入一个new.target属性,该属性一般用在构造函数之中,返回new命令作用域的那个构造函数.如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的.

function Person(name) {
  if (new.target !== undefined) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

// 另一种写法
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

Class内部调用new.target返回当前Class.需要注意的是,子类继承父类时,new.target会返回子类.

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    // ...
  }
}

class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}

var obj = new Square(3); // 输出 false

利用这个特点,可以写出不能独立使用,必须继承后才能使用的类.

class的继承

基本用法

Class可以通过extends关键字实现继承,ES5是通过修改原型链实现继承的

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象.
子类必须在constructor方法中调用super方法,否则新建实例时会报错.这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工.如果不调用super方法,子类就得不到this对象.
ES5的继承实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this)).ES6的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this.
如果子类没有定义constructor方法,这个方法会被默认添加.

class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

特别注意:在子类的构造函数总,只有调用super之后,才可以使用this关键字,否则会报错.
通过子类生成实例的对象同时是父类和子类的实例.
父类的静态方法也会被子类继承.

Object.getPrototypeOf()

该方法可以用来从子类上获取父类,可以用这个方法判断,一个类是否继承了另一个类.

super关键字

super关键字既可以当做函数使用,也可以当做对象使用.

第一种情况,super作为函数调用时,代表父类的构造函数.ES6要求,子类的构造函数必须执行一次super函数.
注意.super虽然代表了父类的构造函数,但是返回的是子类的实例.即super内部的this指向的是子类,因此super()在这里相当于父类.prototype.constructor.call(this).
作为函数时,super()只能用在子类的构造函数中.

第二种情况,super作为对象时,在普通方法总,指向父类的原型兑现;在静态方法中,指向父类.

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的.
在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例.

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let b = new B();
b.m() // 2

由于this指向子类实例,所以如果通过super对某个属性赋值,这是super就是this,赋值的舒心会变成子类实例的属性.
如果super作为对象用在静态方法中,这时super将指向父类,而不是父类的原型对象.

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例.
注意,使用super的时候,必须显示指定是作为函数,还是作为对象使用,否则会报错.
由于对象总是继承其它对象的,所以可以在任意一个对象中,使用super关键字.

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};

obj.toString(); // MyObject: [object Object]

类的prototype属性和proto属性

大多数浏览器的ES5实现中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性.Class作为构造函数的语法糖,同时有prototype属性和__proto__属性,因此同时存在两条继承链.
1.子类的__proto__属性,表示构造函数的继承,总是指向父类.
2.子类prototype属性的__proto__属性表示方法的继承,总是指向父类的prototype属性.

extends的继承目标

extends关键字后面可以跟多种类型的值.
只要是一个有prototype属性的函数,就能被B继承.由于函数都有prototype属性(除了Function.prototype函数),因此被继承的可以是任意函数.
三种特殊情况:

1. 继承Object类

class A extends Object {
}

A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A其实就是构造函数Object的复制,A的实例就是Object的实例.

2. 不存在任何继承

class A {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A作为一个基类(不存在任何继承),就是一个普通函数,所以直接继承Function.prototype.但是,A调用后返回一个空对象,所以A.prototype.__proto__指向构造函数(Object)的prototype属性.

3. 子类继承null

class A extends null {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === undefined // true

与第二种情况类似.A也是一个普通函数,所以直接继承Funciotn.prototype.但是,A调用后返回的对象不继承任何方法,所以他的__proto__指向Function.prototype,即实质执行了下面代码:

class C extends null {
  constructor() { return Object.create(null); }
}

实例的__proto__属性

子类实例的__proto__属性的__proto__属性,指向父类实例的__proto__属性.子类的原型的原型就是父类的原型.

原生构造函数的继承

ECMAScript的原生构造函数大致有:

• Boolean
• Number
• String
• Array
• Date
• Function
• RegExp
• Error
• Object

以前这些原生构造函数无法继承,之所以不能继承,是因为子类无法获得原生构造函数的内部属性,通过apply()或者分配给原型对象都不行.原生构造函数会忽略apply方法传入的this,即原生构造函数的this无法绑定,导致拿不到内部属性.
ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于子类的内部属性无法获取,导致无法继承原生的构造函数.比如,Array构造函数有一个内部属性[[DefineOenProperty]],用来定义新属性时,更新length属性,这个内部属性无法在子类获取,导致子类的length属性行为不正常.
ES6允许集成原生构造函数定义子类,因为ES6是先新建父类的实例对象this,然后再用子类的构造函数修饰this,使得父类的所有行为都可以继承.这意味着,ES6可以自定义原生数据结构的子类.
extends关键字不仅可以用来继承类,还可以用来继承原生的构造函数.因此可以再原生数据结构的基础上,定义自己的数据结构.
注意,继承Object的子类,有一个行为差异

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

NewObj继承了Object,但是无法通过super方法向父类传参.这是因为ES6改变了Object构造函数的行为,一旦发现Obejct方法不是通过new Object()这种形式调用,ES6规定Object构造函数会忽略参数.

Mixin模式的实现

Mixin指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口.最简单实现为:

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}

更完备的实现,将多个类的接口"混入"(mix in)另一个类

function mix(...mixins) {
  class Mix {}

  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝实例属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== "constructor"
      && key !== "prototype"
      && key !== "name"
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}

上面代码的mix函数,可以将多个对象合成一个类.使用的时候,只要继承这个类即可.

class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}