モダンJavaScript Deep Dive 17章-コンストラクション関数によるオブジェクトの作成

オブジェクトジェネレータ関数

const person = new Ojbect(); //빈 객체 생성 {}

コンストラクション関数:new演算子とともに呼び出され、オブジェクト(インスタンス)を作成する関数
Date,String,Number,Boolean,Array...

コンストラクタ

オブジェクトテキストがオブジェクトを作成する方法の問題

同じプロセスを持つ複数のオブジェクトを宣言する場合は、複数のコードを同時に記述する必要があります.

const person1 = {
	name : 'aj',
    hi(){
		console.log(`hi i'm ${name}`);
    };

const person2 = {
	name : 'sam',
    hi(){
		console.log(`hi i'm ${name}`);
    };

コンストラクション関数によるオブジェクトの作成の利点

同じ構造の複数のオブジェクト(オブジェクトを作成するテンプレートなど)を作成する簡単な方法

function Person(name){
	this.name = name;
    this.hi = function(){
    	console.log(`hi i'm ${name}`);
    };
}

const person1 = new Person('aj');
const person2 = new Person('sam');

this

の一般的な関数を呼び出すと、グローバルオブジェクト

を指します.

メソッド呼び出し:

呼び出しメソッドのオブジェクトを示す

コンストラクタが呼び出されたとき:

は、将来作成されるインスタンスを示します.
コンストラクション関数を呼び出すときにnew演算子を使用しない場合は、通常の関数として使用されます.

コンストラクション関数インスタンスの作成プロセス

new演算子とともにコンストラクション関数を呼び出すと、JavaScriptエンジンは黙ってインスタンスを作成、初期化し、返します.

インスタンスを作成してバインドする

空のオブジェクト(インスタンス)を暗黙的に作成してバインド
これは、作成されたインスタンスを示します.
関数内のすべてのコードは、1行の実行時よりも先に発生します.

インスタンスの初期化

コンストラクション関数のコードに従ってthisが示すインスタンスを初期化
=プロパティとメソッドを空のオブジェクトに追加

インスタンスを返す

デフォルトではthisが返され、コンストラクション関数内ですべての処理を完了したインスタンスがバインドされます.
returnを省略し、デフォルトはthisで返されます.
return{特定のオブジェクト}を実行すると、このオブジェクトは返されず、特定のオブジェクトが返されます.
return元の値は無視され、この値が返されます.

内部メソッドと構成

関数はオブジェクトなのでpropertyとメソッドを持つことができます
関数オブジェクトも通常のオブジェクトによって所有され、内部スロットと内部メソッドがあります.
しかし、関数は呼び出すことができます.
関数オブジェクトにのみ使用できる内部スロットと内部メソッド
関数が通常の関数として呼び出されると「呼び出し」が呼び出され、コンストラクション関数が新しい演算子とともに呼び出されると「Construct」が呼び出されます.
関数オブジェクトは呼び出し可能でなければなりません
[Construct]あってもなくてもいい

構造と非構造の区別

矢印関数とメソッドサムネイルでのみ宣言される関数はnon-constructです.
関数宣言文と関数式はconstructです

const hi = () => {
	console.log('hi');
};
new hi() // [[construct]]가 없으므로 에러

const obj = {
	hi(){
    console.log('hi');
    }
};
new obj.hi(); // [[construct]]가 없으므로 에러

新しい演算子

一般関数と構造関数は形式的に区別がない
new演算子とともに関数を呼び出すと、コンストラクション関数として実行されます.
したがって,ネーミングにはパスカルケースを用いる.
new呼び出しなしコンストラクション関数の場合は、通常関数として使用します.
一般的な関数として、グローバルオブジェクト(ウィンドウ、グローバル)を指します.

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

const person1 = Person('aj');
console.log(person1); // undefined
console.log(name) // 전역객체에 name프로퍼티의 값인 aj 출력

new.target

IEサポートなし、ES 6サポート
new演算子とともにコンストラクション関数によって呼び出される関数のうち、new.targetは関数自体を指す
通常の関数として呼び出された関数の内部new.targetは未定義です
newを失われたときもコンストラクション関数のように動作させる

function Person(name){
	if (!new.target){
		return new Person(name);
    }
    this.name = name;
}


// 스코프 세이프 생성자 패턴으로 똑같이 동작하게 
// 생성자 함수가 new연산자와 함께 호출되면 바로 빈 객체를 생성하고
// this와 바인딩이 되고 this는 Person과 프로토타입에 의해 연결됨
// 일반 함수로 호출이 됐다면 this는 window객체를 가르킬꺼임
function Person(name){
	if (!(this instanceOf Person)){
		return new Person(name);
    }
    this.name = name;
}

Object,Functionコンストラクション関数はnewを使用しないときの挙動が同じである
String、Number、Boolean newを使用しない場合、返される元の値自体にデータ型のみが適用されます.