es6 --- class 类的继承使用

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特色就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来说，颇有一种独树一帜的感脚！很是容易让人困惑！
若是要生成一个对象实例，须要先定义一个构造函数，而后经过new操做符来完成。构造函数示例：

 

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

构造函数生成实例的执行过程：

1.当使用了构造函数，而且new 构造函数(),后台会隐式执行new Object()建立对象;
2.将构造函数的做用域给新对象，（即new Object()建立出的对象），而函数体内的this就表明new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;

ES6引入了Class（类）这个概念，经过class关键字能够定义类。该关键字的出现使得其在对象写法上更加清晰，更像是一种面向对象的语言。若是将以前的代码改成ES6的写法就会是这个样子：

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

注意项

1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，不然会报错

由下面代码能够看出类实质上就是一个函数。类自身指向的就是构造函数。因此能够认为ES6中的类其实就是构造函数的另一种写法！

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

如下代码说明构造函数的prototype属性，在ES6的类中依然存在着。
console.log(Person.prototype);//输出的结果是一个对象
实际上类的全部方法都定义在类的prototype属性上。代码证实下：

Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖！
    return "我是来证实的，你叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);
console.log(obj.say());//我是来证实的，你叫laotie今年88岁了

固然也能够经过prototype属性对类添加方法。以下：

Person.prototype.addFn=function(){
    return "我是经过prototype新增长的方法,名字叫addFn";
}
var obj=new Person("laotie",88);
console.log(obj.addFn());//我是经过prototype新增长的方法,名字叫addFn

还能够经过Object.assign方法来为对象动态增长方法

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

constructor方法是类的构造函数的默认方法，经过new命令生成对象实例时，自动调用该方法。

class Box{
    constructor(){
        console.log("啦啦啦，今每天气好晴朗");//当实例化对象时该行代码会执行。
    }
}
var obj=new Box();

constructor方法若是没有显式定义，会隐式生成一个constructor方法。因此即便你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，可是也能够指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。

class Desk{
    constructor(){
        this.xixi="我是一只小小小小鸟！哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 这里没有用this哦，直接返回一个全新的对象
    }
}
var obj=new Box();
console.log(obj.xixi);//我是一只小小小小鸟！哦

constructor中定义的属性能够称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，能够称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是不是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操做符会在经过对象可以访问给定属性时返回true,不管该属性存在于实例中仍是原型中。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

类的全部实例共享一个原型对象，它们的原型都是Person.prototype，因此proto属性是相等的

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
//box1与box2都是Box的实例。它们的__proto__都指向Box的prototype
var box1=new Box(12,88);
var box2=new Box(40,60);
console.log(box1.__proto__===box2.__proto__);//true

由此，也能够经过proto来为类增长方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到全部实例，因此不推荐使用！

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

　　class不存在变量提高，因此须要先定义再使用。由于ES6不会把类的声明提高到代码头部，可是ES5就不同,ES5存在变量提高,能够先使用，而后再定义。

//ES5能够先使用再定义,存在变量提高
new A();
function A(){

}
//ES6不能先使用再定义,不存在变量提高 会报错
new B();//B is not defined
class B{

}