React学习——Day6

在学习使用class关键字创建组件之前，我们先来了解一下ES6中class关键字的用法。ES6中的class关键字，是实现面向对象编程的新形式。

一、class-创建类并通过constructor挂载实例属性

【实例属性】：通过new出来的实例访问到的属性。

// 创建了一个动物类
class Animal {
    // 这是类中的构造器。每一个类中，都有一个构造器，如果我们程序员没有手动指定构造器，那么，
    // 可以认为类内部有个隐形的、看不见的空构造器，类似于constructor(){}
    // 构造器的作用，就是每当new这个类的时候，必然会优先执行构造器中的代码
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

const a1 = new Animal('monkey', 3);
console.log(a1.name);  // monkey
console.log(a1.age);  // 3

二、class-使用static创建静态属性

【静态属性】：通过构造函数直接访问到的属性。

class Animal{
	static gender = '雄/雌';
}
console.log(Animal.gender);  // 雄/雌

三、class-实例方法和静态方法

class Animal {
    fn1 = function () {
        console.log('这是Animal的实例方法');
    };
    static fn2 = function () {
        console.log('这是Animal的静态方法');
    }
}

const a1 = new Animal();
a1.fn1();  // 这是Animal的实例方法
Animal.fn2();  // 这是Animal的静态方法

实例方法是挂载到实例对象的原型中；静态方法是挂载到构造函数的构造器中，因此实例访问不到。今后实例属性和实例方法我们用的会比较多，较少使用类的静态属性与静态方法。

四、使用class的两个注意点

• 在class的{ }区间内，只能写构造器、静态方法、静态属性和实例方法。
• class关键字内部，还是用原来的function(){}构造函数来实现的，所以说，我们把class关键字称作语法糖。

五、class-使用extends实现子类继承父类

在class类中，可以使用extends关键字实现子类继承父类。
语法：class 子类 extends 父类 {}
这里我们可以把父类理解为原型对象。

class Animal {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
class dog extends Animal {

}
const d1 = new dog('玛丽', 4);
console.log(d1);  // {name: "玛丽", age: 4}

六、子类访问父类上的实例方法

注意：这里我们说的实例方法是相对于静态方法来说的，熟悉JS原型的同学应该都知道严格意义上的实例方法是定义在构造函数中、不被各个实例共享的方法。

class Animal {
    eat = function(){
        console.log('I can eat!');
    }
}
class dog extends Animal {

}
const d1 = new dog();
d1.eat();  // I can eat!

七、class-constructor构造器中super函数的使用说明

如果一个子类通过extends关键字继承了父类，那么，在子类的constructor构造函数中，必须优先调用一下super()。
super是一个函数，而且，它是父类的构造器；子类中的super，其实就是父类中constructor构造器的一个引用。

class Animal {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
class dog extends Animal {
    constructor(name, age){
        super(name, age);
    }
}
const d1 = new dog('玛丽', 4);
console.log(d1); // {name: "玛丽", age: 4}

八、为子类挂载独有的实例属性

有些属性是子类独有的，既然是独有的，就不适合挂载到父类上。比如：

class Animal {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
class dog extends Animal {
    constructor(name, age, kind){
        super(name, age);
        this.kind = kind;
    }
}
const d1 = new dog('玛丽', 4, '泰迪');
console.log(d1); // {name: "玛丽", age: 4, kind: "泰迪"}

这里需要注意一点，为子类挂载独有的属性操作必须在super调用之后，否则会报错。

小结

以上介绍了ES6中class关键字的使用方法，在学会使用class来创建类以及实现继承之后就可以用其创建React当中的组件了😊