Javascript原型继承,比较

Javascript原型继承,比较,javascript,Javascript,当我看到这个问题时,我陷入了困惑 比较这些继承方式。缺点是什么 Button.prototype=新组件() Button.prototype=Component.prototype Button.prototype=Object.create(Component.prototype) 这些方法有什么不同?特别是我不知道1和3之间的关系。为什么不使用第一个: var Animal = function(){ //instance specific member food this.foo

当我看到这个问题时,我陷入了困惑

比较这些继承方式。缺点是什么

  • Button.prototype=新组件()
  • Button.prototype=Component.prototype
  • Button.prototype=Object.create(Component.prototype)
    这些方法有什么不同?特别是我不知道1和3之间的关系。

    为什么不使用第一个:

    var Animal = function(){
      //instance specific member food
      this.food=[];
    };
    Animal.prototype.eat=function(food){
      this.food.push(food);
    };
    var Cat = function(){};
    Cat.prototype = new Animal();
    var mimi=new Cat();
    var maxi=new Cat();
    mimi.eat("fish");
    console.log(maxi.food);//=["fish"]
    
    创建父对象的实例以设置子对象的原型部分将导致父对象的实例特定成员成为子对象的共享原型成员。在示例代码中,向mimi添加食物会影响maxi的食物成员(因为mimi和maxi都从Cat.prototype.food获得食物成员)。这可以通过
    Animal.call(This)解决
    在Cat构造函数主体中(无论如何,您都应该这样做以重新使用Animal构造函数),但是food成员仍然存在于Cat的原型中,并且在创建实例时立即被隐藏

    不使用此选项的另一个原因是,在创建动物时,您可能需要定义Cat及其原型时不可用的数据(作为参数传递)

    为什么不使用第二个:

    var Animal = function(){
      //instance specific member food
      this.food=[];
    };
    Animal.prototype.eat=function(food){
      this.food.push(food);
    };
    var Cat = function(){};
    Cat.prototype = new Animal();
    var mimi=new Cat();
    var maxi=new Cat();
    mimi.eat("fish");
    console.log(maxi.food);//=["fish"]
    
    子对象是父对象,但父对象不是子对象。在下一个示例中,猫和狗是动物,但动物不是猫(或狗)。设置Dog.prototype.bark将设置Animal.prototype.bark,这将使动物的任何子代都能够吠叫。猫咪咪现在可以叫了

    var Animal = function(){};
    var Cat = function(){};
    Cat.prototype = Animal.prototype;
    var Dog = function(){};
    Dog.prototype = Animal.prototype;
    Dog.prototype.bark=function(){
      console.log("woof woof");
    };
    var mimi=new Cat();
    mimi.bark();//=woof woof
    

    所以你应该使用第三个,更多关于构造函数、原型和继承的信息可以在这里找到

    你有没有尝试过自己做一些研究,比如使用谷歌?应该有大量的材料涵盖这个主题,因为javascript面向对象/继承/对象创建并不是什么新鲜事。如果您发现了一些东西,并且有一个具体的问题,请回到这里询问,如果您自己找不到答案。1运行构造函数,而3则不运行。与