为什么JavaScript中的this.key不能正常工作？

Question

let student = {
    

fname: "Carlos",
    lname: 'Dubón',
    sayHi(){
        alert(`Hi my name is ${this.fname}`);
    },
    sayBye: function() {
        alert(`Bye ${this.fname}`);
    },
    sayHiAgain: ()=> {
        alert(`Hi my name is ${this.fname}`);
    }
}

student.sayHiAgain();

我对Javascript中的面向对象编程不熟悉，但我了解我写方法的三种方式都是完全相同的。

student.sayHi(); 能够正常工作并显示弹框 => "Hi my name is Carlos"

但是 student.sayHiAgain(); 显示弹框 => "Hi my name is undefined"

我错过了什么？

- Carlos Daniel

---

这个回答解决了你的问题吗？“箭头函数”和“函数”是等价/可互换的吗？ - ASDFGerte

这个回答解决了你的问题吗？ES6对象中的方法：使用箭头函数 - holydragon

Answer 1

使用箭头函数时，它使用词法作用域，意味着它仅引用当前作用域，而不是更远的作用域，即绑定到内部函数而不是对象本身。

箭头函数表达式是常规函数表达式的语法紧凑的替代品，但没有自己的this、arguments、super或new.target关键字绑定。箭头函数表达式不适合作为方法，并且不能用作构造函数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

- Harben

Answer 2

箭头函数没有“this”

箭头函数很特别：它们没有自己的“this”。如果我们从这样的函数中引用this，它将从外部的“普通”函数中获取。

let student = {
  fname: "Carlos",
  lname: "Dubón",
  sayHi: function () {
    console.log(`Hi my name is ${this.fname}`);
  },
  sayBye: function () {
    console.log(`Bye ${this.fname}`);
  },
  sayHiAgain: function () {
    console.log(`Hi my name is ${this.fname}`);
  },
};

student.sayHiAgain();

箭头函数表达式

- Mario