Javascript Prototypal Inheritance - 개념을 정말로 이해

Question

JS 프로토 타입 상속에 대한이 비디오 설명 (https://www.youtube.com/watch?v=qMO-LTOrJaE)을보고있었습니다. 내가 이해하지 못하는 것이 있습니다. 설명해 드리죠

var Bear = function(type) { //PARENT 
 
    this.type; 
 
    this.hasFur = true; 
 
} 
 

 
Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPE 
 

 
var Grizzly = function(type) { //CHILD 
 
    this.species = 'Brown Bear'; 
 
} 
 

 
Grizzly.prototype = Object.create(Bear.prototype); //INHERITING FROM PARENT 
 

 
var grizzly1 = new Grizzly('grizzly'); 
 

 
console.log(grizzly1.hasFur); //prints undefined //members in parent's constructor not accessible 
 
console.log(grizzly1.kingdom); //prints Animalia //however, members in parent's prototype is accessible

그러나 곧 당신이 부모에서뿐만 아니라 모든 것을 액세스 할 수있어 다음 그리즐리 생성자 라인,

var Grizzly = function(type){ 
    Bear.call(this, type); //ADDED 
    this.species = 'Brown Bear'; 
} 

를 추가 프로토 타입입니다

console.log(grizzly1.hasFur); //prints true 
console.log(grizzly1.kingdom); //prints Animalia 

그러나 n 아래의 방법은 하위 생성자에서 //Bear.call(this) 행이 없어도 부모가있는 모든 항목에 액세스 할 수있게합니다.

Grizzly.prototype = new Bear(); 

그래서이 모든 것을 진정으로 상속합니다. 누군가가이 행동이 무엇이고 왜 일어나는 지 설명 할 수 있습니까?

또한 자바 스크립트에서 상속하는 여러 가지 방법이 있습니다. 모범 사례와 그 이유를 고려해 볼 때 어느 것이 가장 좋습니다.

Answer 1

내가 이해하지 못하는 뭔가가있다. 내가 코드에서

var Bear = function(type) { //PARENT 
 
    this.type; 
 
    this.hasFur = true; 
 
} 
 

 
Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPE 
 

 
var Grizzly = function(type) { //CHILD 
 
    this.species = 'Brown Bear'; 
 
} 
 

 
Grizzly.prototype = Object.create(Bear.prototype); //INHERITING FROM PARENT 
 

 
var grizzly1 = new Grizzly('grizzly'); 
 

 
console.log(grizzly1.hasFur); //prints undefined //members in parent's constructor not accessible 
 
console.log(grizzly1.kingdom); //prints Animalia //however, members in parent's prototype is accessible

이 Bear의 생성자 함수가 아직 실행되지 않는 grizzly1.hasFur는 undefined입니다, 위의 공유 스 니펫을 설명하겠습니다. 줄 Grizzly.prototype = Object.create(Bear.prototype);은 부모 프로토 타입 메서드 및 속성을 상속합니다.

가능한 빨리 그리즐리 생성자에 다음 행을 추가로

그러나,

는

var Bear = function(type) { //PARENT 
 
    this.type; 
 
    this.hasFur = true; 
 
} 
 

 
Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPE 
 

 
var Grizzly = function(type) { //CHILD 
 
    Bear.call(this, type); //ADDED 
 
    this.species = 'Brown Bear'; 
 
} 
 

 
Grizzly.prototype = Object.create(Bear.prototype); //INHERITING FROM PARENT 
 

 
var grizzly1 = new Grizzly('grizzly'); 
 

 
console.log(grizzly1.hasFur); //prints undefined //members in parent's constructor not accessible 
 
console.log(grizzly1.kingdom);

grizzly1.hasFur 지금 true 지금 grizzly의 생성자 함수 내에서 생성자 때문에 Bear에 대한 클래스는 call을 사용하여 해당 컨텍스트를 변경하여 호출됩니다. this. hasFur은 변경된 컨텍스트로 인해 여기에이 작업에서 할당 된 true 값을 얻습니다. this은 이제 grizzly의 인스턴스를 나타냅니다.

그러나 하위 형식을 상속하면 Child 생성자에서 //Bear.call(this) 행이 없어도 부모가 모든 항목에 액세스 할 수 있습니다. Grizzly.prototype = new Bear();

여기서 발생하는 현상은 Bear 클래스의 새 인스턴스가 생성된다는 것입니다. 이제 Bear 클래스의 모든 인스턴스는 생성자 클래스 즉 function Bear을 인스턴스화하는 동안 정의 된 프로토 타입 메서드와 내부 속성에 액세스 할 수 있습니다. 이제 인스턴스가 생성 된 후 프로토 타입 체인 Grizzly에 할당됩니다. 따라서 Grizzly의 새 인스턴스는 내부 속성 인 Grizzly에 액세스 할뿐만 아니라 Bear 클래스의 새 인스턴스로도 동작합니다.

또한 디자인 패턴을 연구하는 나는 당신을 제안 확실히 것이다 자바 스크립트

에 상속의 다른 방법으로 무엇인가. 당신은 그것을 위해 다른 책을 google 할 수 있습니다. 독서를 좋아합니다. JavaScript : 유용한 부품 및 JavaScript 디자인 패턴 학습 내용. 기본을 지키기 위해 다른 책을 좋아할 수도 있습니다. Javascript에는 이런 것들, 클로져 (closure) 등과 같이 셀 수없이 많은 것들이 있습니다.

모범 사례와 그 이유를 고려해 볼 때 가장 적합한 것을 선택하십시오.

프로토 타입 상속에 가장 좋은 방법은, 내가 선호하는 것입니다 : 생성자 클래스에서 그래서 비공개로 유지할 싶어 생성자 클래스 안에 만 속성과 메소드를 선언 참조

function A() { 
    this.privateProp = something; 
} 
A.prototype.public = something; 

A 말 . 프로토 타입 체인에 노출시키지 마십시오.

희망이 도움이됩니다.

Answer 2

확인이 아웃 :

var Bear = function(type){ //PARENT 
    this.type; 
    this.hasFur = true; 
} 

alert(new Bear().hasFur); 

이 않습니다이 경고 상자에 당신에게 true을 제공하는 방법을 참조하십시오. 생각해보십시오. 왜 당신의 본보기가 아닌, 이것이 효과가 있습니까?

생각해보세요. 때문에이 코드에서

그건 :

var Bear = function(type){ //PARENT 
    this.type; 
    this.hasFur = true; 
} 

당신은 Bear에 기능을 할당하고, 그래서 new Bear()하지 Bear.prototype 액세스합니다. 이것은 작동합니다 :

이

Bear.prototype.kingdom = 'Animalia'; //ASSIGNING TO PARENT'S PROTOTYPE 

var Grizzly = function(type){ //CHILD 
    this.species = 'Brown Bear'; 
} 

Grizzly.prototype = Object.create(new Bear()); // Modified line 

var grizzly1 = new Grizzly(); 

alert(grizzly1.hasFur); // Prints true now. 
alert(grizzly1.kingdom);