JavaScript继承(ES5和ES6)

             ES5继承实质:先创建实例对象this,再将父类方法添加到this上面。    

             ES6继承实质:先创造父类的实例对象this,用子类的构造函数修改this.

      参阅ES5各种继承的优缺点:https://www.jb51.net/article/113628.htm 
      参阅:https://blog.csdn.net/heyue_99/article/details/54932553

---------ES5的继承   ---》1.拷贝继承(浅,深)   2.Object.create()继承  3.(伪)类继承

一:拷贝实现继承

1.浅拷贝实现继承----只针对值类型

var  p={

               name:'Owen',

                age:22

                        }

      var c={

               language:'HTML'

           }

   function  extend(p,c){

        var c=c||{};

        for(var prop in p){

                c[prop]=p[prop]

               }   

        }

extend(p,c)//--->c={ language:'HTML',name:'Owen',age:22}

1.深拷贝(递归)----针对引用类型

      var  p={

               name:'Owen',

                age:22,

                address:{home:'xxxxx',office:'yyyy'},

                 schools:['小学','大学'] 

      }

      var c={

               language:'HTML'

           }

   function  extendDeeply(p,c){

        var c=c||{};

        for(var prop in p){

               if(typeof  p[prop]==='object'){

                         c[prop]=(p[prop].constructor ===Array)?[]:{};

                              extendDeeply(p[prop],c[prop]) ;  

                     }else{

                          c[prop]=p[prop]

                      }

               }   

        }

extendDeeply(p,c)//--->c={ language:'HTML',name:'Owen',age:22,address:{home:'xxxxx',office:'yyyy'}, schools:['小学','大学'] }

3.构造函数拷贝实现继承---call

       function P(){

         this.name='Owen';

         this.address = {home:'xxxxx',office:'yyyy'};

       }

      function C(){

          P.call(this);//把父类的实例成员调用过来

         this.language = 'java';

     }

   var c=new C();

        c.name;//'Owen' 

       c.address//{home:'xxxxx',office:'yyyy'};

二,对象式Object.create()继承

       浏览器内置的继承create():在__proto__继承的

         var chid= Object.create(parent)

         var chid = Object.create(parent,{age:{value:20},salary:{value:1000}})

    实现原理:

      var p ={name:"cj"};

function myCreate(p){

      var ins ;

        function F(){};

        F.prototype = p;

         ins=new F();

         return  ins;

}

三,(伪)类继承(伪类)

ES5继承的本质:先创建实例对象this,再将父类方法添加到this上面。 

思路:创建父类 创建子类 建立关系 通用继承方法与super

判断原型---hasOwnProperty() isPrototypeOf(f) Object.getPrototypeOf(f)

建立关系主要有几种:

    1.直接关系---C.prototype=P.prototype//子的东西会暴露给父,不推荐

    2.C.prototype=new P();//每次创建对象会浪费内存,不推荐

    3.构建一个中间函数//推荐

    function F(){};

     F.prototype=P.prototype;

     var f=new F();

     C.prototype=f;

实现继承的步骤:如下4步

//1.建立父类,构造函数里写属性,它的prototype上写共用属性,以及方法

   function P(){//父类,(其实只是一个构造函数 出来的 伪类)

          this.name='Owen';

          this.address = {home:'xxxxx',office:'yyyy'};

}

    P.prototype.headCount = 1;

    P.prototype.eat=function(){

        console.log("eating...")

    }

//2.创建子类

   function C(pname,page,title){

      P.apply(this,arguments);

}

//3.0继承关系和constructor修正

   C.prototype=Object.create(P.prototype);//继承父,这里C.prototype.constructor指向父的原型对象P.prototype

   C.prototype.constructor=C;//这里C.prototype.constructor指向回自己的原型对象C.prototype

//3.1通用继承方法与super(用来取代上面的那个3.0)

function createEx(C,P);

function createEx(C,P){

       function F(){};

      F.prototype=P.prototype;

  C.prototype=new F();

  C.prototype.construtor=C;

  C.super=C.base=P.prototype;//注意 super是java的方法,base是C#的方法

}

//4.给子类添加成员(一定要放在3后面的,如果放在3前面,会被重写)

 C.prototype.language="HTML";

C.work=function(){

   console.log("writing code in " +this.language);

  C.base.eat();//--跟super 实现子调用父的东西

}

-------------ES6继承--使用class

ES6继承实质:先创造父类的实例对象this,用子类的构造函数修改this.

  class P{

      constructor(name){

          this.name=name;

         this.colors=["green","red"]

      }

     sayName(){console.log(this.name) }

}

class C extends P{

      constructor(name,age){

            super(name);//super调用父类的方法,会绑定子类的this.

                  this.age=age;

        }

       sayAge(){return  this.age; }

}

var  c=new C("hello",29);

console.log(c);

猜你喜欢

转载自blog.csdn.net/wenmin1987/article/details/81223088