javascript - 当编写代码遵循 ECMAScript 6 时，无法获取构造函数方法中定义的属性

Question

我是 Javascript 和 Node.js 新手，我正在尝试编写遵循 ECMAScript 6 的代码，但我无法在构造函数方法中获取属性定义，但可以使用旧的编写风格引用它:

'use strict'

function Animal (name) {
    this.name = name
}

// Animal.prototype.walk = (destination) => {
//     console.log(this.name + " walk to " + destination)  //undefined walk to China
// }

Animal.prototype.walk = function (destination) {
    console.log(this.name + " walk to " + destination)  //Cat walk to China
}

const cat = new Animal("Cat")
cat.walk('China')

I want to know the reason, thanks!

Answer 1

[...] am trying to write code obeys ECMAScript 6, but I can not get the property define in constructor method, while it can be referenced with the old write style

请注意，问题不在于您的“构造函数”在任何一种情况下都能正常工作:它将在实例上定义一个 name 属性。

事实上，您如何在带注释和未注释的 walk() 方法中访问 name 。

箭头函数()=>不是function(){}的快捷方式，它的诞生是为了避免定义引用context 环境到函数。

对于上面的例子，我用 ES5 来描述它:

'use strict'

function Animal (name) {
  this.name = name
}


Animal.prototype.walk = (destination) => {
  console.log(this.name + " walk to " + destination)  //undefined walk to China
}

//the above ES6 will be transform to ES5 like this:
var self = this; //reference `this` - the environment context into variable `self`.
Animal.prototype.walk = function(destination) {
  console.log(self.name + " walk to " + destination);
}


const cat = new Animal("Cat")
cat.walk('China'); // undefined walk to China.

我希望通过上面的例子，你可以了解到this到底是什么。因此，请“响应式”使用箭头函数。