ES6的Class类怎么使用
本篇内容介绍了“ES6的Class类怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类,class 的本质是 function,它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类定义
类表达式可以为匿名或命名。
//匿名类letExample=class{constructor(a){this.a=a;}}//命名类letExample=classExample{constructor(a){this.a=a;}}
类声明
classExample{constructor(a){this.a=a;}}
注意要点:不可重复声明。
classExample{}classExample{}//UncaughtSyntaxError:Identifier'Example'hasalreadybeen//declaredletExample1=class{}classExample{}//UncaughtSyntaxError:Identifier'Example'hasalreadybeen//declared
注意要点
类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
类中方法不需要 function 关键字。
方法间不能加分号。
newExample();classExample{}类的主体
属性
prototype
ES6 中,prototype 仍旧存在,虽然可以直接自类中定义方法,但是其实方法还是定义在 prototype 上的。 覆盖方法 / 初始化时添加方法
Example.prototype={//methods}
添加方法
Object.assign(Example.prototype,{//methods})
静态属性
静态属性:class 本身的属性,即直接定义在类内部的属性( Class.propname ),不需要实例化。 ES6 中规定,Class 内部只有静态方法,没有静态属性。
classExample{//新提案statica=2;}//目前可行写法Example.b=2;
公共属性
classExample{}Example.prototype.a=2;
实例属性
实例属性:定义在实例对象( this )上的属性。
classExample{a=2;constructor(){console.log(this.a);}}
name 属性
返回跟在 class 后的类名(存在时)。
letExample=classExam{constructor(a){this.a=a;}}console.log(Example.name);//ExamletExample=class{constructor(a){this.a=a;}}console.log(Example.name);//Example方法
constructor 方法
constructor 方法是类的默认方法,创建类的实例化对象时被调用。
classExample{constructor(){console.log('我是constructor');}}newExample();//我是constructor
返回对象
classTest{constructor(){//默认返回实例对象this}}console.log(newTest()instanceofTest);//trueclassExample{constructor(){//指定返回对象returnnewTest();}}console.log(newExample()instanceofExample);//false
静态方法
classExample{staticsum(a,b){console.log(a+b);}}Example.sum(1,2);//3
原型方法
classExample{sum(a,b){console.log(a+b);}}letexam=newExample();exam.sum(1,2);//3
实例方法
classExample{constructor(){this.sum=(a,b)=>{console.log(a+b);}}}类的实例化
new
class 的实例化必须通过 new 关键字。
classExample{}letexam1=Example();//ClassconstructorExamplecannotbeinvokedwithout'new'实例化对象
共享原型对象
classExample{constructor(a,b){this.a=a;this.b=b;console.log('Example');}sum(){returnthis.a+this.b;}}letexam1=newExample(2,1);letexam2=newExample(3,1);console.log(exam1._proto_==exam2._proto_);//trueexam1._proto_.sub=function(){returnthis.a-this.b;}console.log(exam1.sub());//1console.log(exam2.sub());//2
decorator
decorator 是一个函数,用来修改类的行为,在代码编译时产生作用。
类修饰一个参数
第一个参数 target,指向类本身。
functiontestable(target){target.isTestable=true;}@testableclassExample{}Example.isTestable;//true
多个参数——嵌套实现
functiontestable(isTestable){returnfunction(target){target.isTestable=isTestable;}}@testable(true)classExample{}Example.isTestable;//true
实例属性
上面两个例子添加的是静态属性,若要添加实例属性,在类的 prototype 上操作即可。
方法修饰3个参数:target(类的原型对象)、name(修饰的属性名)、descriptor(该属性的描述对象)。
classExample{@writablesum(a,b){returna+b;}}functionwritable(target,name,descriptor){descriptor.writable=false;returndescriptor;//必须返回}
修饰器执行顺序
由外向内进入,由内向外执行。
classExample{@logMethod(1)@logMthod(2)sum(a,b){returna+b;}}functionlogMethod(id){console.log('evaluatedlogMethod'+id);return(target,name,desctiptor)=>console.log('excutedlogMethod'+id);}//evaluatedlogMethod1//evaluatedlogMethod2//excutedlogMethod2//excutedlogMethod1封装与继承
getter / setter
定义
classExample{constructor(a,b){this.a=a;//实例化时调用set方法this.b=b;}geta(){console.log('getter');returnthis.a;}seta(a){console.log('setter');this.a=a;//自身递归调用}}letexam=newExample(1,2);//不断输出setter,最终导致RangeErrorclassExample1{constructor(a,b){this.a=a;this.b=b;}geta(){console.log('getter');returnthis._a;}seta(a){console.log('setter');this._a=a;}}letexam1=newExample1(1,2);//只输出setter,不会调用getter方法console.log(exam._a);//1,可以直接访问
getter 不可单独出现
classExample{constructor(a){this.a=a;}geta(){returnthis.a;}}letexam=newExample(1);//UncaughtTypeError:Cannotsetproperty//aof#whichhasonlyagetter
getter 与 setter 必须同级出现
classFather{constructor(){}geta(){returnthis._a;}}classChildextendsFather{constructor(){super();}seta(a){this._a=a;}}lettest=newChild();test.a=2;console.log(test.a);//undefinedclassFather1{constructor(){}//或者都放在子类中geta(){returnthis._a;}seta(a){this._a=a;}}classChild1extendsFather1{constructor(){super();}}lettest1=newChild1();test1.a=2;console.log(test1.a);//2extends
通过 extends 实现类的继承。
classChildextendsFather{...}
super
子类 constructor 方法中必须有 super ,且必须出现在 this 之前。
classFather{constructor(){}}classChildextendsFather{constructor(){}//or//constructor(a){//this.a=a;//super();//}}lettest=newChild();//UncaughtReferenceError:Mustcallsuper//constructorinderivedclassbeforeaccessing'this'orreturning//fromderivedconstructor
调用父类构造函数,只能出现在子类的构造函数。
classFather{test(){return0;}statictest1(){return1;}}classChildextendsFather{constructor(){super();}}classChild1extendsFather{test2(){super();//UncaughtSyntaxError:'super'keywordunexpected//here}}
调用父类方法, super 作为对象,在普通方法中,指向父类的原型对象,在静态方法中,指向父类
classChild2extendsFather{constructor(){super();//调用父类普通方法console.log(super.test());//0}statictest3(){//调用父类静态方法returnsuper.test1+2;}}Child2.test3();//3注意要点
不可继承常规对象。
varFather={//...}classChildextendsFather{//...}//UncaughtTypeError:Classextendsvalue#
“ES6的Class类怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。