本篇内容介绍了“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类怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!