关于JavaScript原型

Question

A strange problems about javascript prototype :

(function(w){
  if(!w)
    return;

  var TestJS = function(){
  };

  TestJS.prototype = {

    data:{},
    initData:function(){
      this.data={
        val_name_1 : 1,
        val_name_2 : 2,
        val_name_3 : "hello-3"
      };
      console.log(this.data);
      return this;
    },

    TestChildJS:{
      initChild:function(){
        console.log(TestJS);
        console.log(TestJS.data);
        console.log(new TestJS().data.val_name_1);
        console.log(TestJS.data.val_name_1);
      }
    }
  };
  window.TestJS =  new TestJS();
})(window);

why 'TestChildJS' can not get 'val_name_1'?

TestJS.initData();
console.log(TestJS.TestChildJS.initChild());

console pic

so I have to write my code like that:

(function(w){
  if(!w)
    return;

  var TestJS = function(){
  };
  TestJS.prototype = {

    data:{},

    initData:function(){
      this.data={
        val_name_1 : 1,
        val_name_2 : 2,
        val_name_3 : "hello-3"
      };
      console.log(this.data);
      this.TestChildJS.initParentData(this);
      return this;
    },

    TestChildJS:{
      parentData:{},

      initParentData:function(parent){
        this.parentData = parent.data;
        return this;
      },

      initChild:function(){
        console.log(this.parentData);
      }
    }
  };

  window.TestJS =  new TestJS();
})(window);

How to use the first way can get the content of the second way?

Answer 1

why 'TestChildJS' can not get 'val_name_1'?

when:

TestJS.initData();

is run, it adds a data property to the TestJS object (the one assigned by window.TestJS = new TestJS() ). That property isn't inherited by any other object.

When:

console.log(new TestJS().data.val_name_1);

is run, the object returned by new TestJS() has not had it's initData method called yet, so it doesn't have a data property and it doesn't inherit it from the constructor (because the property is directly on the constructor itself, not its prototype).

Note also that assigning a new object to this.data creates a property directly on the instance, so adding to this.data is modifying the instance's data object, not the one on the constructor's prototype.

The patterns in your code (especially the second one) seem unnecessarily convoluted.

Answer 2

It has to do with the scope of the IIFE. A variable declared inside a closure shadows any outer variable with the same name. Since after the IIFE executes you no longer have access to its scope, TempJS inside it will always be a function constructor -- not an instantiated object.

Consider this example:

var i; 
var func = (function(){
   i = 1; 
   return function() { 
        console.log(i) 
   }; 
})(); 

func(i); // 1

i = 2; 
func(i); // 2

If I re-declare the i variable inside the closure, look what happens:

var i = 1; 
var func = (function(){
   var i = 1; 
   return function() { 
        console.log(i) 
   }; 
})(); 

func(i); // 1

i = 2; 
func(i); // 1

So one solution to your problem would be to declare TestJS once before the IIFE.

var TestJS;

(function(w){
  if(!w)
    return;

  TestJS = function(){
  };

// ...

    TestChildJS:{
      initChild:function(){
        console.log(TestJS.data.val_name_1);
      }
// ...

    window.TestJS =  new TestJS();
})(window);

TestJS.initData(); 
console.log(TestJS.TestChildJS.initChild()); // 1

Notice that I removed console.log(new TestJS().data.val_name_1); . TestJS is no longer a constructor function, so that line will throw.

Another solution is to assign the empty function expression to window.TestJS inside the closure, instead of var TestJS . Doing so will not create a local TestJS name and will therefore prevent the ambiguity.