首页 > 技术文章 > js继承

yellowh 2017-08-31 16:42 原文

js原型链继承

           var Father = function(){
                       this.food = ["西瓜","饺子","苹果"];
                   }
                   Father.prototype.sayLikeFood = function(){
                       console.log(this.food);
                   }
                   function Son(){

                   }
                   //直接用原型链继承
                   Son.prototype = new Father();
                   //实例化对象
                   var zhangsan = new Son();
                   zhangsan.sayLikeFood();   //输出:["西瓜", "饺子", "苹果"]
                   zhangsan.food.push("菠萝");
                   zhangsan.sayLikeFood(); //输出:["西瓜", "饺子", "苹果", "菠萝"]

                   //在new一个其他的对象
                   var lisi = new Son();
                   lisi.sayLikeFood(); //输出:["西瓜", "饺子", "苹果", "菠萝"]

                   /*
                    * 
                    *    缺点:是直接使用原型链继承的方式,所以属性一旦发生改变,以后继承的属性也会改变
                    *
                    * 
                    */

js构造函数的继承

            function Father (oth){
                        this.food = ["西瓜", "饺子", "苹果"];
                        this.food.push(oth);
                        this.sayLikeFood = function(){
                                      console.log(this.food);
                                 }
                    }

                    // Father.prototype.sayLikeFood = function(){              //Uncaught TypeError: zhangsan.sayLikeFood is not a function
                    //     console.log(this.food);
                    // }

                    function Son(oth){
                        Father.call(this,oth); //构造函数继承,oth是子函数传递的形参
                    }
                    var zhangsan = new Son("菠萝");
                    zhangsan.sayLikeFood();

                     /*
                      *    
                      *     缺陷:用构造函数继承里面的函数不能够复用。
                      *
                      * 
                      */

js组合继承

           function Father(){
                      this.food = ["西瓜", "饺子", "苹果"];
                      
                  }
                  //对象的方法
                  Father.prototype.sayLikeFood = function(){
                      console.log(this.food);
                  }
                  //构造函数继承
                  function Son(oth){                          
                      Father.call(this,oth);     
                  } 
                  //原型链继承
                  Son.prototype = new Father(); 
                  //子对象的方法
                  Son.prototype.sayChildrenLikeFood = function(oth){
                      console.log("我最喜欢:"+oth);
                  }
                  //new 一个实例
                  var zhangsan = new Son("菠萝");

                  zhangsan.sayChildrenLikeFood("菠萝");  //输出:我最喜欢:菠萝   

                  zhangsan.food.push("菠萝");  
                  zhangsan.sayLikeFood();    //输出:["西瓜", "饺子", "苹果", "菠萝"]

                  //实例化一个对象
                  var lisi = new Son();

                  lisi.sayLikeFood();   //输出: ["西瓜", "饺子", "苹果"]
                  lisi.sayChildrenLikeFood("菠萝");  //输出:我最喜欢:菠萝   

                  /*
                   *    能够避免原型链继承的缺点:会改变所有的属性 
                   *    能够避免构造函数继承的确定:函数不能复用
                   *
                   *
                   * 
                   */

 

推荐阅读