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("hebei",23) //经过构造函数建立对象，必须使用new运算符
console.log(obj.say())//个人名字叫hebei今年23岁了

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

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

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

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

注意项：
一、在类中声明方法的时候，千万不要给该方法加上function关键字
二、方法之间不要用逗号分隔，不然会报错

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

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

以上代码说明构造函数的prototype属性，在es6的类中依然存在着
实际上类的全部方法都定义在类的prototype属性上。代码证实下：

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

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

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

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

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

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 this.num1+this.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

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

class Box{
    constructor(num1,num2){
        this.num1 = num1
        this.num2 = num2
    }
    sum(){
        return this.num1+this.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 this.num1+this.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{}

Es6类class的关键super、static、constructor、new.target
es6引入了Class类这个概念，做为对象的模版，经过class关键字，能够定义类。基本上，es6的class能够看做只是一个语法糖，它的绝大部分功能，es5均可以作到，新的class写法只是让对象原型的写法更加清晰、更加面向对象编程而已。
一、super关键字
super用在调用的时候有两种状况：
第一种：super做为函数调用时，表明父类的构造函数
第二种：super做为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class Person{
    constructor(name){
        this.name = name
    }
    height(){
        console.log(1)
    }
    static weight(){
        console.log(2)
    }
}
class Student extends Person{
    constructor(name,age){
        super()//表明父类的构造函数
        this.age = age
    }
    height(){
        super.height()//指向父类的原型对象
    }
    static weight(){
        super.weight()//指向父类
    }
}

若是子类调用constructor，那么子类必须在coonstructor方法中调用super方法，不然新建实例时会报错。这是由于子类没有本身的this对象，而是继承父类的this对象，而后对其进行加工。若是不调用super方法，子类就得不到this对象

总结下：
super关键字用于调用一个对象的父对象上的函数
super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的。
在构造函数中使用时，super关键字单独出现，必须在可使用this关键字以前使用。此关键字也可用于调用父对象上的函数

二、static关键字
类至关于实例的原型，全部在类中定义的方法，都会被实例继承。若是在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接经过类来调用，这就称为静态方法
静态方法调用直接在类上进行，而在类的实例上不可被调用
静态方法一般用于建立 实用/工具 函数

经过例子咱们能够发现，静态方法是经过类名直接调用的
从另外一个静态方法为了在同一个类的另外一个静态方法中调用一个静态方法，你可使用this关键字

从类的构造函数和其余方法静态方法不能直接在非静态方法中使用this关键字来访问。你须要使用类名来调用他们：

三、new.target关键字
new.target属性容许你检测函数或构造方法是否经过是经过new运算符被调用的。在经过new运算符被初始化的函数或构造方法中，new.target返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是undefined。
怎么理解这段话，也就是说new.target的功能就是用来检测函数的调用是否是经过 new 去建立一个新对象的，并且new.target返回的是一个指向函数的引用，也就是说咱们可以肯定是哪一个函数进行了new操做

class A {
  constructor() {
    console.log(new.target.name);
  }    
}
class B extends A { constructor() { super(); } }
var a = new A(); // logs "A"
var b = new B(); // logs "B"

new.target 最大的做用就是让构造器知道当前到底 new 的是哪一个类。
延伸下。ES6以前怎么实现这个功能？

var A = function A() {
  if(!(this instanceof A)) throw 'Constructor A requires "new"';
  // ···
};

然而这依然能够经过 call 或 apply 来调用。好比：

var a = A.call(Object.create(A.prototype));

那么用ES6就是下面这样操做了

var A = function A() {
  if(!new.target) throw 'Constructor A requires "new"';
  // ···
};

四、constructor关键字
构造方法是建立和初始化使用类建立的一个对象的一种特殊方法。

class Square extends Polygon {
  constructor(length) {
    // 在这里调用父类的"length",赋值给矩形的"width"和"height"。
    super(length, length);
    // 注意:子类必须在constructor方法中调用super方法，不然新建实例时会报错。
    this.name = 'Square';
  }
get area() {
    return this.height * this.width;
  }
  set area(value) {
    this.area = value;
  } 
}

若是没有显式定义，会默认添加一个空的constructor方法。对于基类"Base classes"，默认构造方法以下:

constructor() {}

对于派生类"Derived classes" ，默认构造方法以下:

constructor(...args) {
  super(...args);
}