![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=1738883653-fk3vP1MoXSJwZJwS3ZBIykvIS6jtjtrm-0-aca5027e34f53388eab6428fbb87e5d0)
在ES6标准中提供class关键字来定义类,在写法上变得更加简洁,语义化更强,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_04.jpg?sign=1738883653-o2NnWyJuOsEcOXiKnlklrCNm1QVAxgba-0-47f0ed58c9660881337d2bd562793ba1)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_01.jpg?sign=1738883653-XVSJX6Tc3xvJpQq3z4WnVyoSKVSKSLYk-0-63d7e2d27c4a458faae27ada4e4f1b43)
上述写法中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=1738883653-tMWvHhO03ScrbvZfCaOVtNXj1Dg8kzfa-0-758d47d5a5ec326bd65d9dd0b8b18caa)
1.6.2 静态成员
在ES5标准中静态成员,可以通过如下方式实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_03.jpg?sign=1738883653-iBEzXNGwxwQRWgSYjNx3iVZfTVwsU4on-0-15f5b3a1e18778aad7c3459c148e8f0c)
在ES6标准中提供static关键字来声明静态成员:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_01.jpg?sign=1738883653-JoOBhTr69YYZPMzGOEiXcazU84ThKrZI-0-40a12b0951856e8cb07858e95defad23)
1.6.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_02.jpg?sign=1738883653-CXZqQhbrOGTDoxzUPQIur7FP8QL3IphB-0-09b7b854cc85df335b3e109d1254c34e)
上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较烦琐,针对这种情况ES6提供extends关键字来实现类的继承,具体代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_03.jpg?sign=1738883653-bjjIRYfUnznJam8r3zwkkiSwdAxpR0Pa-0-fed056701c49a1ac2b37a79558adcd7b)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_01.jpg?sign=1738883653-Kvmup0bdDFfycJC4M32vy0r4BRivE4Pa-0-828554edaa81d6292e0397b39f3b3421)
在继承中需要注意,需要调用super()方法继承父类的构造函数。super()在使用过程中需要注意以下两点。
1)在访问this之前一定要调用super()。
2)如果不调用super(),可以让子类构造函数返还一个对象。
同样在继承中静态成员也可以被继承,因为静态成员属于类自身,所以它的继承也是类本身的继承,实例化对象不能继承到静态成员,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_02.jpg?sign=1738883653-QnbDPt6jF0aYeJHEvr57ulLDLOVOrM2E-0-5b566cee5d785371893b1913910f2ef0)
上述代码中可以看出,静态属性可以被子类所继承,但是如果是子类的实例化对象则不能被继承到。