es6 类：如何省略“this”关键字答案

【问题标题】：es6 class: how to omit "this" keywordes6 类：如何省略“this”关键字
【发布时间】：2018-11-24 20:12:41
【问题描述】：

在 ES6 中，是否可以创建局部变量并直接引用它们，而不是在前面添加this.，如this.name。

例如，在下面的代码中，我可以做些什么来让写{name} 而不是{this.name} 成为可能。（变量前面加this.有点麻烦！）

class User extend React.Component {
    name = "Joe";

    render() {
        // is it possible to write {name} instead of {this.name}
        return <div>{name}</div>
    }
}

【问题讨论】：

你试过了吗？
在每个使用它的函数的顶部，你可以const { name } = this;我想
我不认为this 很麻烦。它使您的代码更加清晰。您可以轻松区分实例变量和局部变量。
她可能来自C++，将成员变量放在所有方法的范围内。
请注意，name = "Joe"; 不是 ES6。 @Barmar：Java 也是这样工作的。

标签： javascript reactjs ecmascript-6 babeljs ecmascript-next

【解决方案1】：

with 语句可以做到这一点，但由于它与严格模式不兼容，因此在现代 JS 中没有任何价值。

否则没有办法做到这一点，因为 this.name 不应与 name 变量混淆，省略 this 将是一个错误。

如果 JSX 中的this.name 影响可读性或者被多次使用，可以对该属性进行解构：

render() {
    const { name } = this;

    return <div>{name}</div>
}

【讨论】：

需要注意的是，这个只能用于读取属性，如果要赋值还是要使用this.name。
那么 ES6 中是否有任何东西可以在类中创建局部变量，例如在 vanilla javascript function User(){ var name="joe" } 中，然后您可以在该类中使用变量 name
ES6 类是函数的语法糖。您可以在类构造函数中创建一个变量。它在render 原型方法 中不可用，但在脱糖类原型方法function User(){ var name="joe" }; User.prototype.render = function () {...} 中也不可用。出于可扩展性和可测试性的原因，name 变量可能比name 类属性差。
@estus 所以 vanilla 和 es6 是不等价的。在 vanilla 中，类方法 this.say() 可以访问局部变量 name，以这种方式：function User(){ var name="joe"; this.say=function(){console.log(name)} };。但是在 ES6 中，定义为class User { say=()=>{ console.log(...)} } 的类方法根本无法访问构造函数中定义的局部变量，对吧？因此 ES6 和 vanilla 是不等价的。
为了有效地使用 ES6，最好清楚地了解 ES6 代码如何转换为 ES5。 say=()=>... - 这不是 ES6，而是 ES.next proposal。它是 ES6 对应的语法糖，class User { constructor() { let name="joe"; this.say=()=>...; } }。可以直接翻译成ES5function User()...。是的，在这个 ES.next 示例中不可能有变量，但在 ES6 中是可能的，这就是语法糖存在缺陷的情况。如前所述，使用this 属性是有益的，所以坚持下去。