zoukankan      html  css  js  c++  java
  • 用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来调用父级的方法。

      

  • 相关阅读:
    CSS基础(二)-- CSS选择器之ID选择器
    CSS基础(一)-- CSS的存在形式以及优先级
    HTML--Boby部分之fieldset标签
    HTML--Boby部分之label标签
    HTML--Boby部分之表格
    HTML--Boby部分之<img>标签
    rpm和yum的用法
    网络模型
    内存扩容
    磁盘介绍
  • 原文地址:https://www.cnblogs.com/xinggood/p/6531301.html
Copyright © 2011-2022 走看看