JavaScriptの文法を学ぶことはまだたくさんありますが、直接反応の基礎に入り、聞きながら学び、その時必要な部分を探して位置づけたいと思っています。

プロトタイプとクラス

オブジェクト作成者

プロトタイプとクラスを理解する前に、まずオブジェクト作成者を理解します。オブジェクト作成者は、関数を使用して新しいオブジェクトを作成し、挿入する値または関数を実装できます。

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function() {
    console.log(this.sound);
  };
}

const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

結果は以下の通りです。

멍멍
야옹

オブジェクトジェネレータを使用する場合、通常は大文字で関数の名前を先頭に置き、新しいオブジェクトを作成する場合はnewキーを前に付ける必要があります。

上のコードを見てみましょう。dogが持つsay関数はcatが持つ実行コードと同じですが、オブジェクトを作成するたびに新しい関数thisが作成されます。sayに設定します。

同じオブジェクトを使用して関数を構築する場合は、特定の関数または値を繰り返し使用できます。

プロトタイプ

プロトタイプは、次のようにオブジェクト作成者関数の下にあります。prototype.「必要な鍵」=入力コードで設定できます。

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

console.log(dog.sharedValue);
console.log(cat.sharedValue);

結果は以下の通りです。

멍멍
야옹
1
1

オブジェクト作成者の継承の取得

たとえば、catとdogという新しいオブジェクトジェネレータを作成するとします。次に,オブジェクト作成者がAnimalの機能を再利用すると仮定する.もしそうなら、このように実現することができます。

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

function Dog(name, sound) {
  Animal.call(this, '개', name, sound);
}
Dog.prototype = Animal.prototype;

function Cat(name, sound) {
  Animal.call(this, '고양이', name, sound);
}
Cat.prototype = Animal.prototype;

const dog = new Dog('멍멍이', '멍멍');
const cat = new Cat('야옹이', '야옹');

dog.say();
cat.say();

新しく作成したDogとCat関数でAnimalを使用します。最初のパラメータにthisとAnimalオブジェクトジェネレータ関数に必要なパラメータが含まれているcall関数を呼び出します。

プロトタイプを共有する必要があるため、継承されたオブジェクトジェネレータ関数を作成した後、プロトタイプ値をAnimalに設定します。プロトタイプに設定します。

カテゴリ

クラスはC++,Java,C#,PHPなど他のプログラミング言語が持つ機能であるが,javascriptにはクラス構文がなく,従来のjavascriptにはクラス構文がなかったため,上記のコードのようにオブジェクトジェネレータ関数を用いて類似のタスクを実現する.

ES 6にはClassという構文が追加され、オブジェクトジェネレータで実装したコードをより明確かつ簡潔に実現できます。また、継承もずっと簡単です。

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}

const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

ここでは,クラス内部にsayという関数を宣言し,クラス内部の関数を「メソッド」と呼ぶ.このようにメソッドを作成すると、prototypeとして自動的に登録されます。

classを使用すると、他のクラスを簡単に継承できます。

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}

class Dog extends Animal {
  constructor(name, sound) {
    super('개', name, sound);
  }
}

class Cat extends Animal {
  constructor(name, sound) {
    super('고양이', name, sound);
  }
}

const dog = new Dog('멍멍이', '멍멍');
const cat = new Cat('야옹이', '야옹');

dog.say();
cat.say();

継承時にextendsキーワードを使用し、コンストラクション関数で使用されるsuper()関数は継承クラスのジェネレータを指します。

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say(){
    console.log(this.sound);
  }
}



class Dog extends Animal {
  constructor(name, sound) {
    super('개', name, sound);
  }
}

class Cat extends Animal {
  constructor(name, sound) {
    super('고양이', name, sound);
  }
}

const dog = new Dog('멍멍이', '멍멍');
const dog2 = new Dog('왈왈이', '왈왈');
const cat = new Cat('야옹이', '야옹');
const cat2 = new Cat('냐옹이', '냐옹');

dog.say();
dog2.say();
cat.say();
cat2.say();