ES6入门 - Class(类)

Class

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。这个新概念的引入使得其在对象写法上更加清晰，更像是一种面向对象的语言。
参考文章：ECMAScript 6 入门

怎么定义类

JavaScript 生成实例对象的传统方法是通过构造函数。

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}
var person = new Person('Kelly',23);
person.sayName(); // Kelly

ES6通过class关键字定义类：

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;        
    }
    sayName(){
        console.log(this.name);
    }
}
var person = new Person('Kelly',23);
person.sayName(); // Kelly

可以看到，代码中有一个constructor方法，它是构造方法。
this关键字代表生成的实例对象person。
创建实例对象的时候，直接对类使用new命令，跟构造函数的用法完全一致。
注意：

• 定义类的方法的时候，前面不需要加上function关键字。
• 方法之间不要用逗号分隔，否则会报错。

construtor方法

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。
• 如果没有定义constructor方法，JavaScript 引擎会自动为类添加一个空的constructor方法。
• 该方法默认返回的是实例对象（即this），但是它也可以指定返回另外一个对象。

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

  constructor函数返回一个全新的对象。

实例对象和原型对象的属性

与ES5一样，实例的属性都是定义在原型对象上（即定义在class上），但是也可以显示定义在实例对象本身（即定义在this上）。

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;        
    }
    sayName(){
        console.log(this.name);
    }
}
var person = new Person('Kelly',23);
person.sayName(); // Kelly

console.log(person.hasOwnProperty('name'));// true
console.log(person.hasOwnProperty('age'));// true
console.log(person.hasOwnProperty('sayName'));// false

因为定义在this变量上，name、age都是实例对象person自身的属性，所以hasOwnProperty方法返回true。而sayName是定义在Person类上，是原型对象的属性，返回false。

静态方法和静态属性

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

class Person{
    static sayName(){
        console.log("Person类");
    }
}
Person.sayName();// Person类
var person = new Person();
person.sayName(); 
// Uncaught TypeError: person.sayName is not a function

Person类的sayName方法是一个静态方法，可以直接在Person类上调用。
如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

如果静态方法包含this关键字，这个this指的是类，而不是实例。
静态方法可以与非静态方法重名。

class Person{
    static print(){
        this.say();
    }
    static say(){ // 静态方法
        console.log("Person类");
    }
    say(){
        console.log("Person类的实例");
    }
}
Person.print();// Person类

静态方法print调用了this.say，这里的this指的是Person类，而不是Person的实例，等同于调用Person.say()。

静态属性：
静态属性指的是 Class 本身的属性，而不是定义在实例对象（this）上的属性。

class Foo {
}
Foo.prop = 1;
console.log(Foo.prop); // 1

getter和setter

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

class MyClass {
    constructor() {
      // ...
    }
    get prop() {
      return 'getter';
    }
    set prop(value) {
      console.log('setter: '+value);
    }
  }
let inst = new MyClass();
// 赋值行为，执行set里面的代码
inst.prop = 123; // setter: 123 
// 读取行为，执行get里面的代码
console.log(inst.prop); // getter

prop属性有对应的存值函数和取值函数，赋值和读取行为都被自定义了。