04.コンストラクタ

📌 4-1ジェネレータ関数とは?

ES 6構文の前に、関数の関数をクラス形式で使用できます.
💡 new演算子を使用してクラスのようにオブジェクトを作成します.(インスタンスの作成)
💡 この機能を使用して外部からアクセスします.
💡 var、let、constを使用して変数を生成する場合は、コンストラクション関数でのみ演算できます.
💡 Class Namingのようにパスカル表記法で区別します.

📌 なぜ4-2構造関数を使用するのか

インスタンスを作成するクラスのように、オブジェクトを効率的に作成できます.

// 좌항 피연산자가 10 우항 피연산자가 2 더하기 연산을 수행하는 add()를 포함하는 Obj생성
const sum1 = {
    num1 : 10,
    num2 : 2,
    add() {
        return this.num1 + this.num2;
    }
}
// 좌항 피연산자가 10 우항 피연산자가 10 더하기 연산을 수행하는 add()를 포함하는 Obj생성
const sum2 = {
    num1 : 10,
    num2 : 10,
    add() {
        return this.num1 + this.num2;
    }
}
console.log(sum1.add()); // 12 출력
console.log(sum2.add()); // 20 출력

オブジェクトテキストとして作成すると、同じアウトラインを持つ複数のオブジェクトが作成され続け、異なる結果値が得られます.

// 생성자 함수를 이용한 Obj 생성
function Sum(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = function() {
        return this.num1 + this.num2;
    }
}
// 인스턴스 sum1 생성
const sum1 = new Sum(10, 2);
// 인스턴스 sum2 생성
const sum2 = new Sum(10, 10);
console.log(sum1.add()); // 12 출력
console.log(sum2.add()); // 20 출력

これにより、異なる結果値を持つオブジェクトを効率的に作成できます.

📌 4-3コンストラクション関数の外部アクセス内部アクセス

コンストラクション関数を使用すると、外部アクセス可能な変数thisと外部アクセス不可の変数を作成できます.

varを使用するのは関数レベルスキャンなので、外部のグローバル変数化は発生しませんが、内部で発生するのでconstとletを使用します.

function Sum(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    const numPrivate = 2;
    this.add = function() {
        return this.num1 + this.num2 - numPrivate;
    }
}
// 인스턴스 생성
const sum1 = new Sum(10, 2);
// 외부에서 접근 가능
console.log(sum1.num1); // 10 출력
console.log(sum1.numPrivate); // undefined 출력
console.log(sum1.add()); // 10 출력

同様に、内部で利用可能な変数と外部でアクセス可能な変数のみが生成される.

📌 4-4ジェネレータ関数の作成条件

コンストラクション関数を使用してインスタンスを作成するには、通常の関数で定義された関数しか使用できません.

// 함수 선언문
function Sum(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
}
// 함수 표현식
const FunSum = function (num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
}
// 화살표 함수 정의식
const ArrowSum = (num1, num2) => {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
}
// 각각 인스턴스 생성
const sum1 = new Sum(10, 2);
const sum2 = new FunSum(10, 2); 
const sum3 = new ArrowSum(10, 2);
console.log(sum1.add()); // 12 출력
console.log(sum2.add()); // 12 출력
console.log(sum3.add()); // 오류 출력
👉 'ArrowSum is not a constructor' (오류)

これは、関数を作成する際に使用される内部メソッドによるものです.
1.一般的な関数呼び出しを使用して、内部メソッドを呼び出します.
2.new演算子とコンストラクション関数を呼び出すと、内部メソッド[Construct]が呼び出されます.
💡 したがって、コンストラクション関数で使用される矢印関数はメソッドとして使用できますが、コンストラクション関数として使用できません.

📌 4-5 Callable, Constructor

関数式のプロトタイプと矢印関数定義のプロトタイプをチェックすると、コンストラクション関数として使用できない理由を決定できます.

const generalFunction = function () {} // 함수 표현식
const arrowFunction = () => {} // ES6 화살표 함수 정의식
console.log(generalFunction.prototype); // 이미지 참고
console.log(arrowFunction.prototype); // undefined 출력

👀 generalFunctionのプロトタイプでコンストラクション関数を使用する方法のため、コンストラクション関数としてコンストラクション関数を呼び出すことができます.

📌 4-6コンストラクション関数のthis

thisが指すオブジェクトは大きく3種類にバインドされています.
1.関数this->グローバルオブジェクトの呼び出し
2.オブジェクトメソッドとして呼び出す->メソッド呼び出しオブジェクト
3.コンストラクション関数として呼び出す->作成したインスタンスオブジェクト

// 함수 생성
function generalFunction(num1, num2) {
    console.log(this);
    return num1 + num2;
}
// 객체 생성
const object = {
    num1 : 10,
    num2 : 10,
    add : function() {
        console.log(this);
        return this.num1 + this.num2;
    }
}
// 생성자 함수 생성
function ConstructorFunction(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        console.log(this);
        return this.num1 + this.num2;
    }
}
// sum1에 함수호출값 저장
const sum1 = generalFunction(10, 10);	
// sum2에 오브젝트 저장
const sum2 = object;
// sum3, sum4에 인스턴스 생성
const sum3 = new ConstructorFunction(10, 10);
const sum4 = new ConstructorFunction(10, 10);
// this가 인스턴스를 가르키는지 확인하기 위해서 sum5에 obj 저장
const sum5 = object;
// obj안에 있는 num1에 20 재할당
sum2.num1 = 20;
// 인스턴스 객체 sum4에 this.num1 = 20 재할당
sum4.num1 = 20;
console.log(sum1); // 20 출력 전역객체 this
console.log(sum2.add()); // 30 출력 객체 Obj 가르키는 this 출력
console.log(sum3.add()); // 20 출력 새롭게 생성된 인스턴스를 가르키는 this 출력
console.log(sum4.add()); // 30 출력 새롭게 정의된 인스턴스를 가르키는 this 출력
console.log(sum5.add()); // 30 출력 객체 obj 가르키는 this 출력

📃 4-6説明

オブジェクトと配列は元の値ではないので、変数が格納値ではなく配列とオブジェクトを指すアドレス値を格納していると考えると、理解が早い.

sum2.num 1を20に変更すると、sum 5にもobjアドレス値が格納されるため、sum 5の出力値も変更されます.objの値が変更されたためです.

sum4.num 1を20に変更しても、インスタンスは新しく作成されたオブジェクトであるため、sum 3とsum 4は異なるアドレス値を持つ2つのオブジェクトを生成します.したがって,結果値も変化しない.

📌 4-7コンストラクション関数の結果値を返します。

コンストラクション関数の結果値はthisオブジェクトです.

// 생성자 함수 생성
function ConstructorFunction(num1, num2) {
    // 1. 빈 객체를 생성하고 this를 바인딩한다. (빈 객체 생성)
    // 2. this에 바인딩 값을 초기화 하고 생성자 함수가 받은 초기값을 할당한다.
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
    /* 3. 생성자 함수의 실행문이 종료되면 암묵적으로 생성자 함수가 받은 초기값으로 
    바인딩된 this를 반환한다. */
    // 명시적으로 return 값을 원시값으로 지정한다.
    return 0;
}
const sum = new ConstructorFunction(10, 10);
console.log(sum);

// 생성자 함수 생성
function ConstructorFunction(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
    // 명시적으로 return 값을 객체로 지정한다. (함수도 객체이다.)
    return {}; // function () {} 바꾸면 함수가 출력된다.
}
const sum = new ConstructorFunction(10, 10);
console.log(sum);

function ConstructorFunction(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    this.add = () => {
        return this.num1 + this.num2;
    }
    // 명시적으로 return 값을 this로 지정
    return this;
}
const sum = new ConstructorFunction(10, 10);
console.log(sum);

💡 コンストラクション関数は、インスタンスを生成するthisオブジェクトを返します.

📌 4-8コンストラクション関数メソッドをプロトタイプとして作成

卒業作品プロジェクトを行う際,本テンプレートモジュールはプロトタイプ構築関数メソッドを生成している.これもきれいに見えるので、卒業作品プロジェクトではモジュールを作るときにこのように使います.

function ConstructorFunction(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
}
ConstructorFunction.prototype.add = function() {
    return this.num1 + this.num2;
}
const sum = new ConstructorFunction(10, 10);
console.log(sum.add()); // 20 출력

👉 bind(), call(), apply(), ES6 new.targetなどの構造関数の概念はまだたくさんあるようですが...長くなりすぎそうなので次回はアレンジします