자바스크립트 빌린 생성자 분석(예제 포함)

이 글의 내용은 JavaScript 차용 생성자 분석에 대한 것입니다.(예제 포함) 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.

생성자 차용

프로토타입에 참조 유형 값이 포함되어 발생하는 문제를 해결하기 위해 개발자는 생성자 훔치기라는 기술을 사용하기 시작했습니다.

가짜 개체 또는 고전 상속이라고도 합니다.

이 기술의 기본 아이디어는 매우 간단합니다. 하위 유형 생성자 내부에서 상위 유형 생성자를 호출하는 것입니다.

함수는 특정 환경에서 코드를 실행하는 객체일 뿐이므로, 새로 생성된 객체에 대해서도 apply(), call() 메소드를 이용하여 생성자를 실행할 수 있습니다.

function SuperType() {
    this.colors = ["red","blue","green"];
}

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push("black");
console.log(instance1.colors); //["red","blue","green","black"]

var instance2 = new SubType();
console.log(instance2.colors); //["red","blue","green"]

이 코드 조각은 상위 유형의 생성자를 "빌려"옵니다.

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}

call() 메서드(또는 apply() 메서드도 사용)를 사용하면 생성할 SubType 인스턴스 개체의 컨텍스트에서 실제로 SuperType 생성자가 호출됩니다.

이런 방식으로 SuperType() 함수에 정의된 모든 개체 초기화 코드는 새 SubType 개체에서 실행됩니다.

따라서 SubType의 각 인스턴스 객체에는 색상 속성의 자체 복사본이 있습니다

매개변수 전달

프로토타입 체인과 비교하여 생성자를 차용하는 것은 큰 이점이 있습니다. 즉, 하위 유형에서 사용할 수 있다는 것입니다. 유형 생성자의 상위 유형 생성자에 매개변수를 전달하십시오.

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

function SubType(){
    //继承了SuperType，同时还传递了参数
    SuperType.call(this, "Shaw");

    //实例属性
    this.age = 18;
}

var instance = new SubType();

console.log(instance.name); // "Shaw"
console.log(instance.age); // 18

위 코드의 SuperType은 속성에 직접 할당되는 하나의 매개변수 이름만 허용합니다.

SubType 생성자 내에서 SuperType 생성자를 호출하면 실제로 SubType 인스턴스 객체에 대해 name 속성이 설정됩니다(이 포인터는 실행 컨텍스트와 관련됨).

SuperType 생성자가 하위 유형의 속성을 재정의하지 않도록 하려면 상위 유형의 생성자를 호출한 후 하위 유형에 정의되어야 하는 속성을 추가할 수 있습니다.

생성자 차용의 문제

생성자만 빌리면 생성자 패턴의 문제를 피할 수 없습니다.

메서드는 모두 생성자에 정의되어 있으며, 함수를 재사용할 수 있는 방법이 없습니다. 객체가 인스턴스화될 때마다 해당 메소드는 본질적으로 각 인스턴스 객체에서 다시 생성되므로 메모리와 리소스가 낭비됩니다.

게다가 슈퍼 유형의 프로토타입에 정의된 메소드는 하위 유형에도 표시되지 않습니다(여기에서는 프로토타입 객체가 사용되지 않고 하위 유형의 프로토타입 체인이 실제로 Object를 가리키기 때문입니다). 생성자 패턴을 사용합니다.

이러한 문제를 고려하여 생성자를 빌리는 기술은 단독으로 사용되는 경우가 거의 없습니다.

위 내용은 자바스크립트 빌린 생성자 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!