ES6入门教程——13、ES6的类

 

一、传统js实现类概念方式

它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。非常容易让人困惑！

如果要生成一个对象实例，需要先定义一个构造函数，在prototype上增加方法，然后通过new操作符来完成。构造函数示例：

//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Student(name,age) {
    this.name = name;
    this.age=age;
}
Student.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Student("xiaoxiao",18);//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫xiaoxiao今年18岁了

二、ES6中的类实现

class Student{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Student("xiaoxiao",18);
console.log(obj.say());//我的名字叫xiaoxiao今年18岁了

ES6中的类其实就是构造函数的另外一种写法！

console.log(typeof Student);//function
console.log(Student===Student.prototype.constructor);//true

实际上类的所有方法都定义在类的prototype属性上。

可以通过Object.assign方法来为对象动态增加方法。

Object.assign(Student.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Student("xiaoxiao",18);
console.log(obj.getName());//xiaoxiao
console.log(obj.getAge());//18

上面是在类原型prototype上增加方法，也可以使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！下面的例子是使用实例的__proto__属性增加方法。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box1=new Box(12,88);
var box2=new Box(40,60);
box1.__proto__.sub=function(){
    return this.num2-this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//20