Question

我是JS的新手，仍然在理解Chaining构造函数中的“ this”方面仍然很挣扎。下面是一个示例：

let Product = function(name, price) {
   this.name = name;
   this.price = price;
}

let TaxedProduct = function(name, price, taxRate) {
   Product.call(this, name, price);
   this.taxRate = taxRate;
}

let hat = new TaxedProduct("Hat", 100, 1.2);

我不明白为什么我们应该使用Product.call(this, name, price);，为什么我们不能仅使用Product(name, price);？我知道'this'用于绑定，但是在TaxedProduct的构造中，this已被引用为新创建的TaxedProduct对象，因此使用Product(name, price);就像将Product的构建内容复制并粘贴到TaxedProduct中，如下所示：

let TaxedProduct = function(name, price, taxRate) {
   //Product(name, price);  just like copy and paster below two statements
   this.name = name;
   this.price = price;     

   this.taxRate = taxRate;
}

Answer 1

如果在没有调用上下文的情况下调用了Product-也就是说，如果您进行了Product(name, price)，则它将尝试为全局对象分配name和price属性（或者在严格模式下进入undefined并引发错误），这绝对是不可取的：

'use strict';

let Product = function(name, price) {
   this.name = name; // error thrown
   this.price = price;
}

let TaxedProduct = function(name, price, taxRate) {
   Product(name, price);
   this.taxRate = taxRate;
}

let hat = new TaxedProduct("Hat", 100, 1.2);
console.log(hat.price);

let Product = function(name, price) {
   this.name = name;
   this.price = price;
}

let TaxedProduct = function(name, price, taxRate) {
   Product(name, price);
   this.taxRate = taxRate;
}

let hat = new TaxedProduct("Hat", 100, 1.2);
console.log(hat.price); // undefined - wrong
console.log(window.price); // oops, we assigned to window - wrong

您需要以某种方式将this函数内部的TaxedProduct（正在创建的实例）传递给Product函数，以便Product函数可以分配给正在创建的实例的属性。 .call允许您通过使用具有自定义调用上下文（或this）的函数来执行此操作。

在链接构造函数中使用“ this”

1 个答案: