用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来调用父级的方法。

  

posted @   行果  阅读(1688)  评论(0编辑  收藏  举报
欢迎阅读『用es6的class关键字定义一个类』
点击右上角即可分享
微信分享提示