用es6的class关键字定义一个类
es6新增class关键字使用方法详解。
通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
实例讲解:
es5的定义类方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | function extend(obj1,obj2){ //合并对象属性的方法 for ( var attr in obj2){ obj1[attr]=obj2[attr]; } }; function Person(opt){ this .settings = { 'name' : 'jack' , 'age' : '30' , 'sex' : 'male' , 'eye' : 'Single eyelid' , //Double-fold eyelids 'Height' : 'tall' , //or Medium 'Weight' : 'fat' , //or thin } extend( this .settings,opt); }; Person.prototype.message= function (){ console.log( this .settings.name+ "今年" + this .settings.age+ '岁。' + '性别:' + this .settings.sex+ "。特点:" + this .settings.eye+ "," + this .settings.Height+ "," + this .settings.Weight); }; var p1= new Person({}); p1.message(); console.log(p1); var p2 = new Person({ 'name' : 'lily' , 'age' : '23' , 'sex' : 'femal' , 'eye' : 'Double-fold eyelids' , //Double-fold eyelids 'Height' : 'Medium' , //or Medium 'Weight' : 'Medium' , //or thin }); p2.message(); console.log(p1.__proto__ === p2.__proto__) //true; |
es6的定义类方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | class Person{ constructor(opt) { this .settings={ 'name' : 'jack' , 'age' : '30' , 'sex' : 'male' , 'eye' : 'Single eyelid' , //Double-fold eyelids 'Height' : 'tall' , //or Medium 'Weight' : 'fat' , //or thin }; extend( this .settings,opt); } message(){ console.log( this .settings.name+ "今年" + this .settings.age+ '岁。' + '性别:' + this .settings.sex+ "。特点:" + this .settings.eye+ "," + this .settings.Height+ "," + this .settings.Weight); } } var p1= new Person({}); p1.message(); console.log(p1); var p2 = new Person({ 'name' : 'lily' , 'age' : '23' , 'sex' : 'femal' , 'eye' : 'Double-fold eyelids' , //Double-fold eyelids 'Height' : 'Medium' , //or Medium 'Weight' : 'Medium' , //or thin }); p2.message(); console.log(p1.__proto__ === p2.__proto__) //true; //两个原型链是一样的说明是指向的同一个内存。 |
如何实现类的继承?
es5实现类的继承方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //传统的继承的写法。 function Pchild(opt){ Person.call( this ,opt); //属性通过call:this方式继承。 } extend(Pchild.prototype,Person.prototype ); //方法通过extend继承。 Pchild.prototype.languge= function (){ console.log( this .settings.name+ 'come from' + this .settings.country+ 'speak:' + this .settings.language); } var c1 = new Pchild({ 'name' : 'licy' , 'age' : '23' , 'sex' : 'femal' , 'eye' : 'Double-fold eyelids' , //Double-fold eyelids 'Height' : 'Medium' , //or Medium 'Weight' : 'Medium' , //or thin 'country' : 'canada' , 'language' : 'English' }); c1.message(); c1.languge() console.log(c1); |
es6实现继承的方法:使用extends关键字。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class Pchild extends Person{ languge(){ console.log( this .settings.name+ '.come from:' + this .settings.country+ 'speak:' + this .settings.language+ "后面是继承父级的方法" ); super .message(); } } var c1 = new Pchild({ 'name' : 'licy' , 'age' : '23' , 'sex' : 'femal' , 'eye' : 'Double-fold eyelids' , //Double-fold eyelids 'Height' : 'Medium' , //or Medium 'Weight' : 'Medium' , //or thin 'country' : 'canada' , 'language' : 'English' }); c1.message(); c1.languge() console.log(c1); console.log(p2); |
es6的继承使用extends关键字来继承父级,使用super来调用父级的方法。
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步