> 웹 프론트엔드 > JS 튜토리얼 > JavaScript_javascript 기술의 객체 속성 읽기 및 쓰기 방법 소개

JavaScript_javascript 기술의 객체 속성 읽기 및 쓰기 방법 소개

WBOY
풀어 주다: 2016-05-16 16:23:09
원래의
1530명이 탐색했습니다.

JavaScript에서는 점 연산자 "." 또는 대괄호 연산자 "[]"를 사용하여 객체의 속성을 읽고 쓸 수 있습니다.


코드 복사 코드는 다음과 같습니다.

var o = {x:1, y:2};
console.log(o.x);//1
console.log(o["y"]);//2
o.y = 7;
console.log(o["y"]);//7


대괄호 연산자를 사용하는 경우 연산자 내의 값 유형은 문자열이거나 문자열로 변환할 수 있는 표현식이어야 한다는 점에 유의할 가치가 있습니다.


코드 복사 코드는 다음과 같습니다.

console.log(o[y]);//ReferenceError: y가 정의되지 않았습니다
var v = "y";
console.log(o[v]);//7


Java 언어와 달리 JavaScript의 개체 속성은 동적으로 추가하거나 삭제할 수 있습니다. 속성에 값을 할당할 때 속성이 존재하지 않으면 JavaScript는 객체에 속성을 동적으로 추가합니다.


코드 복사 코드는 다음과 같습니다.

o.z = 99;
console.log(o);//객체 {x=1, y=7, z=99}

프로토타입 상속 체인의 속성 읽기

JavaScript의 모든 개체는 프로토타입 개체를 가지며 프로토타입 개체의 속성을 상속하므로 JS의 개체 속성은 두 가지 주요 범주로 나뉩니다.

1. 물건 자체가 소유한 재산(“소유 재산”).
2. 프로토타입 객체에서 상속된 속성입니다.

객체의 속성을 읽을 때 따르는 규칙은 다음과 같습니다.

1. 객체의 자체 속성 컬렉션("자체 속성")에서 읽어야 할 속성을 검색합니다. 검색 가능한 경우 해당 속성을 직접 읽고 해당 값을 반환합니다.
2. 객체 자체 속성 컬렉션("자신의 속성")에서 속성을 검색할 수 없는 경우 속성이 검색되어 해당 값이 반환될 때까지 객체의 프로토타입 체인에서 검색이 계속됩니다.
3. 객체 자체의 속성 컬렉션("Own Property")이나 객체의 모든 프로토타입 객체에서 속성을 검색할 수 없는 경우 undefound가 반환됩니다.

프로토타입 상속 체인의 속성 작성

JavaScript 객체의 속성에 쓸 때 따르는 규칙은 다음과 같습니다.

1. 객체 자체에 속성이 있고 해당 속성이 쓰기 가능한 경우 속성에 새 값을 씁니다. 속성이 읽기 전용이면 오류가 보고됩니다.
2. 객체 자체에 속성이 없고 해당 속성이 모든 프로토타입 객체에 존재하지 않는 경우 객체에 속성을 추가합니다.
3. 객체 자체에는 속성이 없지만 속성이 프로토타입 객체에 존재하고 쓰기 가능한 경우 JS는 객체에 새 속성을 생성합니다. 즉, 객체가 프로토타입 객체의 속성을 덮어씁니다. 프로토타입 객체의 이 속성 값은 변경되지 않습니다.
4. 객체 자체에는 속성이 없지만 속성이 해당 프로토타입 객체에 존재하고 읽기 전용인 경우 오류가 보고됩니다.
5. 객체 자체에는 속성이 없지만 속성의 setter 메소드가 프로토타입 객체에 존재하는 경우 JS는 프로토타입 객체에서 setter 메소드를 호출합니다. setter 메소드를 실행할 때 변수 할당이 포함된 경우 할당 작업은 객체 자체에 적용되며 프로토타입 객체는 어떤 방식으로든 변경되지 않는다는 점은 주목할 가치가 있습니다. 이 동작은 다음과 같이 이해될 수 있습니다. 객체는 프로토타입에서 setter 함수를 상속하여 실행합니다.

위 규칙에서 속성 할당 작업이 성공하면 마지막으로 수정되는 항목은 항상 객체 자체가 되며 해당 프로토타입 프로토타입 객체에는 변경 사항이 없다는 것을 알 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿