방법: 1. 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 합니다. 2. 생성자를 빌려서 call() 및 apply()를 사용하여 하위 클래스 생성자 내부에서 슈퍼클래스 생성자를 호출합니다. 3. 프로토타입 체인과 생성자를 차용하는 기술을 결합하여 상속을 실현합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
서문: 대부분의 OO 언어는 인터페이스 상속과 구현 상속이라는 두 가지 상속 방법을 지원합니다. 그러나 ECMAScript에서는 인터페이스 상속을 구현할 수 없으며 구현 상속은 주로 프로토타입 체인에 의존합니다.
1. 프로토타입 체인
기본 아이디어: 프로토타입을 사용하여 한 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 합니다.
생성자, 프로토타입 및 인스턴스 간의 관계: 각 생성자에는 프로토타입 개체가 있고, 프로토타입 개체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있습니다.
프로토타입 체인 구현 상속 예:
function SuperType() { this .property = true ; } SuperType.prototype.getSuperValue = function () { return this .property; } function subType() { this .property = false ; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this .property; } var instance = new SubType(); console.log(instance.getSuperValue()); //true
2. 생성자 차용
기본 아이디어: 하위 유형 생성자 내에서 슈퍼클래스 생성자를 호출하고 call() 및 apply() 메서드를 사용하여 생성자를 실행합니다. 물체.
예:
function SuperType() { this .colors = [ "red" , "blue" , "green" ]; } function SubType() { SuperType.call( this ); //继承了SuperType } 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"
3. 조합 상속
기본 아이디어: 프로토타입 연결 기술과 생성자 차용 기술을 결합하여 두 기술의 장점을 모두 활용하는 상속 패턴입니다.
예:
function SuperType(name) { this .name = name; this .colors = [ "red" , "blue" , "green" ]; } SuperType.prototype.sayName = function () { console.log( 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 () { console.log( this .age); } var instance1 = new SubType( "EvanChen" ,18); instance1.colors.push( "black" ); consol.log(instance1.colors); //"red","blue","green","black" instance1.sayName(); //"EvanChen" instance1.sayAge(); //18 var instance2 = new SubType( "EvanChen666" ,20); console.log(instance2.colors); //"red","blue","green" instance2.sayName(); //"EvanChen666" instance2.sayAge(); //20
4. 프로토타입 상속
기본 아이디어: 프로토타입의 도움으로 기존 객체를 기반으로 새로운 객체를 생성할 수 있으며 사용자 정의 유형을 생성할 필요가 없습니다.
프로토타입 상속 개념은 다음 함수로 설명할 수 있습니다.
function object(o) { function F(){} F.prototype = o; return new F(); }
예:
var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = object(person); anotherPerson.name = "Greg" ; anotherPerson.friends.push( "Rob" ); var yetAnotherPerson = object(person); yetAnotherPerson.name = "Linda" ; yetAnotherPerson.friends.push( "Barbie" ); console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"
ECMAScript5는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다. 이 메서드는 두 개의 매개변수를 받습니다. 하나는 매개변수로 사용됩니다. 새 객체의 프로토타입 객체와 추가 속성을 새 객체로 정의하는 객체입니다.
var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = Object.create(person); anotherPerson.name = "Greg" ; anotherPerson.friends.push( "Rob" ); var yetAnotherPerson = Object.create(person); yetAnotherPerson.name = "Linda" ; yetAnotherPerson.friends.push( "Barbie" ); console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"
5. 기생 상속
기본 아이디어: 내부적으로 객체를 향상시키는 상속 프로세스를 캡슐화하는 데만 사용되는 함수를 만들고, 최종적으로 객체 반환 작업을 실제로 수행한 것처럼 작동합니다.
예:
function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert( "hi" ); }; return clone; } var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); ///"hi"
6. 기생 결합 상속
기본 아이디어: 함수를 빌려 속성을 상속하고 프로토타입 체인의 혼합 형태를 통해 메서드를 상속합니다.
기본 모델은 다음과 같습니다.
function inheritProperty(subType, superType) { var prototype = object(superType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 }
예 :
function SuperType(name){ this .name = name; this .colors = [ "red" , "blue" , "green" ]; } SuperType.prototype.sayName = function (){ alert( this .name); }; function SubType(name,age){ SuperType.call( this ,name); this .age = age; } inheritProperty(SubType,SuperType); SubType.prototype.sayAge = function () { alert( this .age); }
【추천 학습:javascript 고급 튜토리얼】
위 내용은 자바스크립트는 상속을 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!