标签: class-fields

在 TypeScript 3.8+ 中，使用private关键字将成员标记为私有有什么区别：

class PrivateKeywordClass {
    private value = 1;
}

并使用为 JavaScript 提议的#私有字段：

class PrivateFieldClass {
    #value = 1;
}

我应该更喜欢一个吗？

我目前正在 Node 12.14.1 上开发 API，并使用 Eslint 来帮助我编写代码。不幸的是，它不允许我设置静态类属性，如下所示：

class AuthManager {
  static PROP = 'value'
}

给出以下错误： Parsing error: Unexpected token =eslint

JS 和 Node.js 已经支持静态类属性。
如何禁用此规则？

我还有以下.eslintrc.json文件：

{
  "env": {
      "es6": true,
      "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  }
}

我正在尝试新的类私有成员功能 但是，我很快遇到了一个问题：如何动态访问它们？

我希望它遵循预先存在的语法

constructor(prop, val) {
  this[`#${prop}`] = val; // undefined
}

或者

constructor(prop, val) {
  this.#[prop] = val; // syntax error
}

然而，以上两种方法都失败了。

class Foo {
  static v = 123;

  static bar = () => this.v;
}

console.log(Foo.bar());

我希望这段代码返回undefined，因为箭头函数是词法范围的，因此this必须急切地绑定到外部范围。

然而，它返回123。

为什么会发生这种情况？

是的，我知道它仍然是第 3 阶段，但仍然 - 为什么提议的标准会这样？（有关另一个示例，请参阅https://babeljs.io/docs/en/babel-plugin-transform-class-properties。）

以前，我会使用旧的约定，即使用_后缀或前缀来命名私有字段。

class X{
  constructor() {
    this.privateField_;
  }
  
  privateMethod_() {}
}

现在，通过该符号可以实现真正的私有可访问性#，我已经使用过它们了一些。

class X{
  #privateField;

  #privateMethod() {}
}

但我遇到的一种情况是在调试时需要访问这些私有成员。但是当然，它们是私有的，所以我不能，除非我编写一些仅调试的包装器/访问器，如果我事先不知道需要调试哪些字段/类，那么这是不切实际的。通过_命名约定，很容易故意绕过。

使用 chrome 开发控制台时，有没有办法绕过 private 修饰符，就像它允许您在块await之外使用一样async？

我正在阅读JavaScript 的类字段提案。我不明白为什么作者称它为“字段”而不是属性。

类文章中的MDN 文档讨论了在构造函数中声明的实例属性，并在下一节中讨论了使用新语法声明的字段声明。

除了语法，两者有什么区别？

我正在阅读有关 JavaScript 类的内容，并遇到了“公共类字段语法”这个术语。在深入研究它时，我遇到了这个Babel 关于类属性的文档。

有人可以解释一下 - 在实现方面，这种新语法的用例是什么？ （它为 JavaScript 提供了哪些解决方案/好处，哪些是迄今为止缺失的？）

下面是一个例子（在谷歌浏览器中运行没有错误）：

class Person {
    firstName = "Mike";
    lastName = "Patel";
    
    // this is a public class field syntax
    getName = () => {
      return this.firstName + " " + this.lastName;
    };
}

var p = new Person();

console.log(p.firstName); // Mike
console.log(p.lastName); // Patel
console.log(p.getName); // () => { return this.firstName + " " + this.lastName; }
console.log(typeof p.getName); // function
console.log(p.getName()); // Mike …

class A {
  #a = 1;
  static #a = 2;
}

结果是

• Uncaught SyntaxError: redeclaration of private name #a在火狐浏览器中
• Uncaught SyntaxError: Identifier '#a' has already been declared在 Chrome 中

尽管

class A {
  a = 1;
  static a = 2;
}

在 Firefox 和 Chrome 中均有效

AFAIK 实例字段将安装在类实例上，而静态字段将安装在类对象本身上。他们并不冲突。为什么之前的代码无效？

我有一个包含以下代码的文件：

class Animal {
    doSomething = () => {
        return 'Hi.';
    };
}

class Dog extends Animal {
    doSomething = () => {
        return super.doSomething() + ' Woof!';
    };
}

console.log(new Dog().doSomething());

注意：尝试运行上面的代码片段可能不起作用，因为我不知道如何让它使用我的 Babal 设置。

无论如何，当我使用 Babel 编译它并在 Node 中运行它时，我收到以下错误：

/Users/elias/src/classFieldTest/build/classFieldTest.js:15
            return super.doSomething() + ' Woof!';
                         ^

TypeError: (intermediate value).doSomething is not a function
    at Dog.doSomething (/Users/elias/src/classFieldTest/build/classFieldTest.js:15:26)
    at Object.<anonymous> (/Users/elias/src/classFieldTest/build/classFieldTest.js:21:23)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup …

我有一个 JavaScript 类，其中有一个异步方法，如下所示。

class ABC {
    func = async () => { //----line 10
        //some code
    }
    func2 = () => { //----line 11
        //some code 
    }
}

当我运行 ESLint 时，它报告一个错误。应用程序本身正在按预期工作。

unexpected token '=' at line 10 (& 11)

eslintrc.json

{
   "env":{
       "es2021":true
    }
}

我需要做什么才能消除这些 lint 错误并仍然保留这些方法作为箭头函数？

ESLint 版本：eslint :"^7.32.0"