js의 상속은 객체 가장(object impersonation)과 프로토타입 체이닝(prototype chaining)이라는 두 가지 유형으로 나눌 수 있습니다.
1. 객체 가장에는 임시 속성 메서드, call() 및 apply() 메서드의 세 가지 유형이 있습니다 .
1. 임시 속성 방법
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름){
this.name = 이름;
this.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
}
함수 F2E(이름,ID){
this.temp = 사람;
this.temp(이름);
this.temp를 삭제하세요;
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
var 사이먼 = new F2E('사이먼',9527);
simon.say();
simon.showId();
2.call()/apply() 메소드
본질적으로 이 포인터의 포인터를 변경합니다.
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름){
this.name = 이름;
this.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
}
함수 F2E(이름,ID){
Person.call(this,name); //apply() 메서드가 Person.apply(this,new Array(name))로 변경되었습니다.
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
var 사이먼 = new F2E('사이먼',9527);
simon.say();
simon.showId();
단점: 먼저 이 메모리 할당 다이어그램을 살펴보겠습니다.
OO 개념에서 new가 인스턴스화되면 객체는 힙 메모리에 자체 공간을 형성합니다. 이 코드 세그먼트는 주목할 가치가 있습니다. 이 코드 세그먼트에는 멤버 메서드가 존재하며 메서드는 공유됩니다. 문제는 여기에 있습니다. 개체 가장을 통해 상속할 때 모든 멤버 메서드가 이를 가리킵니다. 즉, new 이후에는 각 인스턴스가 공유되지 않는 이 멤버 메서드를 가지게 되어 많은 양의 메모리가 낭비됩니다. 그리고 개체 가장을 통해 프로토타입을 통해 정의된 변수와 메서드는 상속될 수 없습니다. 예를 들어 다음 코드는 오류를 발생시킵니다.
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름){
this.name = 이름;
this.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
}
Person.prototype.age = 20;
Person.prototype.sayAge = function(){alert('내 나이는 '+this.age)};
함수 F2E(이름,ID){
Person.apply(this,new 배열(이름));
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
var 사이먼 = new F2E('사이먼',9527);
simon.sayAge(); // 프롬프트 유형 오류: simon.sayAge는 함수가 아닙니다.
2. 프로토타입 체인 방식
다음과 같이 코드 코드를 복사합니다.
함수 사람(){
this.name = '시몬';
}
Person.prototype.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
함수 F2E(ID){
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
F2E.prototype = 새로운 사람();
var 사이먼 = 새로운 F2E(9527);
simon.say();
simon.showId();
Alert(simon.hasOwnProperty('id')); //자신의 속성인지 확인
다음으로, 위의 예를 따라 다음 js 프로토타입 체인 개념을 이해하세요.
프로토타입 체인은 다음과 같이 이해될 수 있습니다. js의 각 객체에는 숨겨진 __proto__ 속성이 있습니다. 인스턴스화된 객체의 __proto__ 속성은 해당 클래스의 프로토타입 메서드를 가리키며 이 프로토타입 메서드는 다른 인스턴스화 객체인 __proto__에 할당될 수 있습니다. 이 객체는 자신의 클래스를 가리켜야 하며, 따라서 체인을 형성해야 합니다.
다음과 같이 코드 코드를 복사합니다.
F2E.prototype = 새로운 사람()
이 문장이 핵심입니다. js 객체가 특정 속성을 읽으면 먼저 자체 속성을 검색합니다. 속성이 없으면 프로토타입 체인에서 객체의 속성을 검색합니다. 즉, 프로토타입 체인의 방법을 공유할 수 있어 객체 가장 및 메모리 낭비 문제를 해결할 수 있습니다.
이제 단점에 대해 이야기해 보겠습니다.
단점은 명백합니다. 프로토타입 체인 상속은 하위 클래스를 인스턴스화할 때 매개변수를 상위 클래스에 전달할 수 없다는 것을 의미합니다. 이것이 바로 이 예제의 Person() 함수에 매개변수가 없으며 this.name="Simon"으로 직접 작성되는 이유입니다. 다음 코드는 원하는 효과를 얻지 못합니다.
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름){
this.name = 이름;
}
Person.prototype.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
함수 F2E(이름,ID){
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
F2E.prototype = 새로운 사람();
var 사이먼 = new F2E("사이먼",9527);
simon.say();
simon.showId();
함수 사람(이름){
this.name = 이름;
}
Person.prototype.say = 함수(){
Alert('내 이름은 '+this.name 입니다);
}
함수 F2E(이름,ID){
this.id = 아이디;
this.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
}
F2E.prototype = new Person(); //여기에서는 값을 전달할 수 없습니다. this.name이나 name은 모두 작동하지 않습니다. F2E.prototype = new Person('wood')을 직접 작성할 수 있지만 이 경우에는 simon입니다. say( )는 My name is wood가 됩니다.
var 사이먼 = new F2E("사이먼",9527);
simon.say(); //팝업 내 이름은 정의되지 않았습니다.
simon.showId();
마지막으로 제가 생각하는 상속을 구현하는 더 좋은 방법을 요약해 보겠습니다. 멤버 변수는 개체 가장을 사용하고 멤버 메서드는 프로토타입 연결을 사용합니다.
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름){
this.name = 이름;
}
Person.prototype.say = 함수(){
Alert('내 이름은 '+this.name'입니다);
}
함수 F2E(이름,ID){
Person.call(this,이름);
this.id = 아이디;
}
F2E.prototype = 새로운 사람();
//여기서 한 가지 세부 사항에 유의하세요. showId는 F2E.prototype = new Person(); 앞에 쓸 수 없습니다.
F2E.prototype.showId = 함수(){
Alert('안녕하세요, 선생님, 제 직장번호는 '+this.id)입니다.
}
var 사이먼 = new F2E("사이먼",9527);
simon.say();
simon.showId();