ES6新特性：使用新方法定义javascript的Class

　　ES6中定义类的方式，就是ES3和ES5中定义类的语法糖，虽然也有些区别，但是整体定义类的方式更加简洁，类的继承更加方便，如果想对ES6中的继承更加熟悉，最好了解ES5中原型继承的方式，博客园中说JS继承的文章很多，想要深入了解的同学自己去搜；

　　定义一个class：

　　每一个使用class方式定义的类默认都有一个constructor函数，这个函数是构造函数的主函数，该函数体内部的this指向生成的实例, say() {}为原型上的方法，我们定义一个简单的类：

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    say () {
        console.log("say hi");
    }
};
new Person().say(); //控制台会输出say hi

　　注意： ES6中声明的类不存在函数声明提前的问题，类必须先声明再使用，否则会出现异常，我们只是把上面Demo中的代码位置一改，立马报错， (如果用ES5中的思维去理解的话，声明的类没有声明提前，有关声明提前的知识点，通过class 类名{} 声明的类，就是var 类名 = function(){})；

"use strict";
new Person().say();
class Person {
    constructor(name) {
        this.name = name;
    }
    say () {
        console.log("say hi");
    }
};

　　 ES6新特性：使用新方法定义javascript的Class

　　如果定义函数的时候，大括号内部， 函数名前声明了static，那么这个函数就为静态函数，就为静态方法，和原型没啥关系：

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    static say () {
        console.log("say hi");
    }
};
Person.say();

　　定义原型方法：

　　定义原型方法，直接这样声明： 函数名 () {} 即可，小括号内部为参数列表，大括号内部为代码块, ES5中要定义原型方法是通过： 构造函数.prototype.原型方法名() {} , 这种书写形式很繁琐，使用ES6定义原型的方式有点像java和C#了，这些都是比较高级语言的特征：

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    say () {
        console.log("say hi");
    }
    sing () {
        console.log("lalalalala");
    }
};
new Person().say(); //输出 ：say hi
new Person().sing(); //输出 ：lalalalala

　　静态属性和原型属性：

　　只能在类定义完毕以后再定义静态属性，有点坑爹，语言作者实现这种方式可能是为了避免代码的混乱，所有的静态属性在同一个地方定义，代码回更加规范？

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
};
Person.hands = 2;
console.log(Person.hands);

　　原型上面也不能定义属性了，我们只能在原型上定义set和get，取值和设值器，要注意取值器和设值器是在原型上....：

class Person {
    constructor(_name) {
        this._name = _name;
    }
    get name() {
        return this._name;
    }
    set name(_name) {
        this._name = _name;
    }
}
var p = new Person();
p.name = "heheda";
console.log(p.name); //输出：heheda
console.log(p._name); //输出：heheda

　　如果要定义原型属性的话，直接把属性定义在constructor内部即可，如果是继承的话，子类也会继承父类的这个属性：

class Person {
    constructor() {
        this.name = "default";
    }
}
class Man extends Person{
    constructor() {
        super();
    }
}
console.log( new Man().name );

　　类的继承extends：

　　ES5已经有继承，但是这种继承经常绕来绕去的， ES6的继承也只是基于原型继承的封装(语法糖)，虽然的确简洁了不少，还是java的继承比较好学啊，下面Demo的例子中的SMan是超人的意思，别想歪了；

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    say () {
        console.log("say hi");
        return this;
    }
};
class SMan extends Person {
    constructor (name, power) {
        super(name);
        this.superPower = power;
    }
    show () {
        console.log(this.superPower);
        return this;
    }
}
console.log( new SMan("Clark", "pee").show().say().name ); //输出：  pee  say    hi    Clark

　　如果要使用继承的话，在子类中必须执行super()调用父类，否者编译器会抛错，在子类中的super有三种作用，第一是作为构造函数直接调用，第二种是作为父类实例，第三种是在子类中的静态方法中调用父类的静态方法；

　　ES6继承的和ES5继承的主要区别， ES5中常用的继承是把子类的原型设置为父类的实例，子类自然就有了父类的所有方法和属性：

var Sup = function() {
    this.sub = true;
};
Sup.prototype.protoSup = {sup:"sup"};

var Sub = function() {
    this.sub = true;
};
Sub.prototype = new Sup(); //继承原型;
Sub.prototype.constructor = Sub; //修正constructor;

　　而在ES6中实现的继承更加精巧，不会有受到父类的干扰，这种继承是结合了apply继承和原型继承实现的组合继承：

var Sup = function() {
    this.sub = true;
};
var Sub = function() {
    this.sup = true;
    Sup.apply(this); //继承this的属性和方法;
};
Sub.__proto__ = Sup; //继承Sup静态属性;
Sub.prototype = Object.create( Sup.prototype, {constructor : { value: Sub, enumerable: false, writable: true, configurable: true }}); //继承原型属性，并覆写constructor;

　　用图片可以比较容易看出两者区别，图示ES5和ES6继承的区别：http://keenwon.com/1524.html ；

　　ES5模拟ES6的继承：

　　因为有了转码器babel ，我们能通过ES5的代码，去窥探ES6的继承到底是怎么实现， ES6的继承：

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    say () {
        console.log("say hi");
        return this;
    }
};
class SMan extends Person {
    constructor (name, power) {
        super(name);
        this.superPower = power;
    }
    show () {
        console.log(this.superPower);
        return this;
    }
}
console.log( new SMan("Clark", "pee").show().say().name );

View Code