JavaScriptクラスのクリーンアップ

8929 ワード

JavaScript ES 6のclass


JavaScriptクラスの

  • 関数宣言とクラス宣言の最大の違いは反発です.
    関数については、以下で宣言しても問題ありません.
    クラス->ブートX->クラスを使用する前に、クラスを宣言する必要があります.
    poiemawebでは良いと言えますが、例を見ればいいのですが、よくわかりません.
  • const p = new Rectangle(); // ReferenceError
    
    class Rectangle {}

    クラス式

  • クラス内のthisは、このクラスの次の例でPersonを示す.
  • コンストラクション関数は1回しか宣言できません.
  • class Person {
      constructor(name, city) {
        this.name = name;
        this.city = city;
      }
      sayHello = (name) => console.log(`hello! ${name}`);
      printThis = () => console.log(this);
    }
    
    const kyle = new Person("kyle", " seoul");
    console.log(kyle.name); //kyle
    console.log(kyle.printThis()); //Person{...} undefined(printThis return없기 때문)

    class body

  • 類bodyの{}からなる部分
  • クラスマスターでクラスメンバーを定義します.たとえば、コンストラクション関数やメソッドなどです.

    classから継承


    classはsuper,extendsを用いて継承を実現した.
    classでの継承もプロトタイプフィルタを用いた方法である.
    class Animal {
      constructor(name) {
        this.name = name;
      }
      bark() {
        console.log(`${this.name} : wall!wall!wall!`);
      }
    }
    
    class Dog extends Animal {
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      bark() {
        super.bark();
      }
    }
    
    const pome = new Animal('pome');
    const dungii = new Dog('dungii', 7);
    classはメソッド宣言をprototypeオブジェクトに保存します.

    では、現在のDogのオブジェクトdungiiのプロトタイプオブジェクトはどのようなものなのでしょうか.

    写真に示すように、AnimalのプロトタイプオブジェクトがDogのプロトタイプオブジェクトとして使用されていることがわかります.またbark()メソッドもsuperによって継承されるため,Dogのプロトタイプオブジェクトにおいてもbark()メソッドが見られる.
    !もしDog classにbark() {super.bark();}がなかったら?
    Dogプロトタイプオブジェクト__proto__: Animalにあるbarkは消えます.
    関連項目:MDN class
    DREAMコード別名クラス