javascript中class知识点整理

es6中引入class的概念 通过class可以定义为类 类的本质还是一个函数，是构造函数的另一种写法
实现面对对象编程

function Person1() { }
class Person2 { }
console.log(typeof Person1, typeof Person2) 
//function,function

es5 function写法

function Person3(name, age) {
    this.name = name;
    this.age = age;
}
Person3.prototype.say = function () {
    return '我叫' + this.name + '今年' + this.age + '岁'
}
var p1 = new Person3('张三', 18);
console.log(p1.say());

es6 class写法

class Person4 { //不存在变量提升，必须先声明后使用
    constructor(name, age) { //this指向实例对象
        this.name = name;
        this.age = age;
    }
    say() { //类的所有方法都在类的prototype上
        return '我叫' + this.name + '今年' + this.age + '岁'
    }
}
let p2 = new Person4('李四', 12);
let p3 = new Person4('王五', 24);
console.log(p2.say === p3.say, p2.say())

constructor

constructor 方法是类的构造方法
1.是一个默认方法，通过new命令创建该对象实例时，自动调用该方法
2.this是实例对象
3.一个类必须得有constructor方法，如果没有显示定义，会默认添加一个constructor
4.在constructor中调用类的原型方法， 一种是直接调用 另一种是通过回调调用原型方法 需要利用bind确定this

class Person5 {
    constructor(name) {
        this.name = name;
        this.say();
        setTimeout(function(){this.say()}.bind(this),1000)
        setTimeout(()=>{this.say()},2000)

    }
    say() {
        console.log(this.name)
    }
}
let p5 = new Person5('孙六');

get set 关键字

在class内部 可以使用get和set关键字，对某个属性设置存值函数setter和取值函数getter

class Person6 {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name
    }
    set name(name) {
        this._name = name;
    }
}
let p6 = new Person6('p6');
console.log(p6.name);
p6.setName = 'aaaaa';
console.log(p6.name, p6.getName);

静态方法和属性

类是实例的原型，所有类的方法都会被实例继承，但在方法和属性前面加一个关键字static，就代表该方法为一个静态方法
静态方法不会被实例继承，而是通过类直接调用

class Person7 {
    constructor() { }
    static say() {
        console.log('hello,world')
    }
}
let p7 = new Person7();
Person7.say() //hello,world
//p7.say() 报错

继承 extends

class的继承是通过extends关键字实现的；
在子构造函数中，使用this前必须先用super，否则会报错；
es6的继承机制 先创建父类的实例对象，然后再构建子类的实例，在修改父类中的this指向。

class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(`say${this.name}say${this.age}`)
    }
}
class Dog extends Animal{
    constructor(name,age,color){
        super(name,age);
        this.color = color;
    }
    sayColor(){
        console.log(`say${this.color} + ${this.name} + ${this.age}`)
    }
}
let dog = new Dog('富贵','3','white');
dog.say();
dog.sayColor();