JavaScript 프로토타입 상속에 대한 깊은 이해

상속의 본질: 재사용

자바스크립트의 프로토타입 상속을 논의하기 전에 상속이 왜 필요한지 생각해 보는 것이 좋습니다. ?

두 개의 객체가 있는 경우 그 중 일부는 동일한 속성을 갖고 다른 하나는 다른 속성을 갖는 시나리오를 생각해 보세요. 일반적으로 좋은 설계 솔루션은 재사용을 위해 동일한 로직을 추출하는 것입니다.

xiaoMing liLei 학생 두 명을 예로 들어 보겠습니다. 두 명의 반 친구는 자신의 이름을 가지고 있으며 자신을 소개합니다. 프로그램 객체로 추상화하면 다음과 같이 표현될 수 있다.

var xiaoMing = {
  name : "xiaoMing",
  hello : function(){
    console.log( 'Hello, my name is '+ this.name + '.');
  }
}

var liLei = {
  name : "liLei",
  hello : function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
}

Java를 사용해 본 학생들이라면 이 문제를 해결하기 위해 먼저 객체지향을 사용하는 것을 생각할 수도 있습니다. Person 클래스를 만들고 xiaoMing과 liLei라는 두 개체를 인스턴스화합니다. ES6에는 Java의 클래스와 유사한 개념인 class 도 있습니다.

다음은 ES6 구문을 사용하고 객체 지향 아이디어를 사용하여 위 코드를 재구성합니다.

class Person {
  constructor(name){
    this.name = name
  }

  hello(){
    console.log(this.name);
  }
}

var xiaoMing = new Person('xiaoMing');
var liLei = new Person('liLei');

보시다시피 클래스를 사용하여 객체를 생성하면 재사용 목적이 달성됩니다. 그것이 기반으로 하는 논리는 두 개 이상의 객체가 유사한 구조와 기능을 가지고 있는 경우 템플릿을 추상화할 수 있고 템플릿에 따라 여러 유사한 객체를 복사할 수 있다는 것입니다.

자전거 제조업체가 동일한 청사진을 계속해서 재사용하여 많은 자전거를 만드는 것처럼 클래스를 사용하여 개체를 만듭니다.

물론 재사용 문제에 대한 해결책은 두 가지 이상입니다. 전통적인 객체 지향 클래스는 솔루션 중 하나일 뿐입니다. 이제 다른 각도에서 재사용 문제를 해결하는 주인공 "프로토타입 상속"이 등장할 차례입니다.

프로토타입 상속의 원리

프로토타입 객체

자바스크립트의 객체는 일반 속성 모음과 프로토타입 속성의 두 부분으로 구성됩니다.

var o = {
  a : 'a',
  ...
  __proto__: prototypeObj
}

일반 속성은 프로토타입 속성을 참조하고 __proto__를 참조합니다. 이는 사양의 일부가 아니었습니다. 나중에 크롬은 __proto__를 통해 언어의 기본 속성을 노출했으며 이는 점차 모든 사람에 의해 승인되어 ES6 사양에 추가되었습니다. o.__proto__prototypeObj의 값은 프로토타입 객체입니다. 프로토타입 객체는 실제로는 평범한 객체이다. 프로토타입 객체라고 불리는 이유는 단지 프로토타입 속성이 가리키는 값이기 때문이다.

프로토타입 개체는 일반 개체에는 없는 능력, 즉 다른 개체와 속성을 공유하는 능력을 가지고 있기 때문에 특별합니다.

ES6 사양에서는 다음과 같이 정의됩니다.

object that provides shared properties for other objects

속성 읽기 작업

원래 예시로 돌아가 프로토타입 상속을 사용하여 재사용 목적을 달성하는 방법을 확인하세요. .

var prototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  // ...
}

var xiaoMing = {
  name : "xiaoMing",
  __proto__ : prototypeObj
}

var liLei = {
  name : "liLei",
  __proto__ :  prototypeObj
}

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

xiaoMing liLei 객체에는 hello 속성(메서드)이 직접 없지만 속성을 읽을 수 있습니다(메서드 실행).

수학 숙제를 하다가 어떻게 해야 할지 모르는 어려운 문제에 직면하는 시나리오를 상상해 보세요. 그리고 당신은 수학을 아주 잘하는 좋은 형제가 있습니다. 당신은 그에게 도움을 요청하고 이 문제를 해결합니다.

xiaoMing 개체에는 hello 속성이 없지만, 프로토타입Obj라는 좋은 형제가 있습니다. 속성 읽기 작업의 경우 xiaoMing에서 hello 속성을 찾을 수 없으면 형제 프로토타입Obj를 묻습니다. 그러면 hello 메소드가 실행됩니다.

프로토타입 체인

여전히 수학 문제를 푸는 예입니다. 당신의 수학 문제는 어렵고 당신의 동생은 답을 갖고 있지 않습니다. 그는 다른 반 친구에게 물어볼 것을 권합니다. 그렇게 하면 답을 얻을 때까지 또는 물어볼 사람이 남지 않을 때까지 더 이상 묻지 않게 됩니다. 마치 당신과 반 친구들을 연결하는 보이지 않는 사슬이 있는 것 같습니다.

JS에서 읽기 작업은 프로토타입 체인이라고 하는 __proto__를 통해 레이어별로 연결됩니다.

var deepPrototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  __proto__ : null
}

var prototypeObj = {
  __proto__ : deepPrototypeObj
}

var xiaoMing = {
  name : "xiaoMing",
  __proto__ : prototypeObj
}

var liLei = {
  name : "liLei",
  __proto__ :  prototypeObj
}

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

프로토타입 상속 구현

위의 예에서 프로토타입 상속은 __proto__ 속성 ​​값을 직접 수정하여 구현됩니다. 그러나 실제 제작에서는

대안은 Object.create() 메서드를 사용하는 것입니다.

Object.create() 메서드를 호출하면 새 객체가 생성되고 객체의 프로토타입 객체가 전달된 첫 번째 매개변수로 지정됩니다.

위의 예를 바꿔보겠습니다.

var prototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  // ...
}

var xiaoMing = Object.create(prototypeObj);
var liLei = Object.create(prototypeObj);

xiaoMing.name = "xiaoMing";
liLei.name = "liLei";

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

You-Dont-Know-JS의 작성자는 이 프로토타입 상속 구현에 매우 흥미로운 이름인 OLOO(objects-linked-to-other-objects)를 사용하지 않습니다. 모든 클래스, 유일한 객체라는 개념이므로 JavaScript의 특성과 매우 일치합니다.

JS에는 클래스가 없기 때문에 object .

아쉽게도 수업을 좋아하는 프로그래머가 너무 많아서 ES6에서는 클래스 개념이 추가되었습니다. 다음 글에서는 JS에서의 클래스 구현 원리에 대해 이야기하겠습니다

요약

클래스는 재사용 목적을 달성하기 위해 객체를 생성합니다. 그 기반이 되는 논리는 두 개 이상의 개체가 유사한 구조와 기능을 가지고 있다는 것입니다. 템플릿은 추상화될 수 있으며 템플릿에 따라 여러 개의 유사한 개체를 복사할 수 있습니다. 이는 자전거 제조업체가 동일한 청사진을 계속해서 재사용하여 많은 자전거를 만드는 것과 같습니다.

프로토타입 상속을 사용하면 재사용 목적도 달성할 수 있습니다. 그 기반이 되는 논리는 두 개 이상의 객체가 일부 공유 속성을 가지고 있다는 것입니다. 공유 속성은 특별한 프로토타입 속성을 통해 공개 객체와 일반 객체를 연결하고 재사용할 수 있습니다. ) 규칙을 순회하고 검색하여 속성

공유 을 실현합니다.

이상은 javaScript 프로토타입 상속에 대한 심층적인 이해입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!