JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석

JavaScript에는 클래스 개념이 없지만 거의 모든 것이 객체를 기반으로 하며 상속도 구현할 수 있는데 이것이 바로 입니다. js 다른 OOP 언어와의 가장 큰 차이점은 js에서 가장 이해하기 어려운 부분이기도 하다. 아래에서는 개인적인 이해에 대해 이야기하겠습니다.

먼저 객체 생성부터 시작하겠습니다. 일반적으로 다음과 같은 방법이 있습니다.

1. 객체의 인스턴스를 생성합니다. 그런 다음 속성 및 메서드에 추가하세요.

var person() = new Object();
person.name = 'mikej';
person.sayName = function(){
  alert(this.name);
}

2. 다음과 같이 작성할 수도 있습니다.

var parson = {
  name : 'mikej',
  sayName : function(){
    alert(this.name);
  }
}

3. 이 두 가지 객체 생성 방법은 매우 간단하지만 둘 다 동일한 모드를 사용하여 객체를 생성할 때 결함이 있습니다. 많은 수의 코드를 반복하십시오. 그래서 팩토리 패턴이 있습니다:

function createPerson(name){
  var p = new Object();
  p.name=name;
  p.sayName = function(){
    alert(this.name);
  };
  return p;
}
var p1 = createPerson('mikej');
var p2 = createPerson('tom');

이렇게 하면 무제한의 개체를 만들 수 있습니다.

4. 생성자 패턴이라는 팩토리 패턴과 유사한 또 다른 방법이 있습니다.

function Person(name){
  this.name=name
  this.sayName = function(){
   alert(this.name);
  }
  this.say = function(){
    alert('hi');
  }
}
var p1 = new Person('mikej');
var p2 = new Person('tom');

여기서 주목해야 할 몇 가지 사항이 있습니다. 생성된 객체를 표시합니다. 함수 이름 Person은 대문자 P를 사용합니다(필수). p1과 p2 모두 Person을 가리키는 생성자 속성을 갖습니다. 동시에 p1과 p2는 둘 다 Object의 인스턴스이자 Person의 인스턴스입니다.

alert(p1.constructor == Person); //true
alert(p1 instanceof Object); //true
alert(p1 instanceof Person); //true

//5.11업데이트: PHP 관점에서 보면 이렇게 객체를 생성하는 과정을 Person이 "클래스"로 생각하고 new Person('mikej')를 사용하는 것은 쉬웠습니다. 이 클래스를 인스턴스화하고 매개변수를 전달합니다. 하지만 실제로는 그렇지 않습니다. 생성 프로세스는 다음과 같아야 합니다. 먼저 빈 개체를 만든 다음 적용 메서드를 사용합니다. 첫 번째 매개 변수는 빈 개체이고 두 번째 매개 변수는 컨텍스트 매개 변수입니다. in Person 이것은 p1이라는 객체를 가리킬 것입니다.

var p1 = new Person('mikej');
//上面代码就相当于
var p1 = {};
Person.apply(p1, ['mikej']);

생성자 패턴은 좋아 보이지만 메모리를 낭비한다는 단점이 있습니다.

alert(p1.say == p2.say) //false

예제를 계속 진행하여 이 결함을 방지하려면 프로토타입 패턴을 사용하세요. 객체를 생성하면 js의 각 객체에는 다른 객체를 가리키는 프로토타입 속성이 있습니다. 이 객체의 모든 속성과 메서드는 생성자의 인스턴스에 의해 상속되고 공유됩니다. 프로토타입 객체에 정의됩니다.

function Person(name){
  this.name = name;
}
//Person的原型对象
Person.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석 = {
  say: function(){
    alert('hi');
  },
  sayName: function(){
    alert(this.name);
  }
};
var p1 = new Person("mikej");
var p2 = new Person("tom");
p1.sayName();
p2.sayName();
//下面就可以看出方法实现了共享
alert(P1.say == P2.say) //true
alert(P1.sayName == P2.sayName) //true

위의 예를 확장하고 프로토타입을 사용하여 상속을 구현해 보겠습니다.

function Person(name){
  this.name = name;
}

Person.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석 = {
  say: function(){
    alert('hi');
  },
  sayName: function(){
    alert(this.name);
  }
};

function Programmer(){
  this.say = function(){
    alert('im Programmer, my name is ' + this.name);
  }
}

Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석 = new Person('mikej');
//手动修正构造函数
Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor = Programmer;
var p1 = new Programmer();

console.dir(Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor);//Programmer
console.dir(p1.constructor);//Programmer
console.dir(p1);

Programmer의 프로토타입이 Person의 인스턴스를 가리키면 모든 Programmer 인스턴스는 Person과 Person의 프로토타입을 상속할 수 있습니다.

여기서 문제가 발생합니다.

기본 프로토타입 객체에는 생성자를 가리키는 생성자 속성이 있습니다. 각 인스턴스에는 기본적으로 프로토타입 객체의 생성자 속성을 호출하는 생성자 속성도 있습니다.

Programmer를 가리키는 Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석 = new Person('mikej');

Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor가 없다고 가정합니다. p1의 구성도 Programmer

alert(Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor == Programmer) //true
alert(p1.constructor == Programmer) //true

를 가리키지만 이 문장 Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석 = new Person('mikej'); 다음의

Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor는 Person이 가리키는 개체의 구성인 Object를 가리킵니다. 원기. p1.constructor도 Object를 가리킵니다. 하지만 p1은 분명히 생성자 Programmer에 의해 생성되어 상속 혼란을 야기하므로 생성자를 수동으로 수정해야 합니다. 바로 아래 코드입니다.

Programmer.JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석.constructor = Programmer;

자, 이제 프로토타입 체인을 살펴보겠습니다.

console.dir(p1);

이 코드의 결과는

입니다. p1은 Programmer의 인스턴스이고 Person의 프로토타입은 Object입니다. 이것이 프로토타입 체인입니다. 즉, 프로토타입 체인을 기반으로 JavaScript 상속이 구현됩니다.

위 내용은 JavaScript 프로토타입 및 프로토타입 체인에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!