关于 javascript 原型

Question

一个关于javascript原型的奇怪问题：

(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);

为什么'TestChildJS'不能得到'val_name_1'？

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

console pic

所以我必须这样写我的代码：

(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);

如何使用第一种方式可以得到第二种方式的内容？

Answer 1

为什么'TestChildJS'不能得到'val_name_1'？

何时：

TestJS.initData();

运行时，它为 TestJS 对象（由window.TestJS = new TestJS() 分配的对象）添加了一个 data 属性。该属性不被任何其他对象继承。

时间：

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

运行时，new TestJS() 返回的对象还没有调用它的 initData 方法，所以它没有 data 属性，也没有从构造函数继承它（因为属性直接在构造函数本身上，而不是它的原型上）。

还要注意，将新对象分配给 this.data 会直接在实例上创建一个属性，因此添加到 this.data 会修改实例的 data 对象，而不是构造函数原型上的对象。

您的代码（尤其是第二个）中的模式看起来过于复杂。

Answer 2

这与 IIFE 的范围有关。在闭包内声明的变量会隐藏任何具有相同名称的外部变量。由于在 IIFE 执行后您不再可以访问它的作用域，因此其中的 TempJS 将始终是函数构造函数——而不是实例化对象。

考虑这个例子：

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

func(i); // 1

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

如果我在闭包内重新声明 i 变量，看看会发生什么：

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

func(i); // 1

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

因此，解决您的问题的一种方法是在 IIFE 之前声明一次 TestJS。

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

请注意，我删除了 console.log(new TestJS().data.val_name_1);。 TestJS 不再是构造函数，所以该行会抛出。

另一种解决方案是将空函数表达式分配给闭包内的window.TestJS，而不是var TestJS。这样做不会创建本地 TestJS 名称，因此会防止歧义。