es5和es6类的比较

function Person(name) {
    this.name = name; 
}

Person.prototype.sayHello = function(){
    return 'Hi, I am ' + this.name;
}

/*这是es5中 主流建立对象的方法之一,方法写在原型链中*/ 复制代码


而用ES6的写法重写一下,检测类型发现Person本质上仍然是函数:
es6

class Person {
    //先建立构造函数
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}复制代码


typeof Person; //'function'复制代码

调用的方式都是一致的:
bash

var me = new Person('Jason');    复制代码

用ES6定义class中的方法,定义在原型对象上的。与ES5不一样的是,这些定义在原型对象的方法是不可枚举的。数据结构

ES6类和模块是严格模式下的;函数

不存在变量提高,保证子类父类的顺序;ui

类的继承也有新的写法:this

class Female extends Person {
    constructor(name){
        super(name); //调用父类的,调用以后,子类才有this
        this.gender = 'female';
    }
    sayHello(){
        return super.sayHello() + ', I am ' + this.gender; 
    }
}复制代码

注意点,子类必须在父类的构造函数中调用super(),这样才有this对象,由于this对象是从父类继承下来的。而要在子类中调用父类的方法,用super关键词可指代父类。 ES5中类继承的关系是相反的,先有子类的this,而后用父类的方法应用在this上。 ES6类继承子类的this是从父类继承下来的这个特性,使得在ES6中能够构造原生数据结构的子类,这是ES5没法作到的。 ES6也能够定义类的静态方法和静态属性,静态的意思是这些不会被实例继承,不须要实例化类,就能够直接拿来用。ES6中class内部只能定义方法,不能定义属性。在方法名前加上static就表示这个方式是静态方法,而属性仍是按照ES5的方式来实现。 
es5

// ES5写法 
Person.total = 0; //静态属性
Person.counter = function(){  //静态方法
    return this.total ++ ;
}

// ES6写法
class Person {
    ...
    static counter(){
        return this.total ++ ;
    }
}
Person.total = 0;复制代码

ES6中当函数用new关键词的时候,增长了new.target属性来判断当前调用的构造函数。这个有什么用处呢?能够限制函数的调用,好比必定要用new命令来调用,或者不能直接被实例化须要调用它的子类。
spa

function Person(name){
    if(new.target === Person){
        this.name = name;
    }
    else{
        throw new Error('必须用new生成实例');
    }
}复制代码

总结:

  • ES6中的对象的方法不须要单独写在原型链中
  • ES6中多了静态方法的声明与使用,静态方法是实例对象没法调用的,是经过原型.方法名进行调用,静态方法 多数用于存储 公共方法,好比说要给 这一批 同类对象 进行排序等
  • 类的继承中继承关系是相反的(es6:先有父类,再有子类,es5则反之),写法也不同
  • ES6类和模块是严格模式下的,不存在变量提高,保证子类父类的顺序
相关文章
相关标签/搜索