web-dev-qa-db-ja.com

JavaScriptの「クラスフィールド」とは何ですか？

私はJavaScriptクラスについて読んで、この用語に遭遇しました "パブリッククラスフィールド構文"。これに少し深く掘り下げると、私はこれを越えて終わりました クラスプロパティに関するBaberのドキュメント 。

誰かが説明してください - 実装的にこの新しい構文のためのユースケースは何ですか？（= /// =）（= /// =）これまでに欠けていたJavaScriptに提供しますか？）

以下の例が以下の例です（Google ChromeのエラーなしでRAN）：

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 Patel _
javascriptecmascript-6ecmascript-nextclass-fields
4
Aaditya Sharma

それは この提案 "問題"が取り組んでいるところから始まります。

前提案

デフォルトの属性を保持するクラスFooを持つことを想定して、次のように作成できます。

class Foo {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

上記の提案はATMを実装していませんでした。クラスオブジェクトを設定するときはdefaultAttribute = '...'は無視されます（コンパイル時）。プロトタイプまたはフィールドメンバー（機能オブジェクトの）の一部でもありません。これは、defaultAttributeがコンパイラによってピックアップされていないためです。したがって、foo.defaultAttributeはできません。

getDefault()を呼び出すと、その瞬間に未定義であるため、エラーが表示されます。コンストラクタのdefaultAttributeに値を指定すると、その関数は機能します。

class Foo {
  defaultAttribute = 'default';
  constructor() {
    this.defaultAttribute = 'hello';
  }
  getDefault() { return this.defaultAttribute; }
}

この状況では、defaultAttributeは 'hello'に設定されていますが、notは'default'で元の変数を上書きします。

プロポーザル

その提案では、「無視」の問題はあなたが今説明したことをすることができることができることに取り組んでいます。

class Foo {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

これにより、constructor()の使用をスキップすることができます

class Foo1 {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

class Foo2 {
  defaultAttribute = 'default';
  constructor() {this.defaultAttribute = 'hello';}
  getDefault() { return this.defaultAttribute; }
}

const foo1 = new Foo1();
const foo2 = new Foo2();

console.log(foo1.getDefault());
console.log(foo2.getDefault());
0
KarelG