Geek Answers Handbook

Javascript Inheritance. Why does my class share the nested element data?

I'm having difficulty with the following inheritance code, which I read in Crockford's book.

When I create two instances of the Column object, the data for the "this.name" member is different in each instance, as I expected.

However, when I use the nested data of the "this.model.name" element, it is always shared with instances.

Can anyone suggest a way to fix this?

var BaseColumn = function() {
   this.model = {};
   this.model.name = "";
   this.name="";
};

var Column = function (name) {
   this.model.name = name;
   this.name = name;
};

Column.prototype = new BaseColumn();

var col1 = new Column("Column1");
var col2 = new Column("Column2");

alert(col1.name);          //Returns "Column1"
alert(col2.name);          //Returns "Column2"
alert(col1.model.name);    //Returns "Column2"
alert(col2.model.name);    //Returns "Column2"
+4
source share
4 answers

The answer suggested by James Wilkins is correct. Only one instance is created BaseColumnand it is shared by all instances ColumnthroughColumn.prototype

, . , .

. http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html http://js-bits.blogspot.com/2014/10/understanding-prototypical-inheritance.html

.

    var BaseColumn = function() {
      this.model = {};
      this.model.name = "";
      this.name = "";
    };

    var Column = function(name) {
      // Call the parent constructor, a new model object will be created
      // instead of using a shared one from the prototype
      BaseColumn.apply(this);
      this.model.name = name;
      this.name = name;
    };

    Column.prototype = Object.create(BaseColumn.prototype);

    var col1 = new Column("Column1");
    var col2 = new Column("Column2");

    console.log(col1.name); //Returns "Column1"
    console.log(col2.name); //Returns "Column2"
    console.log(col1.model.name); //Returns "Column1"
    console.log(col2.model.name); //Returns "Column2"
+2

, Column SAME model . Column model.name.

, , , :

var BaseColumn = function() {
   this.model = {};
   this.model.name = "";
   this.name="";
};

BaseColumn, model name new.

var Column = function (name) {
   this.model.name = name;
   this.name = name;
};

Column, . new Column() , this.model ( ).

Column.prototype = new BaseColumn();

, BaseColumn. , , Column. ? , Column (col1 col2) , . Column , .

var col1 = new Column("Column1");

, Column.prototype.model.name == "Column1"?

var col2 = new Column("Column2");

Column.prototype.model.name "Column2" `. , . SHARED.

, , model Column.

, Juan Mendes. . / ().

+3

, model BaseColumn Column. , . , , - col.__proto__.model , .

0

The answer is very simple: it is {}parsed once by JS and refers to an identical object in each instance you create. To create a new, different object for each instance, just do something like

this.model = Object.create();

or

this.model = new Object();

or

this.model = function() { return {}; }();

However, there are other problems with how you have established inheritance, that other answers may help you.

0
source

More articles:


All Articles