JS|CoreとES 6+一括キャプチャプロトタイプ(3/5)

始まる前に

前回投稿した正解は、私は全部で10です.
いよいよ授業の番だ一度にpostingを3つやったらボロボロになります

ハリスコーヒーで延命して頑張りましたが、焦りすぎて残りの2ショットも終わりそうです...
「この章では、プロトタイプとclass、extends、import、exportキーワードについて説明します.」use strict"モードについても議論します.

プロトタイプ

コンソールウィンドウで次のコードを実行し、コールコンソールの内容を詳しく説明します.

// 생성자 함수 생성
function Person(name) {
	this.name = name;
}

// foo 객체 생성

var foo = new Person('foo');

console.dir(Person);
console.dir(foo);

+)コンソールの使用を続行します.log()を使いましたが、今回はコンソールです.dir()を使用しました.

console.logχ出力パラメータ伝達値

console.dirχ出力パラメータとして渡されるオブジェクトの属性

このような違いがあります.コンソール.dir(Object)では、オブジェクトのプロパティを詳細に表示できます.
console.dir(Person);

console.dir(foo);

console.dir(Person.prototype.constructor);

これは分かりやすい絵です.

ソース:内部JavaScript
新しいキーワードを使用してPerson()コンストラクション関数を使用してfooオブジェクトを作成すると、fooオブジェクトはproto([prototype]リンク)を作成します.
このprotoは,リンクを非表示にしてPerson()コンストラクタのPersonとする.プロトタイプオブジェクトを表示しています.

ソース:内部JavaScript
Person.prototypeオブジェクトも、内部protoによってリンクを非表示にする親コンセプトオブジェクトです.原型を見ている

プロトタイプフィルタ

これを「プロトタイプ生成」(Prototype Chaining)と呼ぶ👉 注意:配置
どこでチェニンの話を聞いたことがありますか.第1章ではスコプチェニンの概念を学びました.
内部実行コンテキストで最初に値を検索し、そうでない場合は外部実行コンテキストを参照して値を検索すると言いましたよね?
ここも似たような概念
まず、オブジェクト内でメソッドを検索する場合は、proto(prototypeリンク)を使用して親オブジェクトにナビゲートしてメソッドを検索できます.
異なる点は、親オブジェクトのメソッドをサブオブジェクトから書き込むことです.
では、原型がどのような状況で使われているのか見てみましょう.

function Person(name, age) { // 생성자 함수 생성
	this.name = name;
	this.age = age;
}

var pangsik = new Person('신광식', 29) 
var iu = new Person('이지은', 28)

pangsik.setOlder = function() {
	this.age += 1;
}
pangsik.getAge = function() {
	return this.age += 1;
}

iu.setOlder = function() {
	this.age += 1;
}
iu.getAge = function() {
	return this.age += 1;
}

まず、コンストラクション関数Personを定義します.
次にnewキーワードを使用してコンストラクション関数をインスタンス化します.
pangsikオブジェクトにsetOlderメソッドとgetAgeを追加しました.
iuオブジェクトにsetOlderメソッドとgetAgeも追加されました.
この場合、同じ方法を複数回繰り返して別のオブジェクトに作成するのは不便です.😤😤😤
開発者は繰り返しが好きではないからです.
繰り返す部分を改善する方法はありますか?Prototypeをそのまま使えば大丈夫です
先ごろ、子オブジェクトは親オブジェクトが持つメソッドが使用可能であることを示しました.
次に、Pangsikオブジェクトとiuオブジェクトの親Personオブジェクトにメソッドを追加します.
どちらのオブジェクトもsetOlder()メソッドとgetAge()メソッドを使用できます.
次のようにコードを変更しましょう.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.setOlder = function() {
	this.age += 1;
}
Person.prototype.getAge = function() {
	return this.age += 1;
}

var pangsik = new Person('신광식', 29)
var iu = new Person('이지은', 28)

pangsik.setOlder();
iu.setOlder();

一度だけ繰り返して操作しました
したがって,プロトタイプ概念を理解することで,繰返し作業を減らすことができる.
これにより、不要な方法が排除され、不要なメモリの浪費が回避されます.

class

いよいよクラスだES 5までクラスがなかったので,コンストラクタを用いてコンストラクタを作成した.
ES 6+はclassキーワードの追加を開始します.
まず、既存のES 5構文のコンストラクション関数を使用して作成されたインスタンスオブジェクトです.

//ES5
function Person(name, age) { // 생성자함수
  this.name = name;
  this.age = age;
}

Person.prototype.profile = function() { // 프로토타입
  return '이름 : '+ this.name + '나이 : '+ this.age;
}

var iu = new Person('이지은', 28); // iu 객체 생성

iu.profile(); //"이름: 이지은 나이 : 28" // 프로토타입 체이닝을 이용한 메서드 사용

次はclassキーを使用して作成されたインスタンスオブジェクトです.

//ES6
class Person {
	constructor(name, age) { //생성자 함수
          this.name = name;
          this.age = age;
	}
	profile() {  // 객체 메서드
      	  return '이름 : '+ this.name + '나이 : '+ this.age;
	}
}

let iu = new Person('이지은', 28); // iu 객체 생성
iu.profile(); //"이름: 이지은 나이 : 28" // 객체 메서드 사용

まずclassでは、既存のコンストラクション関数ではなくコンストラクション関数()が表示されます.
さらに、profile()メソッドはprototypeではなくclass内部に表示されます.
ES 6+は、クラスベースの言語で以前に見られた構造を提供する.
+)classキーワードは正式に文法糖(文法糖)として表される.新機能というより、既存のprototypeで抽象的に動作するキーワードです.しかし、文法糖という説に反対する人もいる.
これはhttps://gomugom.github.io/is-class-only-a-syntactic-sugar/ Postingで読むことができます

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

PSとIUという新しいオブジェクト作成者を作成したとします.
オブジェクト作成者がPersonの機能を再使用したとします.

function Person(job, name, age) {
  this.job = job;
  this.name = name;
  this.age = age;
}

Person.prototype.profile = function() {
  return '직업 : '+ this.job + ' 이름 : '+ this.name + ' 나이 : '+ this.age;  return '직업 : '+ this.job + ' 이름 : '+ this.name + ' 나이 : '+ this.age;
};

function PS(name, age) {
  Person.call(this, 'Programmer', name, age);
}
PS.prototype = Person.prototype;

function IU(name, age) {
  Person.call(this, 'Singer', name, age);
}
IU.prototype = Person.prototype;

var ps = new PS('신광식', '29');
var iu = new IU('이지은', '28');

ps.profile(); // "직업 : Programmer 이름 : 신광식 나이 : 29"
iu.profile(); // "직업 : Singer 이름 : 이지은 나이 : 28"

プロトタイプを共有する必要があるため、継承されたオブジェクトジェネレータ関数を作成した後、PS.prototype、iu.プロトタイプ値はPersonです.Prototypeに設定します.
call()法を用いて実施した方法は,想像以上に複雑であり,可読性に欠けている.
しかし,ES 6+からclassとextendsキーワードの出現により継承が容易になった.

extends

継承時にextendsキーワードを使用し、コンストラクション関数で使用されるsuper()関数は継承クラスの作成者を指します.

class Person {
    constructor (job, name, age) {
        this.job = job;
        this.name = name;
        this.age = age;
    }
    profile() {
      return '직업 : '+ this.job + ' 이름 : '+ this.name + ' 나이 : '+ this.age;
    }
}

class PS extends Person { // Student 클래스에서 Person 클래스를 상속
    constructor (name, age) {
        super('Programmer', name, age) // super() 함수가 상속받은 클래스의 생성자를 가르킴.
          this.name = name;
          this.age = age;
    }
}

class IU extends Person { // Student 클래스에서 Person 클래스를 상속
    constructor (name, age) {
        super('Singer', name, age) // super() 함수가 상속받은 클래스의 생성자를 가르킴.
          this.name = name;
          this.age = age;
    }
}

const ps = new PS('신광식', '29');
const iu = new IU('이지은', '28');

ps.profile(); // "직업 : Programmer 이름 : 신광식 나이 : 29"
iu.profile(); // "직업 : Singer 이름 : 이지은 나이 : 28"

Module System

反応の指数.js内部から見ると、import react from「react」;import ReactDOM from 'react-dom'; 表示されるコードは同じです.これをモジュールシステムと呼ぶと、importやexportなどのキーワードがあります.
これも非常に重要なキーワードです.よく知っておくべきです.

义齿

exportは、内部スクリプトオブジェクトを外部スクリプトにモジュール化します.

exportが宣言されていない場合は、インポートは使用できません.

エクスポートには、nameとdefaultの2つの方法があります.

nemed export

name exportを使用する場合は、インポート・スクリプトに上記の指定した名前を使用する必要があります.

をエクスポートする場合は、asで名前を変更できます.

// 각각 선언
export const string = 'string'
export const array = [1,2,3]
export const obj = {obj:'obj'}
export function func(){console.log(a)}
// 힌번에 선언
export {string, array, obj, func as f}

default export

exportの後にdefaultを書く必要があります.

default exportでは1つのオブジェクトしか宣言できないため、スクリプトマスターオブジェクトに宣言することをお勧めします.

default exportはconst、let、varとともに宣言できません.

export default func; // 단일 선언
export {string, array, obj, func as default}

re-export

importにインポートされたオブジェクトは、exportとして再宣言できます.

//default로 받아온 객체는 다음과 같이 as를 이용해서 변수명을 정해 export를 선언할 수 있다.
export {default as foo, string} from './Export.js'

//import 한 모든 객체를 내보내야 한다면 
export * from './Export.js'

import(インポート)

宣言

importを使用して、宣言からエクスポートされたオブジェクトを外部からインポートできます.

名前付きエクスポートオブジェクトimportの宣言

// 각각 선언
import {string, array, obj} from './Export.js'

// 한번에 선언
import * as module from './Export'

module.string
module.array
module.obj

default exportを宣言するオブジェクトimport

// default만 선언
import foo from './Export.js'

// 다른 것과 함께 가져오기
import foo, {string, array, obj} from './Export'

// 같은 객체에서 선언
import {default as foo, string, array, obj} from './Export'

+)ES 6のmoduleシステムにおけるモジュールのデフォルトは厳格モード(use strict)である.

use strict

use strictはes 5構文であり、厳格モードとも呼ばれる.

では、一般的な符号化エラーが検出され、異常を引き起こす可能性があります.

相対的に安全でない動作の発生を防止する.

が正しく考慮されていない機能を無効にします.

サンプルコード
「use strict」は上部にある必要があります.
厳密モードで宣言されていない変数を参照すると、参照エラーが発生します.

'use strict'; //strict 모드 실행
a = 3; //Uncaught ReferenceError: a is not defined

use strictは、関数でのみ宣言される場合、関数でのみ厳格なモードで実行されます.
グローバル可用性は以前と同じです.

function() {
'use strict' 
 ...
}

変数、関数、パラメータの削除中にSyntaxErrorが発生します.

'use strict'

var x =1;
delete x; //SyntaxError: Delete of an unqualified identifier in strict mode.

fuction foo(a) {
	delete a; //SyntaxError: Delete of an unqualified identifier in strict mode.
}
delete foo; //SyntaxError: Delete of an unqualified identifier in strict mode.

パラメータ名が重複している場合、SyntaxErrorが表示されます.

'use strict';

  //SyntaxError: Duplicate parameter name not allowed in this context
  function foo(x, x) {
    return x + x;
  }
  console.log(foo(1, 2));

with文を使用するとSyntaxErrorになります.

'use strict';

  // SyntaxError: Strict mode code may not include a with statement
  with({ x: 1 }) {
    console.log(x);
  }

一般関数のthis
strictモードで通常の関数として関数を呼び出すと、undefinedがバインドされます.
これは、コンストラクション関数ではなく一般関数がこの関数を使用する必要がないためです.
エラーは発生しません.

'use strict';

  function foo() {
    console.log(this); // undefined
  }
  foo();

  function Foo() {
    console.log(this); // Foo
  }
  new Foo();

復習する

Prototypeでメソッドを追加したら、インスタンスオブジェクトにそのメソッドを使用するコードを作成してください.🙌