在javascript中使用原型继承

时间:2017-09-04 19:21:32

标签: javascript oop prototypal-inheritance

我有以下代码。为什么三个对象都引用同一个数组,而字符串变量是独立的?如何在不明确添加的情况下修复它:function B(){this.arr = [];}



function A(){
  this.text = "";
  this.arr = [];

  this.action = function(){
    this.text+="z";
    this.arr.push(1); 
  }

  this.test = function(){
    console.log(this.text+"|"+this.arr);
  }
}

function B(){
    
}

B.prototype = new A();        
B.prototype.constructor = B;
var B1 = new B();
var B2 = new B();
var B3 = new B();

B1.action();
B2.action();
B3.action();
B1.test(); //z|1,1,1
B2.test(); //z|1,1,1
B3.test(); //z|1,1,1




1 个答案:

答案 0 :(得分:0)

解释如下:

原型是对象之间的 live 链。因为B&#39的原型是A的单音实例,所以数组道具通过引用传递。这意味着对于每个B实例,我们可以访问原型上的相同A实例。这可能听起来有点令人困惑,但这是JavaScript中原型的神奇之处。

这是原型继承的警告。原型上的任何内容都将传递给每个实例。为了维护属性的不同实例,我们在构造函数中初始化对象的属性。

使用JS中的对象(如数组)时,它们通过引用传递。

为了使用JS的原型系统,我建议如下:

function A(){
  this.text = "";

  this.action = function(){
    this.text+="z";
    this.arr.push(1); 
  }

  this.test = function(){
    console.log(this.text+"|"+this.arr);
  }
}

function B(){
    this.arr = [];
}

B.prototype = new A();

这样我们就可以重用" parent"并在我们的孩子中有一个本地化的数组"。乍一看,这看起来可能是一个经典的OOP继承案例,但它有点不同。

如果您想在JS中阅读有关原型的更多信息,我建议使用article

希望这有帮助。