es6新增class关键字使用方法详解。
通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
实例讲解:
es5的定义类方法:
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的定义类方法:
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实现类的继承方法:
//传统的继承的写法。
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关键字。
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来调用父级的方法。