ES6中的class与继承

传统的JavaScript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其他传统面向对象语言来讲，独树一帜也可以说难以接受
ES5中的累
ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。
示例：

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

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

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

ES6中的类
ES6引入了class（类）这个概念，通过class关键字可以定义类。该关键字的出现使得JavaScript在对象写法上更加清晰，更像是一种面向对象的语言。
将之前的代码改为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) ///输出的结果是一个对象
实际上类的所有方法都定义在类的Protype属性上，代码证明下 ：

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

当然也可以通过prototype属性对类添加方法，如下：

Person.prototype.addFn=function(){
return "我是通过prototype新增加的方法，名字叫addFn"；
}
var obj=new Person("dry",18);
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("dry",18);
console.log(obj.getName())  //dry
console.log(obj.getAge); //18

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

class Box{
	constructor(){
	console.log("zkl今天吃屎了")  //当实力恶化对象时该行代码会执行
	}
}
var obj=new Box();

constructor 方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。contructor方法默认实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。

class Desk{
	constructor(){
	this.aa="dry是个小仙女儿"
	}
}
class Box{
	constructor(){
	return new  Desk();  //这里没有用this ，直接返回一个全新的对象
	}
}
var obj = new Box();
console.log(obj.aa) //dry是个小仙女儿

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());//2

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样，ES5存在变量提升，可以先使用，然后再定义。

//ES5可以先使用再定义,存在变量提升
new A();
function A(){

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

}

ES5中的继承（集合继承：原型链继承+借用构造函数）

原型链继承
父类的实例作为子类的原型

function Persion(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
        console.log(`${this.name} ${this.age}`);
    }
}
Persion.prototype.test=function(){
    console.log("我是原型上的方法");
}
//子类
function Women(){
    this.sex='女'
}
Women.prototype=new Persion('dry',18);//父类的实例作为子类的原型

var one=new Women('zkl',20);
one.say();//dry 18  子类实例，不能向父类构造函数中传参数
one.test();// 可以调用原型方法 我是原型上的方

借用构造函数继承
在子类内，使用call()调用父类方法，并将父类的this修改为子类的this，相当于是把父类的实例属性复制了一份放到子类的函数内

//父类
function Persion(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
        console.log(`${this.name} ${this.age}`);
    }
}
Persion.prototype.test=function(){
    console.log("我是原型上的方法");
}
//子类
function Women(){
    //在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.
    Persion.call(this);
    this.name="child";
    this.age=18;
}
var one=new Women();
one.say();//child 18
one.test();// 报错 不能继承原型上的方法

组合继承
既能调用父类实例属性，又能调用父类原型属性

//解决方法，组合是继承，把子类的原型变成父类的实例
function Persion(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
        console.log(`${this.name} ${this.age}`);
    }
}
Persion.prototype.test=function(){
    console.log("我是原型上的方法");
}
//子类
function Women(name,age,sex){
    Persion.call(this,name,age);//实现继承的一种方式
    this.sex=sex
}
Women.prototype=new Persion();//把Women的原型变成Persion的实例（因为Women的实例能够访问到Women原型上的方法）

var c=new Women('dry',20,'女');
c.say();
c.test();//成功继承原型上的方法

ES6中的class继承

• 父类（基类）
• 子类
• extends 关键字

//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性


//父类
class People{
 constructor(name='wang',age='27'){
   this.name = name;
   this.age = age;
 }
 eat(){
   console.log(`${this.name} ${this.age} eat food`)
 }
}
//子类 通过extends 继承父类
class Woman extends People{ 
  constructor(name = 'ren',age = '27'){ 
    //继承父类属性
    super(name, age); 
  } 
   eat(){ 
    //继承父类方法
     super.eat() 
   } 
} 
let wonmanObj=new Woman('dry'); 
wonmanObj.eat();