JS 프로토타입 및 프로토타입 체인을 이해하기 쉽게 분석

이번에는 JS 프로토타입과 프로토타입 체인에 대한 이해하기 쉬운 분석을 가져오겠습니다. JS 프로토타입과 프로토타입 체인을 분석할 때 주의사항은 무엇인가요?

브라우저의 개체

브라우저에는 어떤 개체가 있나요? ES에서는 전역 객체가 전역인 반면, 브라우저에서는 전역 객체가 창입니다.

크롬 콘솔에 창을 입력하면 창에 무엇이 있는지 볼 수 있습니다.

창에서 다음 개체를 찾을 수 있습니다.
Object, String, Numbr, Boolean, Array, Date, Math, ParseInt 및 ParseFloat와 같은 속성은 모두 ES에서 지정한 필수 개체입니다.
문서, 경고, 프롬프트, atob 등은 브라우저에 내장된 속성입니다.

이러한 개체는 모두 해시 구조를 가지고 있습니다. 예를 들어 개체 및 문자열에는 고유한 속성과 메서드가 있으며 해당 API 호출이 있습니다.

단순 유형 및 객체

예는 다음과 같습니다. n1은 단순 유형이고 n2는 객체입니다.

var n1 = 'a'var n2 = new String('a')
n1.length
n1.hasOwnProperty('0')
n2.length
n2.hasOwnProperty('0')
n1.xxx = 2n1.xxx // undefined

차이

n1 값이 스택에 저장됩니다. n2가 할당되면 스택에 힙을 가리키는 주소가 생성되고 힙 메모리에 새로운 문자열 유형 개체가 생성됩니다. 객체 n2에는 프로토타입 속성뿐만 아니라 일부 속성이 있음을 알 수 있습니다.

Attribute

n2는 길이 속성을 갖는 객체이므로 호출됩니다. n1은 단지 string인데, 왜 길이 속성도 가지고 있나요? n1.length일 때 js는 다음 작업을 수행합니다. var temp = new String(n1);n1.length; 즉, 속성이나 메소드를 사용하면 실행 시 힙 메모리에 임시로 새 객체가 생성됩니다. 이 객체는 실행 후 해당 문자열 유형입니다. 따라서 n1.xxx = 2 작업은 오류를 보고하지 않지만, 이때 힙 메모리에 있는 n1의 데이터가 삭제되었기 때문에 n1.xxx는 다시 undefounded로 표시됩니다.

따라서 js에서는 새 객체의 new 메소드를 거의 사용하지 않고 변수를 직접 할당합니다.

n2의 hasOwnProperty()

hasOwnProperty()는

Object 클래스

유형의 메서드입니다. Sting 유형에서는 찾을 수 없습니다. 여기 hasOwnProperty()는 n2.proto.proto에 있습니다. n2.proto는 String.prototype을 가리키고 String.prototype.proto는 최종적으로 Object.prototype을 가리킵니다. String은 프로토타입이고 Object도 프로토타입입니다. Object.prototype은 Object 유형의 모든 공용 속성을 저장합니다.

이렇게 하면 공간을 효과적으로 절약하고 각 객체에 많은 속성을 기록하지 않아도 됩니다. 객체에서 찾을 수 없는 속성의 경우 proto가 가리키는 객체에서 검색하세요. 지적되는 지점은 대개 특정 프로토타입의 프로토타입이다.

proto와 프로토타입을 찾을 수 있는 곳

var n = new Number(1)var s= new String('1')var o= new Object()

위 메소드는 var object = function()으로 간주할 수 있습니다.

요약하면 object.proto = function.prototype입니다.

Proto 방문

proto는 객체를 생성한 사람이 누구인지 확인하기 위해 객체에 상대적입니다. n의 경우 아버지는 Number이므로 Number.prototype으로 이동하여 찾으세요. Number에도 proto가 있습니다. 액세스할 때 상위 개체에서 찾아보세요.

Function
String.proto === Function.prototype //true

함수도 객체로 간주할 수 있습니다. 문자열, 객체, 숫자는 모두 객체이자 함수입니다. 이전에 new String()을 사용했기 때문에 이것은 함수이고, 함수 반환 결과의

데이터 유형

은 객체입니다. String의 아버지는 Function입니다.

Function.proto === Function.prototype //trueFunction.prototype.proto === Object.prototype //trueFunction.proto.proto === Object.prototype //true

Function

을 Function 메소드에 의해 생성된 객체, 즉, var Function = new Function()으로 보면 Function.proto === Function.prototype


Fuction의 타입은 다음과 같다고 이해할 수 있습니다. function 은 Function 으로 구성됩니다. 위의 사진을 보면 그 관계를 알 수 있습니다. new String()인 경우 String의 유형도 function이고 String.proto는 Function.prototype을 가리킵니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS에서 기능 및 브라우저 추론을 피하는 방법

JS 퍼사드 모드 사용 사례에 대한 자세한 설명

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