>웹 프론트엔드 >JS 튜토리얼 >좀 더 자세하게 JavaScript 객체의 속성과 프로토타입 간의 관계는 무엇입니까_javascript 기술

좀 더 자세하게 JavaScript 객체의 속성과 프로토타입 간의 관계는 무엇입니까_javascript 기술

WBOY
WBOY원래의
2016-05-16 19:10:561148검색

ECMAScript는 두 가지 유형의 객체를 인식할 수 있습니다. 하나는 Native Object라고 하며 다른 하나는 문서 객체,
Dom Node
와 같은 실행 환경에서 제공되는 Host Object입니다. 기본 객체는 느슨한 구조이며 속성은 동적으로 추가될 수 있습니다. 모든 속성에는 이름과 값이 있습니다. 이 값은 다른 객체
에 대한 참조 또는 내장 데이터 유형(문자열, 숫자, 부울, Null 또는 정의되지 않음)
다음의 간단한 예에서는 JavaScript 개체가 속성 값을 설정하는 방법과 속성 값을 읽는 방법을 설명합니다.

할당 작업
객체의 속성을 생성하는 방법은 매우 간단합니다. 할당 작업을 통해 직접 속성 생성을 완료할 수 있습니다.
코드

1. var objectRef = new Object(); //일반 자바스크립트 객체를 생성합니다.


testNumber라는 속성을 생성할 수 있습니다.
코드

1. objectRef.testNumber = 5
2. /* - 또는:- */
3. objectRef["testNumber"] = 5; >
복사된 속성 이름이 이미 존재하는 경우 속성은 다시 생성되지 않습니다.
Code

1. objectRef.testNumber = 8; > 2 . /* - 또는:- */
3. objectRef["testNumber"] = 8



js 객체의 프로토타입 자체가 객체일 수 있습니다. 속성(property)이 있을 수 있으며, js 객체(프로토타입)의 할당 작업은 일반적인 객체 속성 생성
과 다르지 않습니다.

값 연산
값 연산에서는 속성과 프로토타입이 다릅니다. 먼저 가장 간단한 속성 값 연산을 살펴보겠습니다.
코드

1. /*객체의 속성에 값을 할당합니다. 객체에 이 속성이 없는 경우 할당 작업 후에 객체는 이 속성을 갖게 됩니다. */
2. objectRef.testNumber = 8;
3. /* 이 속성의 값을 읽습니다. */
4. var val = objectRef.testNumber
5.
6. /* 이제 val은 방금 할당됨 objectRef 값은 8*/


프로토타입 공개

그러나 모든 객체는 프로토타입을 가질 수 있고 프로토타입 자체도 객체이므로 프로토타입을 가질 수도 있습니다. 그리고 이 순환은 이렇게 계속됩니다. 프로토타입 체인이 형성됩니다.
체인의 형성 프로토타입이 null임을 발견하면 이 체인이 종료됩니다.(Object의 기본 프로토타입은 null입니다.)
Code

1. var objectRef = new Object(); //일반 javascript 객체를 생성합니다.


새 js를 생성합니다. object, 이 개체의 프로토타입은 현재 Null이므로 objectRef의 프로토타입 체인에는 하나의 개체만 포함됩니다. Object.prototype
다음 코드를 보고 있습니다
코드

1. /* MyObject1 유형 생성자
빌드 2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* 개체에 대해 testNumber라는 속성을 만듭니다. 6. */
7. this.testNumber = formatParameter
8. }
9.
10. /* MyObject2 유형의 생성자 빌드
11. MyObject2 - 유형:-
12. */
13. function MyObject2(formalParameter){
14. /* 객체에 대해 testString이라는 속성을 생성합니다*/
15. this.testString = 형식 매개변수
16 . }
17.
18. /* 다음 단계에서는 MyObject2의 기본 프로토타입 속성을 MyObject1 개체로 대체합니다*/
19. MyObject2.prototype = new MyObject1(8)
20 .  
21. /* 마지막으로 MyObject2*/ 유형의 객체를 생성합니다.  
22.  
23. var objectRef = new MyObject2("String_Value");  


objectRef MyObject2 유형 객체에는 프로토타입 체인이 있습니다. 체인의 첫 번째 객체는 MyObject1 객체에도 있습니다.
이 프로토타입은 Object.prototype의 기본 프로토타입입니다. 이 프로토타입 체인이 종료됩니다.
값 연산이 발생하면 objectRef의 전체 프로토타입 체인이 작동하기 시작합니다
코드

1. var val = objectRef.testString


objectRef 개체가 있습니다. testString이라는 속성이 있으면 이 코드는 testString 값을 val

에 할당합니다. 1. var val = objectRef.testNumber


in objectRef 속성이 없습니다. testNumber가 개체에 있지만 val이 undefine 대신 값 8에 도달했습니다. 이는 인터프리터가 현재 개체에서 찾고 있는
속성을 ​​찾지 못한 후 개체의 프로토타입과 objectRef를 확인하기 때문입니다. 프로토타입은 MyObject1 개체입니다. 이 개체에는 testNumber 속성이 있으므로 val은 값 8을 가져옵니다.
코드

1. var val = objectRef.toString;


이제 val은 함수에 대한 참조입니다. MyObject1도 아니기 때문입니다. MyObject2에도 없습니다. toString 속성
을 정의하면 Object.prototype이 반환됩니다.
코드

1. var val = objectRef.madeUpProperty;


MyObject1, MyObject2 및 Object가 madeUpProperty 속성을 정의하지 않았기 때문에 마지막 값은 정의되지 않았습니다. get은 정의되지 않았습니다.

읽기 작업은 obj 자체와 프로토타입 체인에서 발견된 동일한 이름을 가진 첫 번째 속성 값을 읽습니다.
쓰기 작업은 obj 객체 자체에 대해 동일한 이름을 가진 속성을 생성합니다. (속성 이름이
이 아닌 경우 objectRef.testNumber = 3이 testNumber라는 이름으로 objectRef 객체에 속성을 생성한다는 의미입니다. 다음에 testNumber를 읽으면
속성 유형 체인이 작동하지 않으며 objectRef의 속성만 가져옵니다. 3. MyObject1의 testNumber 속성은 수정되지 않습니다.다음 코드를 확인할 수 있습니다.
Code

1. /* MyObject1 유형의 생성자를 구성합니다
2. MyObject1 -
3. */
4. 함수 MyObject1 ( 형식 매개변수){
5. /* 개체에 대해 testNumber라는 속성을 만듭니다. 6. */
7. this.testNumber = 형식 매개변수
8. }
9.
10. /* MyObject2 유형의 생성자를 생성합니다
11. MyObject2 - 유형:-
12. */
13. function MyObject2(formalParameter){
14. /* 객체에 대한 속성 생성 명명된 testString*/
15. this.testString = formatParameter;
16. }
17.
18. /* 다음 단계에서는 기본 MyObject2를 MyObject1 개체 프로토타입 속성으로 바꿉니다*/
19. var obj1 = new MyObject1(8);
20. MyObject2.prototype = obj1;
21.
22. /* 마지막으로 MyObject2 유형의 객체를 생성합니다* /
23 . var objectRef = new MyObject2("String_Value");
25.
26. 경고(objectRef.testNumber);
27. objectRef.testNumber = 5 );
29. 경고(obj1.testNumber);

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.