- React工程师修炼指南
- 开课吧组编 高少云 莫涛 韩明洋 余维海编著
- 611字
- 2025-02-27 03:27:47
1.6 类class
1.6.1 类的基本语法
在ES5标准中通过构造函数来模拟类的功能,一般会定义一个构造函数,把一类功能做封装,通过new和运算符来调用,比如封装“人”类如下:

在ES6标准中提供class关键字来定义类,在写法上变得更加简洁,语义化更强,代码如下:


上述写法中Person类的类型同样是函数类型,可以通过typeof来查看,this同样指向实例化对象zhangsan。fn函数同样是在实例化对象原型上。创建属性的时候可以在构造函数里直接创建,同样也支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get,创建setter的时候需要用关键字set。例如创建age属性:

1.6.2 静态成员
在ES5标准中静态成员,可以通过如下方式实现:

在ES6标准中提供static关键字来声明静态成员:

1.6.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下:

上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较烦琐,针对这种情况ES6提供extends关键字来实现类的继承,具体代码如下:


在继承中需要注意,需要调用super()方法继承父类的构造函数。super()在使用过程中需要注意以下两点。
1)在访问this之前一定要调用super()。
2)如果不调用super(),可以让子类构造函数返还一个对象。
同样在继承中静态成员也可以被继承,因为静态成员属于类自身,所以它的继承也是类本身的继承,实例化对象不能继承到静态成员,代码如下:

上述代码中可以看出,静态属性可以被子类所继承,但是如果是子类的实例化对象则不能被继承到。