来定义类作为构造函数和原型链的语法糖。类的定义有两种方式classStudent{}varStudent=class{}有些浏览器可能无法解析es6及以上的语法。这时候就需要使用babel将代码解析成浏览器可识别的语法。定义类的语法是通过babel编译后,就是function定义的构造函数。class和constructor是一样的,通过new关键字创建,原型属性classStudent{}varstudent=newStudent()console.log(Student.prototype)console.log(Student.prototype.constructor)console。log(student.__proto__===Student.prototype)console.log(studentinstanceofStudent)console.log(typeofStudent)执行结果如下类的方法构造方法通过构造函数定义类的构造方法,并通过new关键字创建类构造函数classStudent{constructor(name,age){this.name=namethis.age=age}}varstudent=newStudent('alice',18)console.log(student)执行结果如下,创建Student实例对象babel解析结果如下实例方法实例方法是挂载在类原型(构造函数)上的方法,所有实例对象都可以使用并且不会在每个实例对象c上保存文件lassStudent{constructor(name,age){this.name=namethis.age=age}studying(){console.log(`${this.name}喜欢学习~`)}}varstudent=newStudent('kiki',16)console.log(student)student.studying()执行结果如下访问器方法访问器方法可以用来获取/修改类中的属性classStudent{constructor(){this.mainSubject='Chinese'}getsubject(){console.log('getsubject')returnthis.mainSubject}setsubjectt(value){console.log('修改专业')this.mainSubject=value}}varstudent=newStudent()console.log(student)student.mainSubject='Math'console.log(student)执行结果就是静态方法定义在类(构造函数)上,只能被类(构造函数)本身使用()执行结果如下:在继承类中实现继承比在构造函数中更简单,通过extends关键字可以实现两个类之间的继承关系classPerson{eating(){console.log('personeating')}}classStudentextendsPerson{}varstudent=newStudent()console.log(student)student.eating()执行结果如下如果要共享构造方法中的数据,需要用super来实现类Person{constructor(name,age){this.name=namethis.age=age}eating(){console.log('personeating')}}class学生扩展Person{constructor(name,age,stuNo){super(name,age)this.stuNo=stuNo}eating(){super.eating()console.log('studenteating')}}varstudent=newStudent('kiki',16,1)console.log(student)student.eating()执行结果继承内置类如下当我们需要对javascript内置函数做一些扩展时,可以继承内置类功能。例如,要补充数组,请添加一个返回数组中第一个元素的方法。classiArrayextendsArray{firstItem(){returnthis[0]}}letarr=newiArray(1,2,3)console.log(arr)console.log(arr.firstItem())执行结果混入javascript如下只允许单继承,不支持多父类。当子类想要获取多个父类的属性和方法时,可以自定义mixin来实现继承关系。functionmixinRunner(BaseClass){returnclassextendsBaseClass{running(){console.log('running')}}}functionmixinEater(BaseClass){returnclassextendsBaseClass{eating(){console.log('eating')}}}classPerson{}constStudent=mixinEater(mixinRunner(Person))conststudent=newStudent()student.running()student.eating()执行结果如下多态不同数据类型操作当执行相同的操作时,表现出来的行为是不一致的,这叫做多态性。functioncalcArea(foo){console.log(foo.getArea())}varcircle={radius:6,getArea(){returnthis.radius*3.14}}functionPerson(){this.getArea=function(){return20}}calcArea(circle)calcArea(newPerson())执行结果如下上面两次执行calcArea函数,传入参数为普通对象和实例对象,执行各自的getArea方法,最终得到的结果不是上面同样是ES6之类(类)的使用的具体介绍。关于高级js,开发者需要掌握的东西还是很多的。可以看看我写的其他博文,持续更新中~
