ES6之class

Posted 2020-08-29 Wayne Zhu

ES6之class

　　es6中的class是一个基于prototype继承的语法糖，它提供了更接近传统语言的写法，引入了class（类）这个概念作为对象的模版。通过class关键字可以定义类，但是通过class做的工作，es5也可以做到，只是通过class，可以使我们的工作更加方便。

　　

第一部分：class定义

　　class实际上是一种特殊的函数，就像我们可以通过函数表达式和函数声明来定义函数一样，class也有这两种定义方式。

　　1.class声明

　　只需使用class关键字，并在其后加上class名称即可，如：

class Polygon{

　　constructor(width,height){

　　　　this.width=width;

　　　　this.height=height;

　　}

}

 　　

 　　注意：普通的函数声明的特点在于：函数声明提升。但是class的函数声明没有函数声明提升，这一点要格外注意。

　　

　　2.class表达式

　　 class表达式可以是匿名的，也可以不是。

　　不匿名：

　　

var Polygon = class Polygon{

　　constructor(width,height){

　　　　this.width=width;

　　　　this.height=height;

　　}

};

 　　

　　匿名：

　　

var Polygon = class{

　　constructor(width,height){

　　　　this.width=width;

　　　　this.height=height;

　　}

};　

　　同样的，函数表达式也没有提升的效果。

 

 

第二部分：class主体和方法

　　class的主体部分使用{}括起来的，我们可以在其中定义class成员。比如方法和constructor。且他们都是在严格模式下运行的。

　　constructor是为了创建和初始化一个有class产生的对象的，在class中只能有一个class方法， 并且在construtor中可以使用super关键字调用父类的constructor。

　　原型方法：

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

const square = new Polygon(10, 10);

console.log(square.area);

 

　　我们可以看到，在这个类中不仅有constructor方法，还有其他两个方法。

　　值得注意的是：在定义“类”方法时，前面不需要加function关键字，直接把函数定义进去就可以了，且方法之间不需要加逗号分隔，否则会报错。

 　　

　　重点：

　　ES6中的类完全可以看作构造函数的另一种写法：

　class Polygon {

　　//...　　

}

　　typeof Point //“function”

　　Point === Point.prototype.constructor // true

 

 　　也就是说，对于下面的这个类：

class Polygon {
　　constructor(){

     // ...

      }

     toString(){

　 //...

　　}

　　toValue(){

　　//...

　　}

}

 　　使用es5来写可以写成这样：

　　Polygon.prototype = {

　　　　constructor(){},

　　　　toString(){},

　　　　toValue(){}

　　}

 　　

　　也就是就说，在类的实例上调用方法，实际上就是调用原型上的方法。

　　class B {}

　　let b = new B{};

　　b.constructor === B.prototype.constructor //true

 　　即b是B类的实例，它的constructor方法就是B类原型的constructor方法。

　　

　　

 

 第三部分：实例对象

　　生成实例对象的方法和ES5完全相同，使用new命令即可。如：

　　var polygon = new Polygon();

 　　

　　值得注意的是：实例的属性除非显示定义在其本身（即this对象）上，否则都是定义在原型上的。

　　与ES5一样，类的所有实例共享一个原型对象。