Class的基本语法

Class的基本语法

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 可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class 写法只是让对象原型写法更加清晰、更像面向对象编程的语法而已，如果改写上面的代码是这样的。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

上面代码定义了一个“类” 可以看到里面有一个constructor方法 ， 这就是构造方法，而this关键字则代表实例对象，也就是说，ES5的构造函数Point 对应ES6的point 类的构造方法。

Point 类除了构造方法，还定义了一个toString方法，注意 ， 定义“类” 的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去就可以了，另外， 方法之间不需要逗号分割，加了会报错。

事实上ES6的类 就是一种构造函数的写法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面的代码证明，类的数据类型是函数， 类本身就指向构造函数 。

使用的时候，也是直接对类使用new 命令， 更构造函数的用法完全一致。

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

var b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性， 在ES6“类”上面继续存在，事实上，类的所有方法都定义在类的prototype属性上面 。

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

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

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

在类的实例上面调用方法，其实就是调用原型上面的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

上面的代码中 ， b是B类的实例， 它的constructor方法就是B类原型的constructor方法。

由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype上面， object.assign方法可以很方便的一个向类添加多个方法。

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

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

prototype 对象的constructor属性， 直接指向‘类’ 本身，这与ES5的行为是一致的。

Point.prototype.constructor === Point // true

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

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

  toString() {
    // ...
  }
}
// 此方法返回一个由一个给定对象的自身可枚举属性组成数组，数组中的属性名
// 的排序顺序和正常循环遍历该对象是的返回顺序是一样的。
Object.keys(Point.prototype)
// []
// 此方法返回一个由指定对象的所有的自身属性的属性名
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

上面的代码中， toStirng 方法是Point 类内部定义的方法， 它是不可枚举的，这一点与ES5不一致

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

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

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

constructor 方法

constructor 方法是类的默认方法， 通过new命令生成对象实例时，自动调用该方法，一个类必须有constructor方法，即使你在创建的对象的时候，没有写constructor 方法或者没有显示定义， 系统也会默认的给你添加一个。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

上面的代码中， 定义了一个空的类Point ，JavaScript 引擎会自动为它添加一个空的constrictor方法

constructor方法默认返回个实例对象this ， 完全可以指定返回另一个 对象。

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

new Foo() instanceof Foo
// false

上面代码中， constructor函数返回了一个全新的对象， 结果导致实例对象不是Foo类的实例。

类必须使用new调用，否则会报错 ，这是它跟普通函数的一个主要区别， 后者不用new 也可以执行。

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

Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'

类的实例

生成类的实例的写法， 与ES5完全一样，也是使用new命令，前面说过，如果忘记加上new ，像函数那样调用clas将会报错 。

class Point {
  // ...
}

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

与ES5一样， 实例的属性触发显示定义其本身，否者都是定义在原型上

//定义类
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') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

上面代码中，x和y都是实例对象的point 自身的属性，（因为定义在this遍历上）所以hasOwnProperty方法返回true，而toString 是原型对象的属性。

与ES5 一样类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__
//true

上面代码中，p1 和 p2 都是point 的实例， 它们的原型都是Point.propertype,所以_proto_属性是相等的。

proto 并不是语言本身的特性，这是各大厂商实现时添加的私有属性， 虽然目前很多现代浏览器的

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"

只要给原型设置了一个方法 ， 那么所有的实例都可用

取值函数（getter）和 存值函数（setter）

与es5一样，在“类” 的内部可以使用get 和 set 关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

get set 方法 可以智能的监听到你是在赋值还是要获取值。

属性表达式

类的属性名，可以采用表达式

let methodName = 'getArea';

class Square {
  constructor(length) {
    // ...
  }

  [methodName]() {
    // ...
  }
}

Class表达式

与函数一样，类也可以使用表达式的形式定义。

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

上面代码使用表达式定义了一个类，需要注意的是，这个类的名字是Me，但是Me只在Class的内部使用，指代当前类。在Class外部，这个类只能用MyClass 引用。

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

上面代码表示，Me只在Class内部有意义

如果类的内部没有用到的话， 可以省略Me 也可以写成下面的形式

const MyClass = class { /* ... */ };

采用Class表达式，可以写出立即执行的Class。

注意点

（1） 严格模式

类和模块的内部，默认就是严格模式，所有不使用use strict指定运行模式，只要你的代码写在类或模块的内部之中。就只用严格模式可用，考虑到未来所有的代码，其实都是运行在模块之中，所以ES6实际上把整个语言升级到了严格模式。

（2）不存在提升

类不存在变量提升（引擎通过词法分析将我们写的js代码装成可以执行的代码，接下来才是执行）。

console.log(a);
var a = 123;

所谓的变量提升就是将变量声明提前到前面声明， 而在下面的时候才会赋值。

new Foo(); // ReferenceError
class Foo {}

上面的代码中，Foo类使用在前，定义在后，这样会报错 ，因为ES6不会把类的声明提升到代码头部，这种规定的和继承有关，必须保证子类在父类之后定义。

（3） name属性

由于本质上，ES6的类只是ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

class Point{}
Point.name

(4) 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

上面代码中，foo类Symbol.iterator方法前有一个星号，表示该方法是一个Generator函数，Symbol.iterator方法返回一个Foo类的默认遍历器，for…of循环会自动调用这个遍历器。

（5）this的指向

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承，如果在一个方法前，加上static 关键字，就表示该方法不会被实例继承而是直接通过类来调用，这就称为“静态方法”。

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

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

上面代码中，Foo类的classMethod方法前面有static关键字，表名该方法是一个静态方法，可以直接用在foo类上调用 ，注意在静态方法中的this 指向的是当前类，而不是实例。

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

Foo.bar() // hello

静态方法可以和非静态方法重名。