编写代码遵循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

[...]正在尝试遵循ECMAScript 6编写代码，但是我无法在构造函数方法中获得属性定义，尽管可以使用旧的编写样式进行引用

请注意，问题不是您的“构造函数”在两种情况下都可以正常工作：它将在实例上定义name属性。

这就是您如何在带注释的和无注释的walk()方法中访问name的事实。

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

在上面的示例中，我在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是。 因此，请“快速”使用arrow function 。