Ecmascript 6 只有函数名的es6类成员之间有区别吗?
es6类中的这两个函数声明之间有区别吗?范围是一样的吗?单程优先吗Ecmascript 6 只有函数名的es6类成员之间有区别吗?,ecmascript-6,Ecmascript 6,es6类中的这两个函数声明之间有区别吗?范围是一样的吗?单程优先吗 class Node { // function declaration 1 test () { } // function declaration 2 test = () => { } } 第二种方法创建实例函数 class Node { test = () => { } } 与 class Node { construtor() { this.test =
class Node {
// function declaration 1
test () {
}
// function declaration 2
test = () => {
}
}
第二种方法创建实例函数
class Node {
test = () => {
}
}
与
class Node {
construtor() {
this.test = () => {
};
}
}
因此,每次创建对象时,都会有效地创建一个绑定到新对象实例的新函数。这只是一个简短的说法
优点是可以将这些方法传递给回调。范例
class Node {
constructor(name) {
this.name = name;
}
test1 = () => {
console.log(this.name);
}
test2() {
console.log(this.name);
}
}
const node = new Node('foo');
setTimeout(node.test1); // works
setTimeout(node.test2); // fails will have wrong this
setTimeout(node.test2.bind(node)); // works
请注意,何时在方法上使用箭头函数以及何时不使用箭头函数实际上取决于具体情况
const node = new Node('foo');
someElement.addEventListener(click, node.test1);
在上述情况下,当调用事件侦听器时,此将引用节点。如果这正是您想要的,但事件侦听器已将
this
设置为它们所附加到的元素,那么在本例中,someElement
会丢失它。如果你不需要,那就太好了。如果您确实需要它,那么使用箭头函数是错误的。第二种方法是fat数组,是的,它是允许的。我最近在代码中看到了它,不知道是不是因为这个原因,作用域有所不同。@jfriend00我不确定我是否遵循——这是一个非常常见的Babel转换(实例属性),它是显式绑定“this”的。或者你只是想说明这是一个转换,而不是标准的JS?方法声明将把test
方法添加到节点。prototype
。第二种方法是,尚未成为标准的一部分,它将为每个实例创建绑定函数属性。