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

オブジェクト文字がオブジェクトを生成する方法は、最も一般的で最も簡単なオブジェクト生成方式である.オブジェクトテキストに加えて、さまざまな方法でオブジェクトを作成できます.

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

new演算子とともにオブジェクトジェネレータ関数を呼び出すと、空のオブジェクトが生成され、返されます.空のオブジェクトを作成したら、Propertyまたはメソッドを追加してオブジェクトを完了できます.

// 빈 객체의 생성
const person = new Object();


// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function() {
	console.log('Hi! My name is' + this.name);
};

console.log(person); // {name: "Lee", sayHello: f}
person.sayHello(); // Hi! My name is Lee

コンストラクション関数は、new演算子とともに呼び出してインスタンスを生成する関数です.コンストラクション関数によって生成されるオブジェクトをインスタンスと呼びます.
オブジェクト作成者関数を使用して空のオブジェクトを作成する必要はありません.オブジェクトの文字方式は簡単です.特に理由がない場合は、オブジェクトジェネレータ関数を使用してオブジェクトを作成する方法はあまり役に立たない場合があります.

2.コンストラクタ

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

オブジェクト文字は、オブジェクトを生成する方法は直感的で簡単ですが、1つのオブジェクトのみを生成します.同じプロパティを持つ複数のオブジェクトを作成する必要がある場合は、毎回同じプロパティを記述する必要があるため、効率が低下します.

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

コンストラクション関数を使用してオブジェクト(インスタンス)を作成するテンプレート(クラス)と同様に、コンストラクション関数を使用して同じproperty構造を持つ複数のオブジェクトを簡単に作成できます.

// 생성자 함수
function Circle(radius) {
	// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  	this.radius = radius;
  	this.getDiameter = function () {
    	return 2 * this.radius;
    };
}

// 인스턴스 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

new演算子とともに呼び出されると、関数はコンストラクション関数として動作します.new演算子とともにコンストラクション関数を呼び出さない場合は、コンストラクション関数ではなく通常の関数として使用されます.

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

コンストラクション関数の役割は、Property構造をテンプレート(クラス)として同じインスタンスを作成し、生成されたインスタンスを初期化することです.

// 생성자 함수
function Circle(radius) {
	// 인스턴스 초기화
	this.radius = radius;
  	this.getDiameter = function () {
    	return 2 * this.radius;
    };
}

// 인스턴스 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체 생성

JavaScriptエンジンは、次のサイレント処理によってインスタンスを作成し、返します.

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

コンストラクション関数によって作成されたインスタンスである空のオブジェクトを暗黙的に作成します.次に、空のオブジェクト(インスタンス)をthisにバインドします.この処理は、関数体のコードが行単位で実行される実行時よりも前に実行されます.

2.インスタンスの初期化

ジェネレータ関数で説明したコードは、thisにバインドされたインスタンスを初期化するために1行1行実行されます.インスタンスにバインドされたインスタンスにproperty、メソッドを追加し、パラメータが渡す初期値をpropertyに割り当てて初期化値と固定値を割り当てます.この処理は開発者によって説明される.

3.インスタンスを返す

コンストラクション関数内のすべての処理が完了すると、バインド完了インスタンスのthisがデフォルトで返されます.this以外のオブジェクトを明示的に返すと、thisは返されず、戻り文で指定したオブジェクトが返されます.
👀 バインド?
これは、識別子と値を関連付けるプロセスを意味します.たとえば、変数はバインド変数名とメモリ領域が確保されているアドレスを宣言します.thisバインドは、thisとthisが指すオブジェクトのバインドです.

2-4. 内部メソッド[コール]と[構成]

コンストラクション関数として呼び出すことは、new演算子とともに呼び出されてオブジェクトを生成することを意味します.関数はオブジェクトなので、通常のオブジェクトと同じにすることができます.

// 함수는 객체다
function foo() {}

// 함수는 객체이므로 프로퍼티를 소유할 수 있다.
foo.prop = 10;

// 함수는 객체이므로 메서드를 소유할 수 있다.
foo.method = function () {
	console.log(this.prop);
};

foo.method(); // 10

通常のオブジェクトを呼び出すことはできませんが、関数を呼び出すことができます.関数が通常の関数として呼び出されると、関数オブジェクトの内部メソッド(Call)が呼び出され、新しい演算子とともにコンストラクション関数として呼び出されると、内部メソッド(Construct)が呼び出されます.
内部メソッドを持つ関数オブジェクトをcallable、内部メソッドを持つ関数オブジェクトをconstruct、constructを持たない関数オブジェクトをnon-constructorと呼びます.
すべての関数オブジェクトを呼び出すことができますが、すべての関数オブジェクトがコンストラクション関数として呼び出されるわけではありません.

2-5. コンストラクション関数と非コンストラクション関数の区別

コンストラクション関数:関数宣言、関数式、クラス

非構造関数:メソッド(ES 6メソッド略)、矢印関数

2-6. 新しい演算子

new演算子とともに関数を呼び出すと、その関数はコンストラクション関数として動作します.呼び出されるのは、関数オブジェクトの内部メソッドではなく、「Construct」です.ただし、new演算子とともに呼び出される関数は、non-constructorではなくコンストラクション関数でなければなりません.逆にnew演算子がない場合にコンストラクション関数を呼び出すと、通常の関数が呼び出されます.呼び出されるのは、関数オブジェクトの内部メソッドではなく、呼び出されます.

2-7. new.target

ES 6はnew演算子なしでコンストラクション関数を呼び出すことを防止するためにnewする.支援目標.
new演算子とともにコンストラクション関数として呼び出される場合、関数内部のnew.targetとは、関数自体を指します.new演算子のない一般関数で呼び出される関数内部new.targetは未定義です.
ちなみに、IEではサポートされていない最新の文法.
モダンJavaScript Deep Diveを読んでまとめた文章.😊