首頁猿問 Javascript箭頭函數詞法范...

Javascript箭頭函數詞法范圍：對象文字與“新”運算符

JavaScript

慕桂英546537 2023-09-21 10:55:21

我試圖了解箭頭函數在 JS 中的工作原理。讓我困惑的一件事是：let obj1 = { // MDN states that object literal does not create a new scope but I didn't find // any detailed explanation why name: "benny", getName: () => { console.log(this.name); },};obj1.getName(); // prints "undefined"class myObj { constructor() { this.name = "benny"; this.getName = () => { console.log(this.name); }; }}let obj2 = new myObj();obj2.getName(); //prints "benny"有人可以解釋一下為什么對象文字不創建新作用域，而調用“new”卻創建新作用域嗎？（我一直認為對象字面量和“new”運算符是相等的；我在 MDN 中沒有找到正確的解釋。）我找到了關于new 運算符如何工作的解釋。但我不清楚為什么對象文字的工作方式不同。

查看完整描述

3 回答

子衿沉夜

TA貢獻1828條經驗獲得超3個贊

運算new符不會創建新范圍。

函數創建了一個新的范圍。

該constructor函數是與全局外部任意函數空間不同的函數。

反對回復 2023-09-21

holdtom

TA貢獻1805條經驗獲得超10個贊

因此，每當您在任何地方使用箭頭函數時，它都不會擁有this自己的箭頭函數，因為它將引用this其父函數（簡單地說）。

因此，在第一種情況下，它引用了thiswindow ，因此也引用了undefined。

在第二種情況下，引用構造函數的“this”，因此引用“benny”。

反對回復 2023-09-21

大話西游666

TA貢獻1817條經驗獲得超14個贊

class myObj {

constructor() {

this.name = "benny";

}

getName() {

console.log(this.name);

}

getName2 = () => {

console.log(this.name);

}

let obj2 = new myObj();

obj2.getName();

obj2.getName2();

我想提出這個例子，因為我認為它非常有趣——這并不是直接回答你的問題，而只是一些附加信息。

人們正在討論在構造函數中定義它如何使this屬性引用對象本身 - 因為這就是this構造函數中的含義！所以我想看看如果你按照我上面的方式定義一個箭頭函數會發生什么，getName2它不在構造函數中，但它仍然被this定義為對象本身。所以為什么？

好吧，事實證明，當您以這種方式定義箭頭函數時，它實際上最終會在構造函數中定義。我認為箭頭函數存在某種code hoisting類似的情況。您實際上可以通過嘗試更改原型上的函數來驗證它：

myObj.prototype.getName = () => {console.log('hello world')}
myObj.prototype.getName2 = () => {console.log('hello world')}
obj2.getName(); // this prints 'hello world'
obj2.getName2(); // this does not

您無法getName2通過原型更改的函數，因為該函數實際上是在幕后的構造函數中定義的。

反對回復 2023-09-21

3 回答
0 關注
147 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript箭頭函數詞法范圍：對象文字與“新”運算符

Javascript箭頭函數詞法范圍：對象文字與“新”運算符

3 回答

添加回答