JS의 프로토타입 및 기생 상속에 대한 자세한 설명(코드 예)

이 글은 JS의 프로토타입과 기생 상속에 대한 자세한 설명(코드 예제)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

서문: 최근 Javascript Advanced 프로그래밍을 주의 깊게 읽고 있는데, 중국어 버전의 번역이 여러 곳에 있어서 만족스럽지 못한 부분이 있어서 제가 이해하는 대로 해석하려고 노력합니다. 혹시 잘못된 점이나 누락된 부분이 있으면 지적해 주시면 정말 감사하겠습니다. 이 기사의 내용 대부분은 "JavaScript Advanced 프로그래밍, 제3판"에서 인용되었습니다.

프로토타입 상속

Douglas Crawford는 2006년에 Prototypal Inhertitance in JavaScript(Prototypal Inheritance in JavaScript)라는 제목의 기사를 썼습니다.

이 글에서는 엄밀한 의미에서 생성자를 사용하지 않는 상속 구현 방법을 소개합니다.

프로토타입을 사용하여 사용자 정의 유형을 만들지 않고도 기존 개체를 기반으로 새 개체를 만드는 아이디어입니다.

이 목표를 달성하기 위해 그는 다음과 같은 기능을 제공했습니다.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F();
}

object() 함수 내에서 임시 생성자가 먼저 생성된 다음 전달된 객체가 이 생성자의 프로토타입으로 사용되고 마지막으로 이 임시 유형의 새 인스턴스 객체가 반환됩니다.

기본적으로 object()는 전달된 객체의 얕은 복사본을 수행합니다.

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = object(person);

/*
person1 = function object(person){
    function F(){};
    F.prototype = person1;
    return new F();
}()

person1 = function object({
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}){
    function F(){};
    F.prototype = {
        name: "Shaw",
        friends: ["Sharon", "Sandy", "Van"]
    }
    return {
    }
}

person1 = {

};

{}.__proto__ = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}
*/

person1.name = "Roc";
person1.friends.push("Roster");

var person2 = object(person);

person2.name = "Linda";
person2.friends.push("Jobs");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]

Crockford가 주장하는 프로토타입 상속에서는 다른 객체의 기반이 될 수 있는 객체가 있어야 합니다.

이러한 객체가 있는 경우 이를 object() 함수에 전달한 다음 특정 필요에 따라 얻은 객체를 수정할 수 있습니다.

ECMAscript5는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다.
이 메서드는 두 가지 매개 변수, 즉 새 개체의 프로토타입으로 사용할 개체와 (선택적으로) 새 개체에 대한 추가 속성을 정의하는 개체를 허용합니다.

Object.create() 및 object() 메서드는 매개변수를 전달할 때 동일하게 동작합니다.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = Object.create(person);
person1.name = "Roc";
person1.friends.push("Roster");

var person2 = Object.create(person);
person2.name = "Linda";
person2.friends.push("Messi");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]

Object.create() 메서드의 두 번째 매개 변수는 Object.defienProperties() 메서드의 두 번째 매개 변수와 형식이 동일합니다.

각 속성은 다음을 통해 전달됩니다. 자체 설명자가 정의되었습니다.

이 방법으로 지정된 모든 속성은 프로토타입 객체에 있는 동일한 이름의 속성을 재정의합니다.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Selina"]
}

var person1 = Object.create(person, {
    name: {
        value: "Roc"
    }
})

console.log(person1.name); //"Roc"

Object.create() 메서드를 지원하는 브라우저는 IE9+, Firefox 4+, Opera 12+ 및 Chrome입니다.

적용 가능한 시나리오:

생성자를 생성하기 위해 많은 노력을 기울일 필요는 없지만 한 개체가 다른 개체와 유사하게 유지되기를 원하는 경우 프로토타입 상속은 다음과 같습니다. 완벽하게 능숙해요.

참조 유형 값을 포함하는 속성은 프로토타입 패턴을 사용하는 것처럼 항상 해당 값을 공유한다는 점을 기억하는 것이 중요합니다.

parasitic 상속

기생 상속은 프로토타입 상속과 밀접한 관련이 있는 개념으로, 위대한 신 Crockerford에 의해 대중화되기도 했습니다.

기생 상속 개념은 기생 생성자 및 팩토리 패턴과 유사합니다.

상속 프로세스를 캡슐화하고 내부적으로 객체를 어떤 식으로든 향상시킨 다음 마침내 모든 작업을 수행한 것처럼 객체를 반환하는 함수를 만듭니다.

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

이 예에서 createAnother() 함수는 새 객체의 기초로 사용될 객체인 다른 매개변수를 받습니다.
그런 다음 object 매개변수(original)를 object() 함수에 전달하고 반환된 결과를 clone에 할당합니다.

clone 객체에 새로운 메소드 sayHi()를 추가하고 마지막으로 clone 객체를 반환합니다.

createAnother() 함수를 다음과 같이 사용할 수 있습니다.

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

var person = {
    name: "Shaw",
    friends: ["Sandy", "Sharon", "Van"]
}

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); //"hi"

이 예제의 코드는 사람을 기반으로 하는 새 개체인 anotherPerson을 반환합니다. 새 개체에는 사람의 모든 속성과 메서드가 있을 뿐만 아니라 자체적인 sayHi() 메서드도 있습니다.

기생 상속은 사용자 정의 유형 및 생성자가 아닌 객체가 주요 관심사인 경우에도 유용한 패턴입니다.

이전 상속 모드 시연에서 사용한 object() 함수는 필요하지 않습니다. 새 개체를 반환할 수 있는 함수는 이 모드에 적합합니다.

위 내용은 JS의 프로토타입 및 기생 상속에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!