JS 학습 시리즈의 목적

이 시리즈는 잭이 배운 자바스크립트의 기계 장치도 출력한다
지식과 이해를 공유하기 위해서다.
(이해에 오류가 있으면 지적해 주세요.)

구조기 함수

새 대상의 초기 함수
구조기 함수는 일반 함수와 달리 전용new 연산자로 대상을 생성한다.
main.js

function A() {
    this.prop = 0;
}

const obj = new A();

위에서 말한 바와 같다new 연산자가 만든 대상을 실례라고 하고, new 연산자로 만든 실례를 실례라고 한다.
※ 구조기 함수에서는 함수 이름의 첫머리를 대문자로 쓴다.

이른바 프로타입

객체에 존재하는 특수 속성
"배합 구조기 함수 사용"
main.js

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

Person.prototype.hello = function() {
    console.log('hello ' + this.name);
}

const bob = new Person('Bob', 18);
const tom = new Person('Tom', 33);
const sun = new Person('Sun', 20);

bob.hello(); /*hello Bob*/
tom.hello(); /*hello Tom*/

console.log(bob);

위 코드에서prototype 속성에 hello 방법을 추가한 다음 new 연산자 실례화 대상에서 호출합니다.
따라서 집행 결과는 각자 논평의 내용이다.
여기, 봐봐console.log(bob)의 결과

위에서 말한 바와 같이 실례에 존재하는 __proto__ 중 이전의 prototype에 추가하다hello 보관하는 방법이 있습니다.
이를 통해 알 수 있듯이 실례화prototype의 참조는 __proto__에 복사되었다.
↑ 매우 중요하기 때문에 이해해야 한다!

프로타입을 사용하는 이유

위에서 말한 바와 같이 구조기 함수로 방법을 정의할 때 prototype로 정의한다.
그러나 prototype를 사용하지 않아도 구조기 함수로 직접 정의할 수 있다.
그렇다면 왜 prototype로 정의해야 합니까?
그것은 기억의 효율화를 위한 것이다.
다음 코드를 보십시오.
main.js

function Person1(name, age) {
    this.name = name;
    this.age = age;
    this.hello = function() {
        console.log('hello ' + this.name);
    }
}

const bob = new Person1('Bob', 18);
bob.hello(); /*hello Bob*/

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

Person2.prototype.hello = function() {
    console.log('hello ' + this.name);
}

const tom = new Person2('Tom', 33);
tom.hello(); /*hello Tom*/

위 코드에서Person1에서 구조기 함수에 직접 방법을 정의했고 Person2에서prototype에서 방법을 정의했다.
어느 것이든 실례화된 후 방법을 호출할 때의 실행 결과는 같다.
그러나 두 가지 차이점은 다음과 같습니다.

Person1의 실례에서 방법 자체를 메모리 공간에 복제하여 제작

Person2의 실례에서 prototype에서 정의한 방법의 참조를 __proto__

에 복사
즉 Person1의 쓰기 방법이라면 매번 실례를 생성할 때마다 추가hello 방법이 필요하기 때문에 여분의 메모리가 소모된다는 것이다.
다른 한편, Person2의 쓰기 기법이라면 실례를 생성할 때prototype의 인용이 복사되기 때문에 대상에 저장된 방법의 참조 대상이 모두 일치하기 때문에 여분의 메모리를 소모하지 않고 프로그램을 효과적으로 시작할 수 있다.
따라서 이 prototype 대상은 자바스크립트 메커니즘을 지탱하는 중요한 기술이다.

새 연산자

우선, new 연산자는
"구조자 함수에서 실례를 만드는 데 사용되는 연산자"
지금까지new산자도 사용했지만new산자로 구조기 함수에서 실례를 만들 때
구조기 함수의 반환값에 따라 동작이 변할 수 있다.

구조기 함수의 반환값이 대상이면 구조기는 return의 대상을 새로운 실례 대상으로 호출원으로 되돌려줍니다

구조기 함수의 반환값이 정의된 대상 이외나 반환값return이 없으면 구조기prototype의 인용을 실례__proto__로 복사합니다구조기에 사용된'this'를 호출원으로 되돌려주기(※ 실례를'this'의 참조점으로 구조기 함수 실행)

main.js

function F1(a, b) {
    this.a = a;
    this.b = b;
    return {};
}

const instance1 = new F1(1, 2);
console.log(instance1); /*{}*/

function F2(a, b) {
    this.a = a;
    this.b = b;
    return 1;
}

const instance2 = new F2(1, 2);
console.log(instance2); /*{a: 1, b: 2}*/

위 코드에서F1에서 반환값이 대상이기 때문에 new 연산자가 실례화될 때 return의 대상을 실례 대상으로 반환한 결과는 (이번의 경우){}(빈 대상)이다.F2에서는 반환값이 대상 이외의 원시값이기 때문에'new'연산자를 실례화할 때(이번에는 prototype에 정의된 방법이 없음)'prootype'의 참조를 __proto__로 복사하고,'this'의 참조 대상은 실례(이번 상황은instance2이다.

Instanceof 소개

"어떤 구조기가 생성한 대상인지 확인하세요."
main.js

function F(a, b) {
    this.a = a;
    this.b = b;
}

F.prototype.c = function() {}

const instance = new F(1,2);

console.log(instance instanceof F); /*true*/
console.log(instance.__proto__ === F.prototype) /*true*/

위 코드에서console.log(instance instanceof Object)에서 instance는F의 실례이기 때문에true 되돌아왔다.
그나저나 console.log(instance.__proto__ === F.prototype)에서는 instance.__proto__와 F.prototype가 같은 참조 대상이기 때문에 이것도 되돌아온다true.

instanceof 사용 예

instanceof 원형 체인으로 거슬러 올라가 검증해야 하기 때문에 다음과 같은 방식으로 함수에 전달된 매개 변수가 수조인지 대상인지 조건분지를 통해 함수를 집행할 수 있다
(※ 원형 체인... 원형의 다중 형성을 원형 체인이라고 한다)
main.js

function fn(arg) {
    if(arg instanceof Array) {
        arg.push('value');
    } else if (arg instanceof Object) {
        arg['key'] = 'value';
    }
    console.log(arg)
}

fn([]) /*["value"]*/

총결산

어때?
구조기 함수는 ES6에서 도입한 학급 문법의 기초 부분입니다. 잘 이해해 주십시오!