JavaScript의 상속

JavaScript에서 상속에 대한 자세한 설명

JavaScript에는 다른 언어와 같은 클래스가 없습니다. 상속을 위해 프로토 타입 및 프로토 타입 체인 개념을 사용합니다. 이 게시물에서는 프로토 타입을 사용하여 JavaScript에서 상속을 얻는 방법에 대해 설명합니다.

JavaScript로 프로토 타입을 완전히 이해하려면이 기사를 읽는 것이 좋습니다.

Prototype Chaining (프로토 타입 체인)

프로토 타입 체인은 객체의 dunder Proto(__proto__) 또는 Proto 속성이 생성자 함수 인 'prototype'을 가리 키지 않고 다른 객체를 가리 킵니다. 다른 객체의 dunder proto(__proto__) 또는 proto 속성이 다른 객체를 가리키면 체인이 생깁니다. 이것을 프로토 타입 체인이라고합니다.

아래 이미지에서 볼 수 있듯이 SubType 객체의 prototype 속성은 SuperType 객체를 가리킵니다. SuperType 객체의prototype 속성은 SuperSuperType객체를 가리킵니다. 이것을 프로토 타입 체인이라고합니다.

프로토 타입 체인을 구현해 봅시다

//SuperType constructor function
function SuperType(){
	this.name = "Virat"
}

//SuperType prototype
SuperType.prototype.getSuperName = function(){
	return this.name
}

//SubType prototype function
function SubType(){
	this.age = 26
}

//Inherit the properties from SuperType
SubType.prototype = new SuperType();

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
	return this.age;
}

//Create a SubType object
var subTypeObj = new SubType();
console.log(subTypeObj.name); //Output: Virat
console.log(subTypeObj.age); //Output: 26
console.log(subTypeObj.getSuperName()); //Output: Virat
console.log(subTypeObj.getSubAge()); //Output: 26

위 코드는SuperType과 SubType의 두 가지 constructor(생성자)함수를 정의합니다. 기본적으로 SubType.prototype에는 constructor(생성자) 함수 자체를 가리키는constructor(생성자)함수와 기본 객체 속성을 상속하는 proto속성이 있습니다.

//Inherit the properties from SuperType
SubType.prototype = new SuperType();

위의 줄은 SubType 생성자 함수의 기본 프로토 타입이나 Dunder Proto 속성을 다시 작성하고 SubType.prototype이 SuperType 생성자 함수의 객체를 가리키도록합니다.

이는 SuperType인스턴스에 존재하는 모든 속성과 메소드가 이제 SubType.prototype에도 존재한다는 것을 의미합니다. 이는 이제 SubType함수가 모든 SuperType속성 및 메서드에 액세스 할 수 있음을 의미합니다.

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
	return this.age;
}

SubType생성자 함수의 기본 프로토 타입을 덮어 쓴 후, 위의 코드 라인을 사용하여 SuperType에서 상속 된 것 위에 새로운 메소드 getSubAge()를 SubType생성자 함수의 프로토 타입 객체에 추가합니다.

참고 : 상속은 기존의 SubType 프로토 타입을 덮어 쓰기 때문에 상속 후 SubType에 새 메소드를 추가해야합니다.

Console output

참고 : getSuperName()메소드는 SuperType.prototype객체에 남아 있지만 name 속성은 SubType.prototype에 있습니다. getSuperName()은 프로토 타입 메소드이고 속성은 인스턴스 속성이기 때문입니다. SubType.prototype은 이제 SuperType의 인스턴스이므로 속성이 저장됩니다. 또한 SubType.prototype의 생성자 속성을 덮어 쓰기 때문에 SubType.prototype.constructor는 SuperType을 가리 킵니다.

프로토 타입 체인 문제

super type 프로토 타입의 모든 속성이 자식 개체간에 공유되므로 한 자식이 super type 프로토 타입의 속성을 수정하면 다른 자식도 영향을받습니다. 이 문제는 여기에 매우 자세히 설명되어 있습니다 설명링크

이 문제를 해결하기 위해 생성자를 사용하여 인스턴스 속성을 상속하고 프로토 타입 체인을 사용하여 메서드를 상속하여 속성을 공유합니다.

//SuperType constructor function
function SuperType(firstName, lastName){
	this.firstName = firstName,
	this.lastName = lastName,
	this.friends = ["Ashwin", "Jadeja"]
}

//SuperType prototype
SuperType.prototype.getSuperName = function(){
	return this.firstName + " " + this.lastName;
}

//SubType prototype function
function SubType(firstName, lastName, age){
	//Inherit instance properties
	SuperType.call(this, firstName, lastName);
	this.age = age;
}

//Inherit methods and shared properties
SubType.prototype = new SuperType();

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
	return this.age;
}

//Create SubType objects
var subTypeObj1= new SubType("Virat", "Kohli", 26);
var subTypeObj2 = new SubType("Sachin", "Tendulkar", 39);

//Modify the friends property using the subTypeObj1
subTypeObj1.friends.push("Amit");

console.log(subTypeObj1.friends);//["Ahswin", "Jadega", "Amit"]
console.log(subTypeObj2.friends);//["Ashwin", "Jadega"]

//subTypeObj1
console.log(subTypeObj1.firstName); //Output: Virat
console.log(subTypeObj1.age); //Output: 26
console.log(subTypeObj1.getSuperName()); //Output: Virat Kohli
console.log(subTypeObj1.getSubAge()); //Output: 26

//subTypeObj2
console.log(subTypeObj2.firstName); //Output: Sachin
console.log(subTypeObj2.age); //Output: 39
console.log(subTypeObj2.getSuperName()); //Output: Sachin Tendulkar
console.log(subTypeObj2.getSubAge()); //Output: 39

코드를 이해하려고 노력해봅시다. 위 코드는firstName, lastName 및 friends를 사용하여 SuperType생성자 함수를 인스턴스 속성으로 정의한 다음 SuperType프로토 타입에 superName속성을 정의했습니다.

이제 SubType생성자 함수를 어떻게 정의했는지 봅시다.

//SubType prototype function
function SubType(firstName, lastName, age){
	//Inherit instance properties
	SuperType.call(this, firstname, lastName);
	this.age = age;
}

여기서는 SubType생성자 함수를 정의합니다. SubType생성자 함수 안에서, call을 사용하여 SuperType생성자 함수를 호출합니다. Call은 SubType생성자 함수를 사용하여 생성되는 객체의 컨텍스트에서 SuperType생성자 함수를 실행합니다. SuperType의 인스턴스 속성을 상속 한 후, SubType생성자 함수에 age속성을 추가합니다.

//Inherit methods and shared properties
SubType.prototype = new SuperType();

지금까지 우리는SuperType 생성자 함수의 모든 인스턴스 속성을 상속했지만 SuperType생성자 함수의 share property와 메소드는 여전히 상속되지 않습니다. 위 코드 줄을 사용하여 상속합니다.

위 코드 줄이 실행되면 SuperType생성자 함수의 모든 속성을 상속했습니다.

//Add new property to SubType prototype
SubType.prototype.getSubAge = function(){
	return this.age;
}

위의 코드 줄을 사용하여 상속 된 메서드 및 속성 위에 SubType 프로토 타입에 새 속성을 추가합니다. SuperType 생성자 함수로부터

SubType 생성자 함수를 사용하면서 객체를 만들어 전체 프로세스를 이해하자

var subTypeObj1= new SubType("Virat", "Kohli", 26);

위의 코드 행을 실행하면 세 가지 매개 변수(Virat, Kohli, 26)가 모두 SubType생성자 함수로 전달됩니다. SubType생성자 함수는 SuperType.call(this, firstname, lastName) 호출을 사용하여 SuperType생성자 함수를 호출하며 이것은 여기에서 subTypeObj1을 나타냅니다.

SuperType생성자 함수는 subTypeObj1의 컨텍스트에서 실행되고 SuperType.call (this, firstname, lastName)이 반환 후 subTypeObj1 객체에 firstType, lastName, friends속성을 추가히먀, SubType의 생성자 함수는 age속성을 subTypeObj1 객체에 추가합니다.

따라서 현재는 subTypeObj1객체 (firstName, lastName, age)가있는 속성이 있습니다. 현재 SubType 생성자 함수에는 프로토 타입 속성에 다음과 같은 메소드와 share property가 있습니다.

1. getSuperName()
2. getSubAge

subTypeObj1은 SubType생성자 함수에서 이러한 모든 속성을 상속합니다.

번역 주소 : https://medium.com/hackernoon/inheritance-in-javascript-21d2b82ffa6f