爲什麼這段代碼總是返回undefined？

Question

我開始學習ES6 &寫了這個代碼：

let dog = { 
 
     s:'Woff', 
 
     talk:()=>{console.log(this.s)} 
 
    }; 
 
    dog.talk(); 
 
    let x = dog.talk; 
 
    x(); 
 
    x.bind(dog)();

爲什麼它總是返回undefined，而不是 'WOFF'？我認爲只有1行返回undefined，但我們有3個未定義。

Answer 1

您將「talk」屬性值定義爲箭頭函數，這意味着該函數中的this的值將是函數定義上下文中this的值。這是不是「狗」的對象，它是什麼this是let聲明出現的地方。

如果使用常規的功能，而不是，你的代碼將作爲你希望：現在

let dog = { 
    s:'Woff', 
    talk: function(){ console.log(this.s); } 
}; 
console.log(dog.talk()); 

，在this問題之上，你的「對話」功能不返回任何東西，所以傳遞調用函數的結果將始終返回undefined。 （在箭頭函數版本中，有是本來可以是一個返回值，如果它已經是一個單語句的無支撐函數體，但它會也已undefined因爲console.log()不會返回任何東西。）所以：

let dog = { 
    s:'Woff', 
    talk: function(){ console.log(this.s); return this.s; } 
}; 
console.log(dog.talk()); 

現在你可以在功能看「WOFF」從console.log()，也從外console.log()。