![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=1738885800-sKmug2RhHjn26KsFmhP1RcAGHtRrxU7O-0-6e4880ddfd5e8d9b9ff04e27e9896f7e)
在ES6标准中提供class关键字来定义类,在写法上变得更加简洁,语义化更强,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_04.jpg?sign=1738885800-7JtSQ78OjwxVF9bSQitKSuMx10gF4Tas-0-dd161d750c5e402b35669b0234dcc791)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_01.jpg?sign=1738885800-AhhHhb5lscqbfeTJgfb8opiJhEXpD3KM-0-0c8dd76056c2ca4af9409fdf384c7f55)
上述写法中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=1738885800-jQ2U3F8AadnVuMOzltMH4LYNonZLbBlx-0-a00bc4b7206a2ae9e5c44e0164882a4f)
1.6.2 静态成员
在ES5标准中静态成员,可以通过如下方式实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_03.jpg?sign=1738885800-pI0QJVX1KFaaX886a2d9fjaTrpYZivzH-0-7b9838cf756cc1dc0b279ad0cbdce4fc)
在ES6标准中提供static关键字来声明静态成员:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_01.jpg?sign=1738885800-bNxpIl9o8yNLoMYyS94UqdusbQFk59AP-0-4b39ccdff822545e784b7edf192b9b08)
1.6.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_02.jpg?sign=1738885800-DXl3OUqolJg83fQw8EEMkWgdCHC4yg8A-0-0fd241fedea39ac7fbc4241859982bdd)
上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较烦琐,针对这种情况ES6提供extends关键字来实现类的继承,具体代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_03.jpg?sign=1738885800-rNaOuiASOTDFRs29WA7U5N2dNn5nucOK-0-94dd3ec383e90fd27d19af83f6ecdc07)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_01.jpg?sign=1738885800-AaoEOrEcT2xY1fgcFB7G1YAM2W6xqK6S-0-a1c692eadf2a2deb6f3ffec4d85e6265)
在继承中需要注意,需要调用super()方法继承父类的构造函数。super()在使用过程中需要注意以下两点。
1)在访问this之前一定要调用super()。
2)如果不调用super(),可以让子类构造函数返还一个对象。
同样在继承中静态成员也可以被继承,因为静态成员属于类自身,所以它的继承也是类本身的继承,实例化对象不能继承到静态成员,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_02.jpg?sign=1738885800-LthGC5uDOeW8JdlxK717IMszGoNwg1y1-0-8ffde149e9d65ac9ff68dd962f410faa)
上述代码中可以看出,静态属性可以被子类所继承,但是如果是子类的实例化对象则不能被继承到。