Class

オブジェクトの作成

ES 6に追加された機能は、コンストラクション関数のようにオブジェクトを作成するテンプレートとして機能します.
まず,生成オブジェクトの基本構文を見る.

const User = function (name, age) {
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};

//User.prototype.showName = function () {
//  console.log(this.name);
//}; 아래 생성자 Class처럼 프로토타입에 메소드를 저장시킬 경우

const Mike = new User('Mike', 26);
console.log(Mike);
//User { name: 'Mike', age: 26, showName: [Function (anonymous)] }
Mike.showName();
//Mike

これは,以前学習したようにコンストラクション関数を用いてオブジェクトを生成する様子である.
今回は、Classを使用してオブジェクトを作成します.

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const Tom = new User2('Tom', 28);
console.log(Tom);
//User2 { name: 'Tom', age: 28 }
Tom.showName();
//Tom

オブジェクト生成時にnewを貼り付けるのと생성자 함수を貼り付けるのと同じです.
しかしClass 내부は생성자 함수とは異なる.constructは、オブジェクトを生成する方法である.
オブジェクト内の메소드 함수は、생성자 함수と同様に、オブジェクト内部にメソッドを格納するのではなく、オブジェクト内部にメソッドを格納する.
したがって、生成されたオブジェクトをClassで出力する場合、メソッドは見えないが実行可能である.

継承

extendsを使用して、他の객체 생성 Classを継承することができる.

class Car {
  construct(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log('drive..');
  }

  stop() {
    console.log('STOP !!');
  }
}

class Bmw extends Car {
  park() {
    console.log('PARK ~');
  }
  stop() {
    console.log('멈춥니다.');
  }
}

const z4 = new Bmw('black');

z4.drive();	//drive..
z4.stop();	//멈춥니다.
//stop은 Bmw Class에서 자식 Class인 Car의 stop(); 메소드를 덮어 씌웠기 때문에 'STOP !!'이 아닌 '멈춥니다.'가 출력된다.
z4.park();	//PARK ~

に火をつける

メソッドオーバーロード

class Car {
  construct(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log('drive..');
  }

  park() {
    console.log('PARK ~');
  }
}

class Bmw extends Car {
  stop() {
    console.log('멈춥니다.');
  }
  park() {
    super.park();
    console.log('띠리리리 띠리리리리');
  }
}

const z4 = new Bmw('black');

z4.drive();	//drive..
z4.stop();	//멈춥니다.
z4.park();	//PARK ~
		//띠리리리 띠리리리리
//park는 super.park();를 이용하여 자식 클래스인 Car Class의 park(); 메소드를 사용하고 그 다음 console.log로 워딩을 출력한다.

ジェネレータオーバーライド

부모 Classで生成された値を取得するには、부모 생성자を呼び出す必要があります.
まず間違った例を見る.

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log('drive..');
  }

  stop() {
    console.log('STOP !!');
  }
  park() {
    console.log('PARK ~');
  }
}

class Bmw extends Car {
  constructor() {
    this.navigation = 1;
  }
}

const z4 = new Bmw('black');

console.log(z4);
//Error

このような正常な場合、生成された値は、サブClassから取得できないことが分かる.
なぜなら、extendsを使用して作成されたClassは、サブオブジェクトがあるため、빈 객체の生成および初期化のフェーズをスキップし、パラメータを부모Classから자식Classに渡すことができないからである.
次のように解決しましょう.

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log('drive..');
  }

  stop() {
    console.log('STOP !!');
  }
  park() {
    console.log('PARK ~');
  }
}

class Bmw extends Car {
  constructor(color) {//인자를 받아서
    super(color);// 자식 Class에 인자를 전달하여 정상적으로 자식 Class에서 값을 생성할 수 있도록 함.
    this.navigation = 1;
  }
}

const z4 = new Bmw('black');

console.log(z4);
//Bmw { color: 'black', wheels: 4, navigation: 1 }

サブクラスで生成された値を正常に取得できます.

Promise

const pr = new Promise((resolve, reject)=>{
 	//resolve = 성공했을 때의 실행하는 함수
   	//reject = 실패했을 때의 실행하는 함수
  
  
	//code . . . 
});

上記のことが完了(成功または失敗)したときに実行される関数をcallback 함수と呼びます.Promise 함수は、stateおよびresultに基づいている.
これは、関数が最初に作成されると、各stateにpending、すなわち待機値があり、resultには未定義の未定義値があることを意味します.
success(成功、すなわちresolve)が呼び出されると、プロセス関数のステータスは完了した値になり、resultには値があります.
逆に、失敗した場合に拒否するとpromis関数の状態が拒否された値になり、結果にエラー値があります.
次の例を示します.

const pr = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK');
  }, 3000);
});

pr.then(
  function (result) {
    console.log(result + '!, 가지러 가자');
  },
  function (err) {
    console.log('다시 주문 해주세요.');
  },
);

3秒後に正常に呼び出されたPromis関数が適用されると、3秒後にOK!, 가지러 가자!が出力されます.
ここでthenの役割は成功失敗の順序で、1つ目は成功時に実行される関数を入力し、2つ目は失敗時に実行される関数を入力します.
代わりにcatchとfinallyですが、上記の例のthenは同じフォーマットでまずcatch

pr.then(function (result) {	//성공 시에
  console.log(result + '!, 가지러 가자');
}).catch(function (err) {	//실패 시에
  console.log('다시 주문 해주세요.');
});

表示で明確に区別して、読みやすさがよく、間違いも起こりやすいので、使うことをお勧めします.
ここでfinallyを使う

pr.then(function (result) {	//성공 시에
  console.log(result + '!, 가지러 가자');
}).catch(function (err) {	//실패 시에
    console.log('다시 주문 해주세요.');
}).finally(function () {	//항시 실행
    console.log('=== 주문 끝 ===');
});

最終的な役割は、成功しても失敗しても実行時に実行しなければならない関数を実行する役割です.
対応するPromis関数に対して、私にとって、これはとても複雑な概念で、復習して、そしてどのようにある場所に応用するかを考えなければなりません.

async / await

awaitはasync関数でのみ操作されるキーワードです.
関数外で使用する場合、SyntaxErrorが発生します.
Promise関数を待つと、wait文はPromiseが完了または拒否するまでasync関数の実行を一時停止します.Promiseが完了すると、async関数は一時停止部分から実行されます.待機文の戻り値はPromiseで完了します.拒否された場合、待機文は拒否された値を放出します.

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

上記の例のf 1関数では変数x awaitが使用されています.
この関数が実行されると、変数xが存在する行では実行が一時停止し、Promiseの実行(解析)を待って実行されます.変数xに値を指定し、2秒後にコンソールに10を印刷します.
すなわち、待機機能は、インフラストラクチャの処理を待機している間にエンジンが他のタスク(他のスクリプトの実行、イベントの処理など)を実行できるため、CPUリソースを無駄にしない.
待つ約束.これはその時よりも精巧にPrimis結果値を得る文法である.promise.そして毒性がよく、使いやすいように見えます.

Generator

Generatorは、関数の実行を一時停止して実行を続行する機能です.

function* fn() {
  console.log('1');
  yield 1;
  console.log('2');
  yield 2;
  console.log('3');
  console.log('4');
  yield 3;
  return 'finish';
}

const a = fn();

上記の形式で関数の横に*を付けてサードパーティ関数を宣言し、中には降伏というブレーキが入っています.
最初の実行時は何も表示されませんでしたが、コンソールにa.next();と入力すると、次のブレークポイント(降伏*;)構造を実行します.この例では、最後のブレークポイントが経過すると"finish"に戻り、nextを再実行するとundefined値が得られる.
ジェニー・レイトの特徴は
iterable

Symbol.反復器の方法があります.

Symbol.反復器は反復器に戻らなければなりません.

iterator

nextメソッドがあります.

nextメソッドは、valueおよびdone属性を持つオブジェクトを返します.

の作業が完了すると、doneはtrueになります.

=============復習と修正が必要==========

ソース

内容:https://www.youtube.com/watch?v=4_WLS9Lj6n4
内容:https://juicyjerry.tistory.com/153