JS 從這個 object 內的嵌套 object 調用函數

Question

實際上我試圖運行以下代碼：

 var myObj = { subObj: { methodA: (parA) => { this.methodB(parA); //This is not working }, methodB: (parB) => { console.log(parB); } } } myObj.subObj.methodA('Hello World');

我收到錯誤“未捕獲的 TypeError：this.methodB 不是函數”。

為什么我會收到此錯誤？ 方法A的scope中的“methodB”不是通過'this'嗎？

非常感謝

Answer 1

箭頭函數具有特殊綁定。 箭頭函數中this的值等同於定義 function 的 this 的值（詞法范圍）。 在這種情況下窗口（在瀏覽器中）。 要使您的 function 工作， this使用引用封閉上下文的常規函數：

var myObj = {
  subObj: {
    methodA: function (parA) {
      this.methodB(parA); //This is not working
    },
    methodB: function (parB) {
      console.log(parB);
    }
  }
}

myObj.subObj.methodA('Hello World');

更多關於此的解釋here 。

Answer 2

箭頭函數沒有單獨的this 。

因此做

var myObj = {
  subObj: {
    methodA: (parA) => {
      this.methodB(parA); // `this` will always be window / outer context as arrow functions will not bind `this` at runtime.
    },
    methodB: (parB) => {
      console.log(parB);
    }
  }
}


myObj.subObj.methodA('Hello World'); // fails as `this.methodB` in your `methodA` is equivalent to `window.methodB` which is not present

類似於做：

var myObj = {
  subObj: {
    methodA: function(parA) {
      this.methodB(parA);
    },
    methodB: function(parB) {
      console.log(parB);
    }
  }
}

myObj.subObj.methodA.call(window || {}, 'Hello World');  // where window || {} is the lexical / outer scope to your function.

---

在后者的情況下，當您執行以下操作時，事情會起作用：

myObj.subObj.methodA('Hello World');

由於普通函數使用調用者的this並且您將methodA稱為myObj.subObj.methodA ， this = myObj.subObj 。 因此this.methodB可用，因為它等同於myObj.subObj.methodB

Answer 3

我的猜測是，這是因為所有這些都是匿名的、非范圍的、非實例化的對象， this實際上是指 window object。