javascript 原型(prototype)与 this

Question

我试图更好地理解 javascript 类的含义和原因。具体来说，我试图了解将方法分配给原型(prototype)与在构造函数中使用 this.methodName = function ... 语句之间的差异。于是，我做了一个实验:

function CThis(){
  this.method= function() {
    console.log("method of ",this);
  };
}

function CProto(){
}

CProto.prototype.method = function() {
  console.log("method of ",this);
};

window.onload = function(){
  ct = new CThis(); 
  ct.method();
  cp = new CProto();
  cp.method();
};

我的假设是两者的行为方式相同，但我学到了一些东西。这是输出:

"method of " Object { method: CThis/this.method() } oop.js:3:4
"method of " Object {  } oop.js:11:2

在构造函数中使用 this.method 实际上给了我我想要的典型 oop 程序中类实例的行为:即“this”指的是类实例。使用原型(prototype)方法，似乎 this 引用了一个空对象。

我想我的问题有三个:

1. CProto.prototype.method 中的“this”指的是什么？
2. 关于分配函数的故事的其余部分是什么 在构造函数内部与使用对象的原型(prototype)进行比较？
3. 貌似是用这个的版本。构造函数内部是一个 做我想做的事(即能够访问变量 在类的实例中)。鉴于此，为什么 javascript oop教程讲原型(prototype)这么多？

提前致谢!

---编辑---

我对此进行了更多思考，并意识到也许值得将示例扩展到单一方法之外，并尝试查看哪些变量可以访问。

function CThis(){
  this.localthis = "I'm this.localthis";
  var localvar = "I'm localvar";
  this.method= function() {
    console.log("method of ",this);
    console.log("value of this.localthis:", this.localthis);
    console.log("value of localvar with this.:", this.localvar); 
    console.log("value of localvar without this.:", localvar); 
  };
}

function CProto(){
  this.localthis = "I'm this.localthis";
  var localvar = "I'm localvar";
}

CProto.prototype.method = function() {
  console.log("method of ",this);
  console.log("value of this.localthis:", this.localthis); 
  console.log("value of localvar with this.:", this.localvar);  
  console.log("value of localvar without this.:", localvar);  
};

window.onload = function(){
  ct = new CThis(); 
  ct.method();
  cp = new CProto();
  cp.method();
};

新的输出:

method of " Object { localthis: "I'm this.localthis", method: CThis/this.method() } oop.js:5:4
"value of this.localthis:" "I'm this.localthis" oop.js:6:4
"value of localvar with this.:" undefined oop.js:7:4
"value of localvar without this.:" "I'm localvar" oop.js:8:4
"method of " Object { localthis: "I'm this.localthis" } oop.js:18:2
"value of this.localthis:" "I'm this.localthis" oop.js:19:2
"value of localvar with this.:" undefined oop.js:20:2
ReferenceError: localvar is not defined

因此，变量范围肯定存在差异(在 this.method 中，我可以从构造函数内部访问 var 变量)。

Answer 1

在第一种情况下，您创建的每个实例都有自己的方法副本，因此当您打印对象时，它是可见的。每次调用构造函数时，JS 引擎也可能必须对此函数执行编译步骤。

在第二种情况下，您创建的所有实例都没有任何属性。相反，当您调用该方法时，js 引擎会沿着原型(prototype)链向上查找具有正确名称的属性。它查看 cp.__proto__ 并找到指向您称为 CProto.prototype 的对象的指针，该对象确实有一个名为“method”的属性，它可以打电话。

作为附加测试，向您的类添加一个真实的实例变量。将 this.foo = 42; 添加到两个构造函数，然后看看会得到什么。