간단한 용어로 JavaScript 프로토타입 체인 이해하기_javascript 기술

이 기사의 예는 JavaScript의 프로토타입 체인을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

JavaScript 프로토타입 체인에 대해 저는 그것이 매우 깊은 것이라고 생각하곤 했고, 결코 명확하게 이해하지 못했습니다. 오늘 몇 가지 소개를 읽은 후 이 그림을 발견했는데, 이는 이보다 더 명확하게 설명할 수 있는 언어가 없다는 것을 의미합니다. 그림.

이 사진을 보고 문득 자바스크립트에 대한 질적인 이해가 생겼습니다.

JavaScript 프로토타입 체인에는 명시적 체인과 암시적 체인의 두 가지 유형이 있습니다.

명시적 프로토타입 체인: 는 일반적인 프로토타입입니다.

암시적 프로토타입 체인: 일반적인 상황에서는 액세스할 수 없습니다. 즉, FireFox에서 __proto__를 통해 액세스할 수 있습니다. 암시적 프로토타입 체인은 자바스크립트 엔진 내에서 프로토타입 체인을 검색하는 데 사용됩니다. . 프로토타입 체인을 표시하여 설정합니다.

1. 프로토타입과 __proto__의 개념

Prototype은 함수의 속성입니다(각 함수에는 프로토타입 속성이 있습니다). 이 속성은 객체를 가리키는 포인터입니다. 수정된 객체의 프로토타입을 표시하는 속성입니다.

__proto__는 객체가 소유한 내장 속성입니다(참고: 프로토타입은 함수의 내장 속성이고 __proto__는 객체의 내장 속성입니다). JS에서 내부적으로 사용되는 속성입니다. 프로토타입 체인을 찾으려면

Chrome과 FF 모두 객체의 __proto__ 속성에 액세스할 수 있지만 IE는 액세스할 수 없습니다.

2. 새로운 프로세스

var Person = function(){};
var p = new Person();

새로운 프로세스는 다음 세 단계로 나누어집니다.

(1) var p={}; 즉, 객체 p를 초기화합니다
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 즉 초기화 p라고도 할 수 있는 p를 구성합니다

핵심은 두 번째 단계에 있습니다. 이를 증명해 보겠습니다.

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);

이 코드는 true를 반환합니다. 이는 2단계가 정확하다는 것을 보여줍니다.

3. 예시

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();

p는 Person을 참조하는 객체입니다. Person의 프로토타입에 sayName 메소드와 age 속성을 정의했습니다. p.age를 실행할 때 먼저 이 내부(즉, 생성자 내부)를 검색합니다. 발견되지 않으면 프로토타입을 따라 다시 추적합니다. 체인.

여기서 상향 역추적은 어떻게 위쪽으로 작동하나요? 여기서는 검색을 위해 프로토타입(즉, Person.prototype)에 연결하기 위해 __proto__ 속성을 사용해야 합니다. 마침내 프로토타입에서 age 속성을 찾았습니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.