ES6 更易于继承的类语法的使用
和其它面向对象编程语言一样,ES6正式定义了class类以及extend继承语法糖,并且支持静态、派生、抽象、迭代、单例等,而且根据ES6的新特性衍生出很多有趣的用法。
一、类的基本定义
基本所有面向对象的语言都支持类的封装与继承,那什么是类?
类是面向对象程序设计的基础,包含数据封装、数据操作以及传递消息的函数。类的实例称为对象。
ES5之前通过函数来模拟类的实现如下:
//构造函数
functionPerson(name){
this.name=name;
}
//原型上的方法
Person.prototype.sayName=function(){
console.log(this.name);
};
//new一个实例
varfriend=newPerson("Jenny");
friend.sayName();//Jenny
console.log(friendinstanceofPerson);//true
console.log(friendinstanceofObject);//true
总结来说,定义一个类的思路如下:
1.需要构造函数封装数据
2.在原型上添加方法操作数据,
3.通过New创建实例
ES6使用class关键字定义一个类,这个类有特殊的方法名[[Construct]]定义构造函数,在new创建实例时调用的就是[[Construct]],示例如下:
/*ES6*/
//等价于letPerson=class{
classPerson{
//构造函数
constructor(name){
this.name=name;
}
//等价于Person.prototype.sayName
sayName(){
console.log(this.name);
}
}
console.log(typeofPerson);//function
console.log(typeofPerson.prototype.sayName);//function
letfriend=newPerson("Jenny");
friend.sayName();//Jenny
console.log(friendinstanceofPerson);//true
console.log(friendinstanceofObject);//true
上面的例子中class定义的类与自定义的函数模拟类功能上貌似没什么不同,但本质上还有很大差异的:
- 函数声明可以被提升,但是class类声明与let类似,不能被提升;
- 类声明自动运行在严格模式下,“usestrict”;
- 类中所有方法都是不可枚举的,enumerable为false。
二、更灵活的类
类和函数一样,是JavaScript的一等公民(可以传入函数、从函数返回、赋值),并且注意到类与对象字面量还有更多相似之处,这些特点可以扩展出类更灵活的定义与使用。
2.1拥有访问器属性
对象的属性有数据属性和访问属性,类中也可以通过get、set关键字定义访问器属性:
classPerson{
constructor(name){
this.name=name;
}
getvalue(){
returnthis.name+this.age
}
setvalue(num){
this.age=num
}
}
letfriend=newPerson("Jenny");
//调用的是setter
friend.value=18
//调用的是getter
console.log(friend.value)//Jenny18
2.2可计算的成员名称
类似ES6对象字面量扩展的可计算属性名称,类也可以用[表达式]定义可计算成员名称,包括类中的方法和访问器属性:
letmethodName='sayName'
classPerson{
constructor(name){
this.name=name;
}
[methodName+'Default'](){
console.log(this.name);
}
get[methodName](){
returnthis.name
}
set[methodName](str){
this.name=str
}
}
letfriend=newPerson("Jenny");
//方法
friend.sayNameDefault();//Jenny
//访问器属性
friend.sayName='lee'
console.log(friend.sayName)//lee
想进一步熟悉对象新特性可参考:【ES6】对象的新功能与解构赋值
2.3定义默认迭代器
ES6中常用的集合对象(数组、Set/Map集合)和字符串都是可迭代对象,如果类是用来表示值这些可迭代对象的,那么定义一个默认迭代器会更有用。
ES6通过给Symbol.iterator属性添加生成器的方式,定义默认迭代器:
classPerson{
constructor(name){
this.name=name;
}
*[Symbol.iterator](){
for(letitemofthis.name){
yielditem
}
}
}
varabbrName=newPerson(newSet(['j','j','e','e','n','y','y','y',]))
for(letxofabbrName){
console.log(x);//jeny
}
console.log(...abbrName)//jeny
定义默认迭代器后类的实例就可以使用for-of循环和展开运算符(...)等迭代功能。
对以上迭代器内容感到困惑的可参考:【ES6】迭代器与可迭代对象
2.4作为参数的类
类作为"一等公民”可以当参数使用传入函数中,当然也可以从函数中返回:
functioncreateClass(className,val){
returnnewclassName(val)
}
letperson=createClass(Person,'Jenny')
console.log(person)//Person{name:'Jenny'}
console.log(typeofperson)//object
2.5创建单例
使用类语法创建单例的方式通过new立即调用类表达式:
letsingleton=newclass{
constructor(name){
this.name=name;
}
}('Jenny')
console.log(singleton.name)//Jenny
这里先创建匿名类表达式,然后new调用这个类表达式,并通过小括号立即执行,这种类语法创建的单例不会在作用域中暴露类的引用。
三、类的继承
回顾ES6之前如何实现继承?常用方式是通过原型链、构造函数以及组合继承等方式。
ES6的类使用熟悉的extends关键字指定类继承的函数,并且可以通过surpe()方法访问父类的构造函数。
例如继承一个Person的类:
classFriendextendsPerson{
constructor(name,phone){
super(name)
this.phone=phone
}
}
letmyfriend=newFriend('lee',2233)
console.log(myfriend)//Friend{name:'lee',phone:2233}
Friend继承了Person,术语上称Person为基类,Friend为派生类。
需要注意的是,surpe()只能在派生类中使用,它负责初始化this,所以派生类使用this之前一定要用surpe()。
3.1继承内建对象
ES6的类继承可以继承内建对象(Array、Set、Map等),继承后可以拥有基类的所有内建功能。例如:
classMyArrayextendsArray{
}
letarr=newMyArray(1,2,3,4),
subarr=arr.slice(1,3)
console.log(arr.length)//4
console.log(arrinstanceofMyArray)//true
console.log(arrinstanceofArray)//true
console.log(subarrinstanceofMyArray)//true
注意到上例中,不仅arr是派生类MyArray的实例,subarr也是派生类MyArray的实例,内建对象继承的实用之处是改变返回对象的类型。
浏览器引擎背后是通过[Symbol.species]属性实现这一行为,它被用于返回函数的静态访问器属性,内建对象定义了[Symbol.species]属性的有Array、ArrayBuffer、Set、Map、Promise、RegExp、Typedarrays。
3.2继承表达式的类
目前extends可以继承类和内建对象,但更强大的功能从表达式导出类!
这个表达式要求可以被解析为函数并具有[[Construct]]属性和原型,示例如下:
functionSup(val){
this.value=val
}
Sup.prototype.getVal=function(){
return'hello'+this.value
}
classDerivedextendsSup{
constructor(val){
super(val)
}
}
letder=newDerived('world')
console.log(der)//Derived{value:'world'}
console.log(der.getVal())//helloworld
3.3只能继承的抽象类
ES6引入new.target元属性判断函数是否通过new关键字调用。类的构造函数也可以通过new.target确定类是如何被调用的。
可以通过new.target创建抽象类(不能实例化的类),例如:
classAbstract{
constructor(){
if(new.target===Abstract){
thrownewError('抽象类(不能直接实例化)')
}
}
}
classInstantiableextendsAbstract{
constructor(){
super()
}
}
//letabs=newAbstract()//Error:抽象类(不能直接实例化)
letabs=newInstantiable()
console.log(absinstanceofAbstract)//true
虽然不能直接使用Abstract抽象类创建实例,但是可以作为基类派生其它类。
四、类的静态成员
ES6使用static关键字声明静态成员或方法。在类的方法或访问器属性前都可以使用static,唯一的限制是不能用于构造函数。
静态成员的作用是某些类成员的私有化,及不可在实例中访问,必须要直接在类上访问。
classPerson{
constructor(name){
this.name=name;
}
staticcreate(name){
returnnewPerson(name);
}
}
letbeauty=Person.create("Jenny");
//beauty.create('lee')//TypeError
如果基类有静态成员,那这些静态成员在派生类也可以使用。
例如将上例的Person作为基类,派生出Friend类并使用基类的静态方法create():
classFriendextendsPerson{
constructor(name){
super(name)
}
}
varfriend=Friend.create('lee')
console.log(friendinstanceofPerson)//true
console.log(friendinstanceofFriend)//false
可以看出派生类依然可以使用基类的静态方法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。