javascript - 关于JavaScript原型(prototype)

关于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);

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

最佳答案

为什么'TestChildJS'无法获得'val_name_1'？


什么时候：

TestJS.initData();

运行时，它将数据属性添加到TestJS对象（由window.TestJS = new TestJS()分配的属性）。该属性不会被任何其他对象继承。

什么时候：

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

运行时，new TestJS()返回的对象尚未调用过initData方法，因此它没有数据属性，也不会从构造函数继承它（因为该属性直接在构造函数本身上，而不是在构造函数上其原型）。

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

您的代码中的模式（尤其是第二个模式）看起来不必要地复杂。