这篇文章主要介绍了es6的class有什么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6的class有什么用文章都会有所收获,下面我们一起来看看吧。 es6的class关键字用于快速地定义“类”;class的本质是function,它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。提升class不存在变量提升,类的所有方法都定义在类的prototype属性上面,在类的实例上面调用方法,其实就是调用原型上的方法。es6引入了Class(类)这个概念,class关键字用于快速地定义“类”。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。实际上背后依然使用的 原型和构造函数的概念。严格模式 不需要使用use strict因为只要代码写在类和模块内,就只能使用严格模式。提升class不存在变量提升 (由于继承有关 必须确保子类在父类之后定义)。类的所有方法都定义在类的prototype属性上面,在类的实例上面调用方法,其实就是调用原型上的方法 原型方法可以通过实例对象调用,但不能通过类名调用,会报错实际上 class只是一个语法糖 是构造函数的另一种写法(语法糖 是一种为避免编码出错 和提高效率编码而生的语法层面的优雅解决方案 简单说 一种便携写法 而已)看代码
classPerson{ } console.log(typeofPerson)//funciton console.log(Person.prototype.constructor===Person)//true
使用看代码
用法和使用 构造函数一样 通过new 来生成对象实例
classperson2{ } letjson=newperson2;
定义在constructor 内的属性和方法 即调用在this上 属于实例属性和方法 否则属于原型属性和方法
classPerson{ constructor(name){ this.name=name//constructor内定义的方法和属性是实例对象自己的, } say(){//而constructor外定义的方法和属性则是所有实例对象可以共享的注意! console.log('hello') } } letjon=newPerson() jon.hasOwnPrototype('name')//true jon.hasOwnPrototype('say')//false
不需要通过实例对象,可以直接通过类来调用的方法,其中的 this 指向类本身
classPerson{ staticdoSay(){ this.say() } staticsay(){ console.log('hello') } } Person.doSay()//hello *********************************************************************************************** //静态方法可以被子类继承 classSubextendsPerson{ } Sub.doSay()//hello //静态方法可以通过类名调用,不能通过实例对象调用,否则会报错 classPerson{ staticsum(a,b){ console.log(a+b) } } varp=newPerson() Person.sum(1,2)//3 p.sum(1,2)//TypeErrorp.sumisnotafunction
name 属性返回了类的名字 即紧跟在class后面的名字。
classPerson{ } Person.name//Person
类的方法内部如果含有this 坑儿 一但单独使用该方法 很可能就会报错
如果 this指向不对 1使用箭头函数 2在构造方法中绑定this
classPerson{ getname(){ return'getter' } setname(val){ console.log('setter'+val) } } letjon=newPerson() jon.name='jon'//setterjon jon.name//getter
class Person {}
class Person {}
// TypeError Identifier ‘Person’ has already been declaredconstructor 方法constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。
classPerson{ constructor(x,y){ this.x=x//默认返回实例对象this this.y=y } toString(){ console.log(this.x+','+this.y) } }
每一个类必须要由一个constructor 如果没有显示声明 js引擎会自动添加一个空的构造函数
classperson3{ } //等于 classperson3{ constructor(){} }
注意
在类中声明方法的时候,方法前不加 function 关键字
方法之间不要用逗号分隔,否则会报错
类的内部所有定义的方法,都是不可枚举的(non-enumerable)注意 与es5一样 实例的属性除非 显示定义在其本身(即this对象)上 否则都是定义在原型上面
classPoint{ constructor(x,y){ this.x=x; this.y=y; } toString(){ return`this.x+this.y`; } } varpoint=newPoint(); point.toString()//(2,3) point.hasOwnProperty("x")//true point.hasOwnProperty("y")//true在这x&&y都是实例对象point自身的属性(因为定义在this变量上)//所以返回true point.hasOwnProperty("toString")//falsetoString是原型对象的属性(因为定义在Point类上)//所以返回false point._proto_.hasOwnProperty("toString")//true //加两个实例 varp1=newPoint(); varp2=newPoint(); p1._proto_===p2._proto_//true这个不建议使用 //上面代码中p1和p2都是point的实例他们的原型都是Point.prototype所以_proto_属性是相等的 //即是说可以通过实例的_proto_属性为"类"添加方法
super关键字用于访问和调用 父类上的函数,可以调用父类的构造函数 也可以调用父类的普通函数
classFather{ constructor(surname){ this.surname=surname } say(){ console.log("你的名字"+this.surname)//你的名字锤子 } } //在这里子继承父类 classSonextendsFather{ constructor(surname,name){ super(surname) this.name=name } say(){ super.say() console.log('调用普通'+this.name)//调用普通铁的 } } varson=newSon('锤子',"铁的") son.say() console.log(son)//打印{surname:"锤子",name:"铁的" //在子类的构造函数如果使用super调用父类的构造函数必须写在this之前 //还可以调用父类的普通方法 //在es6中类没变量提升必须先定义才能通过实例化对象类里面的共有属性和方法通过this调用 //类里面的this代表什么 //constructor里面this指向实例对象 //方法里面this代表方法的调用者
继承即子承父业现实中 程序中子类可以继承父类中的一些 方法和属性
继承时面向对象的 一大特性 可以减少代码的编写 方便公共内容的抽取 关键字extends
classFather{ constructor(surname){ this.surname=surname } say(){//父级Father里面有一个方法say() console.log("你的名字"+this.surname) } } classSonextendsFather{//在这里Son继承了Father父级里面的方法关键字extends } varson=newSon('锤子')//new出来实例 son.say()//打印你的名字锤子
classPerson{ constructor(name,age){ //构造函数,接收一个name和age this.name=name this.age=age } say(){ //一个方法//注意类里面的方法不加function关键字方法与方法之间不用,号隔开 console.log("你好",this.name) } //....sayWhat(){}saySome(){} } varperson=newPerson('老王',44) //调用方法 person.say()//老王 //在类的实例上调用方法其实就是调用原型上的方法
与函数一样 calss 也可以使用表达式的形式定义 采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能类表达式(类定义)
类表达式可以是被命名的或匿名的
letPerson=class{ constructor(x,y){ this.x=x this.y=y } }
letPerson=classPerson{ constructor(x,y){ this.x=x this.y=y } } constMycalss=classMe{ getClassName(){ returnMe.name; } };//这里用表达式(即赋值变量一个) //注意!这个类的名字是Mycalss而不是MeMe只在Class的内部代码可用指代当前类 letinst=newMycalss(); inst.getClassName()//Me Me.name//报错Me只在Class内部有定义
letperson=newclass{ constructor(name){ this.name=this.name; } sayname(){ console.log(this.name); } }("常东东")//这段代码中class是立即执行的实例
classAnimal{//class定义了一个“类” constructor(){ this.type='animal'//有一个constructor方法,这就是构造方法//this关键字则代表实例对象 }//constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的注意! says(say){ console.log(this.type+'says'+say) } } letanimal=newAnimal() animal.says('hello')//animalsayshello classCatextendsAnimal{//通过extends关键字实现继承//定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。 constructor(){ super()//super关键字它指代父类的实例(即父类的this免费云主机、域名对象)子类必须在constructor方法中调用super方法,否则新建实例时会报错。 this.type='cat'//这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。 } } letcat=newCat() cat.says('hello')//catsayshello
关于“es6的class有什么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es6的class有什么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。
这篇文章主要讲解了“JavaScript展开运算符的方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript展开运算符的方式有哪些”吧!由三个点 ( …) 表免费云主机、域名示,Java…