Class类的使用及概念

概念"/>

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)// yayayaconst a1 = new Animal('dog', 3);console.log(a1.sounds)// undefinedconsole.log(a1.name)//dogconsole.log(a1.age)//3

• 在Class中定义静态属性

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

class Animal {constructor(name, age) {this.name = name;this.age = age;}static sounds = 'yayaya';}console.log(Animal.sounds)//yayayaconst a2 = new Animal('cat', 2);console.log(a2.sounds)//undefinedconsole.log(a2.name)//catconsole.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() //yayayaconst 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() //yayayaconst 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(){//构造函数,析构函数//默认返回实例对象 thisthis.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。