Class类的使用及概念

一、类的概念

类是一个模板，它描述一类对象的行为和状态。在ES5是用构造函数来描述的，而到ES6之后则是用class来描述的

二、Class

要使用Class去定义一个类，用法如下：

class Person{
}
console.log(new Person())//输出的结果：Person{}
console.log(typeof Person)//输出的结果：function

结果可见Person有构造函数的作用，但是这要比

三、构造方法

class Person{

    constructor(){//构造函数,析构函数
        this.name = "";
        this.age=0;
        console.log("我是构造函数")
    }
}
var p = new Person()
console.log(p)

可见每一个类中都有一个constructor属性，其对应的是ES5中构造函数的本身。其内的属性和方法，都是挂载在this指针上面的，都是将来的实例属性和方法。

四、实例属性和实例方法

4.1 实例属性和类属性：

class Computer{
    //类属性 tic type = "";//类属性只能通过类的关键字来访问修改， 类的方法是通过自己来调用的
    constructor(){
        this.price = '7999'//实例属性 对象属性 实例方法是类的对象来调用的
    }

    static sayHello(){
        console.log("大家好，我是类方法")
    }

    sayGoodBay(){
        console.log("大家好，我是实例方法")
    }
}

4.2 实例方法

• 什么是实例方法？
  能被new出来的实列所访问的方法

• 传统构造函数中定义实列的方法和方式

      function Animal (name, age) {

          this.name = name;

          this.age = age;

      }

      Animal.prototype.sounds = function () {

          console.log('yayaya')

      }

      const a1 = new Animal('dog', 3);

      a1.sounds()//输出结果：yayaya

五、静态属性和静态方法

5.1 静态属性

*什么是静态属性：

通过 “构造函数” 直接访问到的属性；

• 传统构造函数定义静态的属性的方法

 function Animal (name, age) {

   this.name = name;

   this.age = age;
}

Animal.sounds = 'yayaya';

console.log(Animal.sounds)// yayaya

const a1 = new Animal('dog', 3);

console.log(a1.sounds)// undefined

console.log(a1.name)//dog

console.log(a1.age)//3

• 在Class中定义静态属性

在Class中定义静态属性中通过****关键字修饰就是静态属性

class Animal {

    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

    static sounds = 'yayaya';

}

console.log(Animal.sounds)//yayaya

const a2 = new Animal('cat', 2);

console.log(a2.sounds)//undefined

console.log(a2.name)//cat

console.log(a2.age)//2

5.2 静态方法

静态方法就是类本身的方法，也是挂载道构造函数上的方法，new 出来的 实例 访问不到

*传统定义的静态方法：

function Animal (name, age) {

    this.name = name;

    this.age = age;

}

Animal.sounds = function () {

    console.log('yayaya')

}

Animal.sounds() //yayaya

const a1 = new Animal('dog', 3);

a1.sounds()// 报错：a1.sounds is not a function

• Class内部定义的静态方法：

在class类内部，定义静态属性和静态方法都是通过static关键字来修饰！

class Animal {

    constructor(name, age){

        this.name = name;

        this.age = age;

    }

    static sounds () {

        console.log('yayaya')

    }

}

Animal.sounds() //yayaya

const a2 = new Animal('cat', 2);

a2.sounds() // 报错：a2.sounds is not a function

六、This关键字

6.1 四个注意点

1. 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2. 类里面的共有属性和方法一定要加this指向
3. 类里面的指向问题，通常都是this指向它定义的地方
4. 如果this是在类外面定义的，那么它回默认指向window,也就是全局

6.2 this 具有如下特点

1. 箭头函数没有自己的this。箭头函数的this是相同情况下function的上一级作用域的运行环境。
2. 不同时也没有自己的arguments、super、new.target，这点和this一样。
3. 因为没有this，所以不能当构造函数。
4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

七、Super 关键字

super是es6新出的关键字，它既可以当作函数使用，也可以当作对象使用，两种使用方法不尽相同

7.1 super用作函数使用的时候，代表父类的构造函数，es6规定在子类中使用this之前必须先执行一次super函数，super相当于Father.prototype.constructor.call(this)

class Father{
    constructor(){
        this.a = 1;
    }
}
class Son extends Father{
    constructor(){
        super();
    }
}

7.2 super用作对象的时候，在普通方法中指向父类的原型对象，在静态方法中指向父类

• 子类中使用super无法访问Father的实例属性a，可以访问原型对象上的p

class Father {
    constructor() {
        this.a = 1;
    }
    p() {
　　　　  console.log(thia.a);
        console.log('hello');
    }
}
class Son extends Father {
    constructor() {
        super();
　　　　　this.a = 2;
        super.p();//'2 hello'   Father.prototype.p()方法内部的this指向的是子类实例
        super.a;//undefined
    }
}

八、类的继承

• class 可以通过 extendx 关键实现继承，这要比原型链继承要清晰和方便的多

class Person{

    constructor(){//构造函数,析构函数
    //默认返回实例对象 this
        this.name = "";
        this.age=0;
        console.log("我是构造函数")
    }
}


class Student extends Person{
    constructor(){
        super()
        console.log("我是Person的子类")
    }
}

console.log(new Student())

子类必须在 constructor 方法中调用super方法，否则新建实例时会报错，子类就得不到 this 对象。这是因为子类自己的 this 对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工。如果不调用 super 方法，子类就得不到this对象。

ES5 的继承，实质是先创造子类的实例对象 this，然后再将父类的方法添加到 this 上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到 this上面（所以必须先调用super方法），然后再用子类的构造函数修改 this。