用es6的class关键字定义一个类

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

  

原文地址:https://www.cnblogs.com/xinggood/p/6531301.html