JavaScript에서 상속을 구현하는 6가지 방법-JS 튜토리얼-php.cn

JavaScript의 상속 설명:

많은 객체 지향 언어는 인터페이스 상속과 구현 상속이라는 두 가지 상속 방법을 지원합니다. 인터페이스 상속은 메서드 시그니처만 상속하는 반면, 구현 상속은 실제 메서드를 상속합니다. JavaScript에서는 함수에 시그니처가 없기 때문에 인터페이스 상속을 구현할 수 없지만 구현 상속만 지원하며 구현 상속은 주로 프로토타입 체인을 통해 이루어집니다. ㅋㅋ 우선 프로토타입 체인에 대한 공식 문서의 설명을 인용하세요. 기본 아이디어는 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 하는 것입니다. 참조 유형. 이 개념을 이해하려면 먼저 생성자, 프로토타입 및 인스턴스 사이의 관계를 명확히 해야 합니다. 각 생성자(함수인 한)에는 객체를 가리키는 프로토타입 속성이 있습니다(이 객체는 생성자의 프로토타입 객체입니다). ); 프로토타입 객체(객체인 경우)에는 생성자를 가리키는 생성자 속성이 있으며 인스턴스에는 프로토타입 객체를 가리키는 내부 포인터 [[Prototype]]가 포함되어 있습니다. 직설적으로 말하면, 프로토타입 체인의 구성은 한 유형의 인스턴스를 다른 생성자의 프로토타입에 할당함으로써 달성됩니다. 이런 방식으로 하위 유형은 상위 유형에 정의된 모든 속성과 메서드에 액세스할 수 있습니다. 각 객체에는 프로토타입 객체를 템플릿으로 사용하여 프로토타입 객체의 속성과 메서드를 상속하는 자체 프로토타입 객체가 있습니다. 또한 프로토타입 객체는 자체 프로토타입을 가지며 계층별로 속성과 메서드를 상속할 수도 있습니다. . 이 관계를 프로토타입 체인이라고 하며 한 객체가 다른 객체에 정의된 속성과 메서드를 갖는 이유를 설명합니다.

Javascript에서 상속을 구현하는 6가지 방법:

1. 프로토타입 체인

2. 생성자 차용

3 . 결합 상속(프로토타입 체인을 결합하여 사용) 빌린 생성자)

4. 프로토타입 상속

5. 기생 상속

6. 기생 결합 상속(결합 상속과 기생 상속을 이용한 결합)

1. 프로토타입 체인

// 实现原型链的一种基本模式
function SuperType(){
            this.property = true;
}
SuperType.prototype.getSuperValue = function(){
            return this.property;
};
function SubType(){
            this.subproperty = false;
}

// 继承，用 SuperType 类型的一个实例来重写 SubType 类型的原型对象
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
            return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());     // true

로그인 후 복사

PS: SubType은 SuperType을 상속하며, SuperType의 인스턴스를 생성하고 해당 인스턴스를 SubType의 프로토타입에 할당하여 상속이 이루어집니다. 구현의 핵심은 하위 유형의 프로토타입 객체를 재정의하고 이를 새 유형의 인스턴스로 바꾸는 것입니다. 하위 유형의 새 프로토타입 객체에는 SuperType 프로토타입을 가리키는 내부 속성 [[Prototype]]과 SuperType 생성자를 가리키는 SuperType 프로토타입에서 상속된 속성 생성자가 있습니다. 최종 프로토타입 체인은 다음과 같습니다. 인스턴스는 SubType의 프로토타입을 가리키고, SubType의 프로토타입은 SuperType의 프로토타입을 가리키며, SuperType의 프로토타입은 Object의 프로토타입을 가리킵니다(모든 함수의 기본 프로토타입은 Object의 인스턴스입니다). 이므로 기본 프로토타입에는 Object.prototype에 대한 내부 포인터가 포함됩니다.
프로토타입 체인의 단점:
1. 프로토타입을 통해 상속이 구현되면 프로토타입은 실제로 다른 유형의 인스턴스가 됩니다. 결과적으로 원래 인스턴스 속성은 자연스럽게 현재 프로토타입 속성이 되며 모든 인스턴스에서 공유됩니다. 이렇게 이해하십시오. 상위 유형 생성자에 정의된 참조 유형 값의 인스턴스 속성은 하위 유형 프로토타입의 프로토타입 속성이 되며 모든 하위 유형 인스턴스에서 공유됩니다.
2. 하위 유형의 인스턴스를 생성할 때 매개변수는 상위 유형의 생성자에 전달될 수 없습니다.

2. 생성자 차용(가짜 객체 또는 클래식 상속이라고도 함)

// 在子类型构造函数的内部调用超类型构造函数；使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上
function SuperType(){
            // 定义引用类型值属性
            this.colors = ["red","green","blue"];
}
function SubType(){
            // 继承 SuperType，在这里还可以给超类型构造函数传参
            SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("purple");
alert(instance1.colors);     // "red,green,blue,purple"

var instance2 = new SubType();
alert(instance2.colors);     // "red,green,blue"

로그인 후 복사

PS: apply() 또는 call() 메서드를 사용하여 실제로 생성할 함수를 생성할 SubType 인스턴스의 컨텍스트에서 SuperType 생성자를 호출합니다. . 이렇게 하면 SuperType() 함수에 정의된 모든 개체 초기화 코드가 새 SubType 개체에서 실행됩니다. 결과적으로 SubType의 각 인스턴스는 색상 속성의 자체 복사본을 갖게 됩니다.
생성자 차용의 장점은 프로토타입 체인 구현 상속의 두 가지 문제를 해결한다는 것입니다. 생성자 차용의 단점은 메서드가 모두 생성자에 정의되어 있으므로 함수 재사용이 불가능하다는 것입니다. 게다가 상위 유형의 프로토타입에 정의된 메서드는 하위 유형에 표시되지 않으므로 모든 유형은 생성자 패턴만 사용할 수 있습니다.

3. 조합 상속(가상 고전 상속이라고도 함)

// 将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。
这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。
function SuperType(name){
            this.name = name;
            this.colors = ["red","green","blue"];
}
SuperType.prototype.sayName = function(){
            alert(this.name);
};
function SubType(name,age){
            // 借用构造函数方式继承属性
            SuperType.call(this,name);
            this.age = age;
}
// 原型链方式继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
            alert(this.age);
};
var instance1 = new SubType("luochen",22);
instance1.colors.push("purple");
alert(instance1.colors);      // "red,green,blue,purple"
instance1.sayName();
instance1.sayAge();

var instance2 = new SubType("tom",34);
alert(instance2.colors);      // "red,green,blue"
instance2.sayName();
instance2.sayAge();

로그인 후 복사

PS: 조합 상속은 프로토타입 체인과 빌린 생성자의 결함을 피하고 장점을 결합하며 자바스크립트에서 가장 일반적으로 사용되는 상속 패턴이 됩니다. 또한, instanceof 연산자와 isPrototype() 메서드를 사용하면 구성 상속을 기반으로 생성된 객체를 식별하는 데에도 사용할 수 있습니다. 그러나 그 자체의 단점도 있습니다. 가장 큰 문제는 상황에 관계없이 상위 유형 생성자가 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형 생성자 내부에서 한 번, 두 번 호출된다는 것입니다.

4. 프로토타입 상속

// 借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。
1、自定义一个函数来实现原型式继承
function object(o){
            function F(){}
            F.prototype = o;
            return new F();
}

로그인 후 복사

PS: object() 함수 내에서 먼저 임시 생성자를 생성한 다음 들어오는 객체를 이 생성자의 프로토타입으로 사용하고 마지막으로 이 임시 유형의 새 버전을 반환합니다. 기본적으로 object()는 전달된 객체의 얕은 복사본을 수행합니다.
2. 프로토타입 상속을 구현하려면 Object.create() 메서드를 사용하세요. 이 메서드는 두 개의 매개 변수, 즉 새 개체의 프로토타입으로 사용할 개체와 새 개체에 대한 추가 속성을 정의하는 개체를 허용합니다. 이 메서드는 하나의 매개 변수가 전달될 때 object() 메서드와 동일하게 작동합니다.
두 번째 매개변수가 전달되면 지정된 모든 속성이 프로토타입 객체에 있는 동일한 이름의 속성을 재정의합니다.

var person = {
            name: "luochen",
            colors: ["red","green","blue"]
}; 
var anotherPerson1 = Object.create(person,{
            name: {
                    value: "tom"
            }
});
var anotherPerson2 = Object.create(person,{
            name: {
                    value: "jerry"
            }
});
anotherPerson1.colors.push("purple");
alert(anotherPerson1.name);     // "tom"
alert(anotherPerson2.name);     // "jerry"
alert(anotherPerson1.colors);    // "red,green,blue,purple"
alert(anotherPerson2.colors);    // "red,green,bule,purple";

로그인 후 복사

PS: 한 객체가 다른 객체와 유사해지기를 원한다면 프로토타입 상속이 완벽하게 가능합니다. 그러나 단점은 참조 유형 값을 포함하는 속성이 항상 해당 값을 공유한다는 것입니다.

5. 기생 상속

// 创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回这个对象
function createPerson(original){
            var clone = Object.create(original);   // 通过 Object.create() 函数创建一个新对象
            clone.sayGood = function(){              // 增强这个对象
                        alert("hello world！！！");
            };
            return clone;                                      // 返回这个对象 
}

로그인 후 복사

PS: 기생 상속은 사용자 정의 유형 및 생성자 대신 객체를 주로 고려할 때 유용한 패턴이기도 합니다. 이 모드의 단점은 기능을 재사용할 수 없다는 것입니다.

6. 기생 조합 상속

// 通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型
function SuperType(name){
            this.name = name;
            this.colors = ["red","green","blue"];
}
SuperType.prototype.sayName = function(){
            alert(this.name);
};
function SubType(name,age){
            SuperType.call(this,name);
            this.age = age;
}
// 创建超类型原型的一个副本
var anotherPrototype = Object.create(SuperType.prototype);
// 重设因重写原型而失去的默认的 constructor 属性
anotherPrototype.constructor = SubType;
// 将新创建的对象赋值给子类型的原型
SubType.prototype = anotherPrototype;

SubType.prototype.sayAge = function(){
            alert(this.age);
};
var instance1 = new SubType("luochen",22);
instance1.colors.push("purple");
alert(instance1.colors);      // "red,green,blue,purple"
instance1.sayName();
instance1.sayAge();

var instance2 = new SubType("tom",34);
alert(instance2.colors);      // "red,green,blue"
instance2.sayName();
instance2.sayAge();

로그인 후 복사

PS: 이 예제의 높은 효율성은 SuperType 생성자를 한 번만 호출하여 SubType.prototype에서 불필요하고 중복되는 속성을 생성하지 않는다는 점에 반영됩니다. 동시에 프로토타입 체인은 변경되지 않은 상태로 유지되므로 인스턴스 연산자와 isPrototype() 메서드를 정상적으로 사용할 수 있습니다.

위 내용은 JavaScript에서 상속을 구현하는 6가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!