JavaScript의 프로토타입, 적용 및 호출 메소드의 장점과 단점에 대한 자세한 예

Prototype 방법:

prototype 속성은 무엇을 의미하나요? 프로토타입은 프로토타입입니다. (함수로 정의된) 모든 객체에는 객체 유형인 기본 프로토타입 속성이 있습니다.

그리고 이 기본 속성은 체인의 상향 검색을 구현하는 데 사용됩니다. 즉, 객체의 속성이 존재하지 않는 경우 프로토타입 속성이 속한 객체를 통해 속성을 찾는다는 의미입니다. 프로토타입을 찾을 수 없으면 어떻게 되나요?

js는 프로토타입의 프로토타입 속성이 속한 객체를 자동으로 검색하므로 해당 속성이 발견되거나 프로토타입이 최종적으로 비어 있을 때까지("정의되지 않음") 프로토타입을 통해 인덱스가 검색됩니다.

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

이 방법이 가장 간단합니다. 상속된 인스턴스에 하위 클래스의 프로토타입 속성 값을 할당하기만 하면 상속된 클래스의 메서드를 직접 사용할 수 있습니다.

예를 들어 위 예제의 one.view() 메소드의 경우 js는 먼저 원 인스턴스에 view() 메소드가 있는지 확인하므로 man.prototype 속성을 찾습니다. 프로토타입의 값은 person이라는 인스턴스입니다.

이 인스턴스에는 view() 메서드가 있으므로 호출이 성공합니다.

적용 방법:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.apply(this,[]); 
  this.feature = ['beard','strong']; 
} 

var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

참고: 적용 매개변수가 비어 있는 경우, 즉 매개변수가 전달되지 않으면 new Array(), []를 통해 전달되며 null은 유효하지 않습니다.

call 메소드:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.call(this,[]); 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

call 메소드의 구현 메커니즘에는 man.prototype = new person();이 하나 더 필요합니다.
호출 메소드는 메소드 교체만 구현하고 객체 속성을 복사하지 않기 때문입니다.

Google Map API의 상속은 이 방법을 사용합니다.

세 가지 상속 방법의 구현은 위에 요약되어 있습니다. 그러나 각 방법에는 장단점이 있습니다.

상위 클래스가 다음과 같은 경우:

//父类 
function person(hair,eye,skin){ 
  this.hair = hair; 
  this.eye = eye; 
  this.skin = skin; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
}

객체 생성 시 하위 클래스 man이 상위 클래스 person에게 매개변수를 전달할 수 있도록 하위 클래스를 어떻게 설계해야 할까요? 프로토타입의 상속 방식은 적용되지 않습니다.
Apply를 사용해야 합니다. 또는 호출 방법:

//apply方式 
//子类 
function man(hair,eye,skin){ 
  person.apply(this,[hair,eye,skin]); 
  this.feature = ['beard','strong']; 
} 
//call方式 
//子类 
function man(hair,eye,skin){ 
  person.call(this,hair,eye,skin); 
  this.feature = ['beard','strong']; 
}

하지만 Apply 방법을 사용하면 여전히 단점이 있는데, 그 이유는 무엇입니까? js에는 객체가 특정 유형인지 비교하는 데 사용되는 "instanceof"라는 매우 중요한 연산자가 있습니다.

이 예에서는 man 유형 외에 하나의 인스턴스도 person 유형이어야 합니다. 그러나 apply 메소드에서 상속한 후에는 person 유형에 속하지 않습니다. 즉, ( one instanceof person)은 거짓입니다.

결국 가장 좋은 상속 방법은 호출+프로토타입 방법입니다. 그런 다음 (BaseClass 인스턴스 하나)의 값이 true인지 시험해 볼 수 있습니다.

세 번째 상속 방법에도 결함이 있습니다. 새 개체를 서브클래싱할 때 부모 클래스에 필요한 매개 변수를 전달해야 하며 부모 클래스의 속성과 메서드가 재현됩니다.

rreee

위 내용은 JavaScript의 프로토타입, 적용 및 호출 메소드의 장점과 단점에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!