JavaScript가 상속을 구현하는 방법(6가지 방법)_javascript 팁

머리말: 대부분의 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에서 상속을 구현하는 6가지 방법을 소개합니다. 도움이 되셨으면 좋겠습니다!