Class（类）

前言

ES6引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

但是JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。

基本语法

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    Say(){
        return 'My name is ' + this.name;
    }
}
var person1 = new Person('Ethel',18);
console.log(person1.Say());//My name is Ethel

代码解析

person1 是通过类 Person 实例化出来的对象。对象 person1 是按照类 Person 这个模板，实例化出来的对象。实例化出来的对象拥有类预先订制好的结构和功能。

1. constructor是一个构造函数方法，创建对象时自动调用该方法
2. constructor是默认存在的，可以省略，程序也可以调用
3. this指的是实例化对象
4. 类中声明的方法不能加function关键字
5. 方法之间不要用逗号分隔，否则会报错

class类与原型的关系

class类本质上就是一个函数，自身指向的就是构造函数

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

class类是构造函数的另一种写法，仍然存在prototype方法

console.log(Person.prototype);//object

可以通过原型prototype修改类方法和新增方法

Person.prototype.Say = function(){
    return 'My name is ' + this.name+',我是原型prototype声明同样的Say方法，把原有Say方法覆盖了';
}
person2 = new Person('Frank',20);
console.log(person2.Say());//My name is Frank，我是原型prototype声明同样的Say方法，把原有Say方法覆盖了
Person.prototype.Go = function(){
    return 'I am ' + this.age + ' years old';
}
console.log(person2.Go());//I am 20 years old

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

Object.assign(Person.prototype,{
    Eat:function(){
        return this.name;
    },
    Run:function(){
        return this.age;
    }
})
person3 = new Person('Allen',20);
console.log(person3.Eat());//Allen
console.log(person3.Run());//20

也可以使用实例对象的__proto__属性新增类的方法

person3 = new Person('Allen',20);
person4 = new Person('Morgan',21);
person3.__proto__.Play = function(){
    return this.name;
}
console.log(person3.Play());// Allen
console.log(person4.Play());// Morgan

实例属性和原型属性

实例属性：constructor里面的属性为实例属性，即定义在this对象上
原型属性：除去实例属性都称为原型属性，即定义在class类上
hasOwnProperty方法：可以通过hasOwnProperty()方法进行判断属性是否是实例属性
in操作符：能够访问到属性时返回true,无论是实例属性还是原型属性

class Person{
    constructor(person1,person2){
        this.person1 = person1;
        this.person2 = person2;
    }
    Say(){
        return person1+person2;
    }
}
var box = new Person('Emily','Kristina');
console.log(Person.hasOwnProperty("person1"));//true
console.log(Person.hasOwnProperty("person1"));//true
console.log(Person.hasOwnProperty("Say"));//false
console.log("person1" in Person);//true
console.log("person2" in Person);//true
console.log("Say" in Person);//true
console.log("Go" in Person);//false

class类的继承

通过extends关键字实现类的继承

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getName(){
        return this.name;
    }
    getAge(){
        return this.age; 
    }
}
class Student extends Person{
    getName(){
        return '我覆盖了父级的方法,'+ this.name;
    }
    getScore(){
        return '我是子级新增的方法,'+this.name;
    }
}
var stu1 = new Student('Ethel',18);
console.log(sut1.getName());// 我覆盖了父级的方法,Ethel
console.log(sut1.getAge());//18
console.log(sut1.getScore());// 我是子级新增的方法,Ethel

通过super关键字进行拓展父类构造器或方法

super作用

1. 子类使用构造器constructor的时候，必须使用super关键字，用来扩展构造器
2. 子类同名方法会覆盖父类同名方法，使用super关键字后则可以调用到父类的同名函数

class Person{
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log('我是父级类getName方法输出来的');
    }
    getAge(){
        console.log(this.age); 
    }
}
class Student extends Person{
    constructor(name,age,sex){
        super();//必须先调用super，才能使用constructor，才能使用this对象
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    getName(){
        super.getName();//调用super，才能调用父类同名函数getName
        console.log('我是子级类getName方法输出来的');
    }
}
var stu1 = new Student('Ethel',18);
stu1.getName();
// 我是父级类getName方法输出来的
// 我是子级类getName方法输出来的

static关键字

1. static关键字是类的方法
2. 只能通过类名来调用，不能被实例对象调用
3. static方法也可以被继承

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    static getAge(){
        console.log('我是静态属性static');
    }
}
class Student extends Person{}
var stu1 = new Student('Ethel',2);
Person.getAge();//我是静态属性static
Student.getAge();//我是静态属性static
stu1.getAge();//stu1.getAge is not a function

class 实例化的背后原理

使用 class 的语法，让开发者告别了使用 prototype 模仿面向对象的时代。但是，class 并不是 ES6 引入的全新概念，它的原理依旧是原型继承。

typeof class == "function"

通过类型判断，我们可以得知，class 的并不是什么全新的数据类型，它实际只是 function (或者说 object)。