![React工程师修炼指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/475/37323475/b_37323475.jpg)
上QQ阅读APP看书,第一时间看更新
1.6 类class
1.6.1 类的基本语法
在ES5标准中通过构造函数来模拟类的功能,一般会定义一个构造函数,把一类功能做封装,通过new和运算符来调用,比如封装“人”类如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_03.jpg?sign=1738896574-1e4eCt8cfUnWaGwmAixtCDbzhU78neW1-0-a94863d23122375a698952ee20a4e1b5)
在ES6标准中提供class关键字来定义类,在写法上变得更加简洁,语义化更强,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_04.jpg?sign=1738896574-evmUlr1nbgoWbKsnC9MltvSF3JFtM4Ql-0-43fdf6dad21a0ab23d171424591e30e4)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_01.jpg?sign=1738896574-UfQpKa0GKkHf4Rm5caIv8NwVWtH1E5db-0-f9ee1565853b97138a67c6db236b4955)
上述写法中Person类的类型同样是函数类型,可以通过typeof来查看,this同样指向实例化对象zhangsan。fn函数同样是在实例化对象原型上。创建属性的时候可以在构造函数里直接创建,同样也支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get,创建setter的时候需要用关键字set。例如创建age属性:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_02.jpg?sign=1738896574-JRZ831NTEViNZe55GECEuuf7FP36tavC-0-f6e70bc98bbab450fc4227c5178cf2ec)
1.6.2 静态成员
在ES5标准中静态成员,可以通过如下方式实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_03.jpg?sign=1738896574-P67Q0JD3aKeyQ4xOb2ZrtuUgxgCwadEs-0-dabac5e29c412d731c1f9297c7eb08d0)
在ES6标准中提供static关键字来声明静态成员:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_01.jpg?sign=1738896574-QjsEAtnjBKI5LZPWejPCBy4zL3h53Onj-0-bd11dc857cf5885f5f4bfe62a32c642f)
1.6.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_02.jpg?sign=1738896574-UXTAtYk0kQtIy0R8gkkO7bBOiFvOzk9U-0-f77de46531e220bcb6b1b7fe7cb86384)
上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较烦琐,针对这种情况ES6提供extends关键字来实现类的继承,具体代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_03.jpg?sign=1738896574-kh2SZEYZVPRxfSQqVy7oD3acESqt4zEJ-0-4bff49357e3ed981e60d1eae5c469e5c)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_01.jpg?sign=1738896574-40cKCtYr4r5DsO7qF4v5siROTs2I2Ro1-0-711d0ce7f0c0166fed2d3aae4bc41f45)
在继承中需要注意,需要调用super()方法继承父类的构造函数。super()在使用过程中需要注意以下两点。
1)在访问this之前一定要调用super()。
2)如果不调用super(),可以让子类构造函数返还一个对象。
同样在继承中静态成员也可以被继承,因为静态成员属于类自身,所以它的继承也是类本身的继承,实例化对象不能继承到静态成员,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_02.jpg?sign=1738896574-8RCrPDIAuSEEjZtGP7wITkieCRFyWg3l-0-8c4afbba56b6f4b17861e6c33dbca9c2)
上述代码中可以看出,静态属性可以被子类所继承,但是如果是子类的实例化对象则不能被继承到。