Javascript-具有new關鍵字的函數構造函數

Question

當下面的foo函數用new調用時，它將變成一個構造函數，該函數返回分配給baz的對象。

function foo() {
  this.baz = "baz";
  console.log(`${this.bar} ${baz}`); 
}

var bar = "bar";
var baz = new foo(); // prints undefined undefined

問題是，為什么控制台語句內的baz會獲得undefined值-可以說在提升baz同時調用new foo（）直到函數返回baz未分配返回的對象，這是正確的嗎？

后面一行中的console.log(baz)正確打印返回的對象。

Answer 1

在功能方面，沒有bar在this 。 您需要刪除this.bar的this部分。 對於baz ，必須使用this.baz ，因為它已附加到對象實例。

 function foo() { this.baz = "baz"; console.log(`${bar} ${this.baz}`); } var bar = "bar"; var baz = new foo(); 

該代碼意味着

this.baz = "baz";
console.log(`${this.bar} ${baz}`); 

當您創建一個對象時，它將只有baz 。 在主體中，如果要訪問對象的屬性，則需要通過this進行訪問。 ${baz}是未定義的，因為沒有baz變量（它不會在this查找）。因此，如果您需要在函數中訪問baz ，則需要使用this.baz 。

${this.bar} ， this沒有bar屬性，只有baz 。

Answer 2

變量baz在執行構造函數時不存在。 在構造函數執行后創建baz 。

如果您使用IIFE，它的工作原理類似：

var test = (function() {
  console.log(test) // undefined
  return 'test'
}())
console.log(test) // 'test'

Answer 3

MDN鏈接將幫助您了解this含義。

在函數內部使用，它指向當前對象。 實際含義由調用該函數的方式指定。 如果您在對象上使用圓點符號或方括號符號來調用它，則該對象將變為此。 如果呼叫未使用點符號，則表示全局對象。

因此，您正在function foo()內調用this.bar 。 您將得到undefined因為函數foo（）沒有bar屬性。

另外，當您僅在function foo ()內調用bar時，它將開始查找bar屬性。
首先在function foo ()內部，然后搜索global是否具有bar屬性。