자바스크립트 프로토타입 상속의 기본 패턴 사용법과 개선 방법을 예제와 함께 자세히 설명

Javascript에서 각 함수에는 자신의 프로토타입을 가리키는 프로토타입 속성 프로토타입이 있고 이 함수로 생성된 객체에도 이 프로토타입을 가리키는 __proto__ 속성이 있으며 함수의 프로토타입은 객체이므로 이 객체도 __proto__는 자신의 프로토타입을 가리키며, Object 개체의 프로토타입에 도달할 때까지 계층별로 더 깊어져 프로토타입 체인을 형성합니다.

각 함수는 Function 함수에 의해 생성된 개체이므로 각 함수에는 Function 함수의 프로토타입을 가리키는 __proto__ 속성도 있습니다. 여기서 짚고 넘어가야 할 점은 실제로 프로토타입 체인을 형성하는 것은 함수의 프로토타입 속성이 아니라 각 객체의 __proto__ 속성이라는 점인데, 이것이 매우 중요합니다.

기본 모드:

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

이것은 프로토타입 상속을 구현하는 가장 간단한 방법입니다. 상위 클래스의 객체를 하위 클래스 생성자의 프로토타입에 직접 할당하여 하위 클래스의 객체가 상위 클래스에 액세스할 수 있도록 하고 상위 클래스 생성자 프로토타입의 속성입니다. 이 방법의 장점은 분명합니다. 구현이 매우 간단하고 특별한 작업이 필요하지 않습니다. 동시에 하위 클래스가 상위 클래스 생성자에서와 동일한 초기화 작업을 수행해야 하는 경우 단점도 분명합니다. 하위 클래스 생성자에서 수행해야 합니다. 상위 클래스에서 다시 작업을 반복합니다.

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

위의 경우에는 name 속성만 초기화하면 됩니다. 초기화 작업이 계속 늘어나면 이 방법은 매우 불편합니다. 따라서 다음과 같은 개선된 방법이 있습니다. 생성자 대여

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

위 방법은 하위 클래스 생성자에서 Apply를 통해 상위 클래스의 생성자를 호출하여 동일한 초기화 작업을 수행하므로 상위 클래스에 상관없이 상관없습니다. 초기화 작업이 얼마나 수행되는지에 따라 하위 클래스도 동일한 초기화 작업을 수행할 수 있습니다. 그러나 위 구현에는 여전히 문제가 있습니다. 상위 클래스 생성자는 하위 클래스 생성자에서 한 번, 하위 클래스 프로토타입을 할당할 때 한 번 실행됩니다. 따라서 여전히 개선이 필요합니다.

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

이런 방식으로 하위 클래스 생성자에서 상위 클래스의 생성자를 한 번만 실행하면 되며 동시에 상위 클래스 프로토타입의 속성을 상속받을 수 있습니다. 이는 원래 의도에 더 부합합니다. 요구 사항을 재사용하기 위한 프로토타입의 내용은 프로토타입에 배치됩니다.

위 내용은 자바스크립트 프로토타입 상속의 기본 패턴 사용법과 개선 방법을 예제와 함께 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!