- React工程师修炼指南
- 开课吧组编 高少云 莫涛 韩明洋 余维海编著
- 611字
- 2021-04-14 11:28:42
1.6 类class
1.6.1 类的基本语法
在ES5标准中通过构造函数来模拟类的功能,一般会定义一个构造函数,把一类功能做封装,通过new和运算符来调用,比如封装“人”类如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_03.jpg?sign=1739017624-becsZ4AyjgUwU2LgMba3ZDtsDeHGuU2t-0-374a0150b10aac249aee5791f0e950ec)
在ES6标准中提供class关键字来定义类,在写法上变得更加简洁,语义化更强,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_04.jpg?sign=1739017624-b7rDV5ZHXqHSpCCnquLj13zIYD1dZWXS-0-9b971835a97e74eb7d7f3937beb70106)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_01.jpg?sign=1739017624-XwpuKE9o4tRfj01PwGxGBKjbNTYA0MAv-0-2054fcbf8538d174e13c01276b73e40d)
上述写法中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=1739017624-3lv4gXVVU9jelS8RZJ9yOCwSrNDTgcb3-0-59558e875dcfea9678e78bf2657c9abd)
1.6.2 静态成员
在ES5标准中静态成员,可以通过如下方式实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/32_03.jpg?sign=1739017624-OnTHak8dbejM6dJjD3BRAMz9soQVfqhx-0-3ca288aba09f1f9e553e08d3f72804a2)
在ES6标准中提供static关键字来声明静态成员:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_01.jpg?sign=1739017624-RMqdx4VhLDI18cnfLnscvk8K4GV29hQg-0-fbfa5d578cf27c74d220b3761ae51d13)
1.6.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_02.jpg?sign=1739017624-RPxRqVsUX7Yjpk1JcruamXFIwkezDBWD-0-16451bc15a5dc6c99abb56180e2a1882)
上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较烦琐,针对这种情况ES6提供extends关键字来实现类的继承,具体代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/33_03.jpg?sign=1739017624-A5hxAoLit11ppWssA7hDnw53mMm5UB7g-0-05fc397bb35a61345961cfa11c990b92)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_01.jpg?sign=1739017624-nYMzENfGjwoNt1MDjANE32d5HHslWW4t-0-9646ad16ed7d0cde42b955f85a890bbe)
在继承中需要注意,需要调用super()方法继承父类的构造函数。super()在使用过程中需要注意以下两点。
1)在访问this之前一定要调用super()。
2)如果不调用super(),可以让子类构造函数返还一个对象。
同样在继承中静态成员也可以被继承,因为静态成员属于类自身,所以它的继承也是类本身的继承,实例化对象不能继承到静态成员,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/34_02.jpg?sign=1739017624-WJ100emFFCxjXON7rEu2gnD6pCPgGiP6-0-2c53fa6fd96c0d43e2795f2272e720a3)
上述代码中可以看出,静态属性可以被子类所继承,但是如果是子类的实例化对象则不能被继承到。