JavaScript 는 대상 의 속성 을 깊이 이해 합 니 다.

12109 단어
이 편 은 주로 JS 에서 대상 의 속성 을 소개 하 는데 속성의 분류, 방문 방식, 검 측 속성, 스 트 리밍 속성 과 속성 특성 등 내용 을 포함한다.
목차
1. 소개: 속성 을 설명 하 는 명명 방식, 경로 찾기 및 분류
2. 속성의 접근 방식: '접근 방식', '[]' 중 괄호 접근 방식 소개
3. 속성 삭제: delete 키 워드 를 통 해 대상 의 속성 을 삭제 합 니 다.
4. 검 측 속성: 특정한 속성 이 대상 인지 아 닌 지 를 판단 하 는 세 가지 인 스 턴 스 속성 을 소개 합 니 다: in, obj. hasOwnProperty, obj. property IsEnumerable
5. 스 트 리밍 속성: 세 가지 스 트 리밍 대상 의 속성 을 소개 합 니 다: for / in 구문 블록, Object. keys (obj), Object. getOwnProperty Names (obj)
6. 속성 특성: Escript 5 에 속성 특성 이 추가 되 었 습 니 다. 속성 을 매 거 할 수 있 는 지, 수정 할 수 있 는 지 등 을 설정 할 수 있 습 니 다.
 
1. 소개
1.1 설명
속성, 대상 의 구성원 을 가리 키 며 '속성' (필드) 뿐만 아니 라 방법 도 포함 되 어 있 습 니 다.
 
1.2 명명 방식
속성 이름 은 영문 문자, 숫자 (시작 할 수 없 음), 특수 기호 (예: -,, $등) 를 포함 할 수 있 습 니 다.
그러나 일반 영어 문 자 를 사용 하여 특수 한 상황 에서 - (가로 줄: - webkit -, - moz - )그리고
속성 이름 에 - (가로 줄) 이 포함 되 어 있 으 면 속성 접근 방식 은 '[]' 중 괄호 로 만 접근 할 수 있 습 니 다.
var o = {
    x: 1,
    y: 2,
    '-x': 3,
    '-showX': function () {
        alert(this.x);
    }
}
// o.-x; //          
console.log(o['-x']); // => 3 ：   -(  )     ，    '[ ]'       
o['-showX'](); // =>   1 ：      -(  )，

 
1.3 속성 찾기 경로
대상 의 속성 x 를 읽 으 려 면 먼저 이 대상 의 인 스 턴 스 속성 에서 찾 습 니 다. 찾 지 못 하면 이 대상 의 원형 대상 에서 속성 x 를 찾 습 니 다. 원형 대상 에 도 속성 x 가 없 으 면 이 원형 대상 의 원형 (원형 대상 이 원형 을 포함 하고 있다 고 가정) 을 계속 찾 습 니 다. 속성 x 나 원형 이 없 을 때 까지 찾 습 니 다.
 
1.4 속성의 분류
대상 중의 속성 은 자신의 속성 여부 에 따라 자체 속성 과 계승 속성 으로 나 눌 수 있 습 니 다.
① 자체 속성: 인 스 턴 스 속성 이 라 고도 할 수 있 고 대상 자체 의 속성 을 말한다.
② 상속 속성: 원형 속성 이 라 고도 할 수 있 으 며 대상 이 원형 에서 계승 하 는 속성 을 말한다.
 
2. 속성의 접근 방식
'점 접근 방식 과' [] '중 괄호 방법 으로 나 눌 수 있 습 니 다.
설명: 존재 하지 않 는 속성 을 읽 으 면 undefined 로 돌아 갑 니 다. 대상 이 존재 하지 않 는 속성 을 설정 하면 대상 에 게 이 속성 을 추가 합 니 다.
2.1 '점 접근 방식 
문법: obj. propertyName
설명: 속성 이름 은 표시 자 (정적 문자열) 여야 하 며 변수 가 될 수 없습니다.
예시:
var o = {};
o.x = '1';

 
2.2 '[]' 중 괄호 접근 방식
문법: obj [propertyName]
설명: 속성 이름 은 정적 문자열 일 수도 있 고 변수 일 수도 있 습 니 다. 변수 라면 접근 하 는 속성 은 변수 가 표시 하 는 값 입 니 다.
특징: '' 접근 방식 과 달리 '[]' 에서 괄호 접근 방식 의 유연성 이 매우 크다. 동적 접근 가능 (변수 지정 속성 명), 특정 특수 문 자 를 포함 하 는 속성 에 접근 할 수 있다 (예 를 들 어 속성 이름 띠 '-')
예시:
var o = { x: 1, y: 2 };
console.log(o['x']); // => 1 ：  x  
var a = 'y';
console.log(o[a]); // => 2 ：    y  (  a  )

 
3. 삭제 속성
문법: delete obj. propertyName 또는 delete obj[propertyName]
설명: delete 는 대상 의 자체 속성 만 삭제 할 수 있 고 계승 속성 은 삭제 할 수 없습니다.
예시:
var o = {};
o.x = '1';
console.log(o.x); // => 1
delete o.x;
console.log(o.x); // => undefined ：        ，  undefined

o.constructor.prototype.y = '2'; //           y  
console.log(o.y); // => 2
delete o.y; //       y
console.log(o.y); // => 2 ：          y

 
4. 속성 검사
대상 이 어떤 속성 을 포함 하고 있 는 지 검사 합 니 다.
4.1 연산 자
설명: 대상 이 특정한 속성 을 포함 하 는 지 판단 하고 대상 의 인 스 턴 스 속성, 계승 속성 에서 검 측 합 니 다.
문법: propertyName in obj
반환 값:
{bool} 대상 의 인 스 턴 스 속성 이나 계승 이 이 속성 을 포함 하 는 지 판단 합 니 다.
true: 대상 의 인 스 턴 스 속성 이나 계승 속성 은 이 속성 을 포함 합 니 다.
false: 대상 의 인 스 턴 스 속성 이나 계승 속성 은 이 속성 을 포함 하지 않 습 니 다. 
예시:
function People(name) {
    this.name = name;
}
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); //   Student    People  

var s = new Student(22);

console.log('age' in s); // => true ：age     
console.log('name' in s); // => true ：name     
console.log('address' in s); // => false ：address       ，  false

 
4.2 obj.hasOwnProperty(propertyName) 
설명: 대상 이 지정 한 이름 의 인 스 턴 스 속성 을 가지 고 있 는 지 판단 하고 계승 속성 을 검사 하지 않 습 니 다.
인자:
① property Name {string}: 속성 이름.
문법: obj. hasOwnProperty (propertyName) 
반환 값: 
{bool} 대상 이 지정 한 이름 의 인 스 턴 스 속성 을 가지 고 있 는 지 판단 합 니 다. 이 방법 은 대상 원형 체인 의 속성 을 검사 하지 않 습 니 다.
true: 속성 이 대상 인 인 스 턴 스 속성, 비 계승.
false: 속성 이 대상 이 아 닌 인 스 턴 스 속성 입 니 다.
예시:
var Student = function (name) {
    this.name = name;
};
//  Student       sayHello  
Student.prototype.sayHello = function () {
    alert('Hello,' + this.name);
}
//  Student       age  
Student.prototype.age = '';
 
var st = new Student('  '); //      st
console.log(st.hasOwnProperty('name')); // => true ：       ，  this.name        
console.log(st.hasOwnProperty('sayHello')); // => false ：sayHello         
console.log(st.hasOwnProperty('age')); // => false ：age

 
4.3 obj.propertyIsEnumerable(propertyName)
설명: 지정 한 이름 의 속성 이 인 스 턴 스 속성 인지, 매 거 진 것 인지 판단 합 니 다 (for / in 순환 매 거 진 사용 가능)
인자:
① property Name {string}: 속성 이름.
문법: obj. propertyIsEnumerable (propertyName)
반환 값:
{bool} 속성 이 인 스 턴 스 속성 인지 여 부 를 판단 하고 매 거 진 (for / in 순환 매 거 진 사용 가능) 입 니 다. 원형 체인 의 구성원 을 고려 하지 않 습 니 다.
true: 속성 이 대상 의 인 스 턴 스 속성 이 며 매 거 진 것 입 니 다.
false: 속성 이 대상 이 아 닌 인 스 턴 스 속성 이나 셀 수 없 는 것.
예시:
var o = Object.create({}, {
    name: {
        value: 'tom',
        enumerable: true //    
    },
    age: {
        value: 22,
        enumerable: false //     
    }
});

console.log(o.propertyIsEnumerable('name')); // => true ：name          
console.log(o.propertyIsEnumerable('age')); // => false ：age          

console.log(o.hasOwnProperty('age')); // => true ：hasOwnProperty()

 
4.4 총화
검사 방식
문법
속성 범위 검출 
반환 값
연산 자
propertyName in obj
인 스 턴 스 속성, 계승 속성
{bool} true: 조건 에 부합 되 며, fasle: 일치 하지 않 습 니 다.
obj.hasOwnProperty(propertyName) 
obj.hasOwnProperty(propertyName) 
인 스 턴 스 속성
{bool} true: 조건 에 부합 되 지 않 음; fasle: 부합 되 지 않 음
obj.propertyIsEnumerable(propertyName)
obj.propertyIsEnumerable(propertyName)
매 거 진 실례 속성
{bool} true: 조건 에 부합 되 지 않 음; fasle: 부합 되 지 않 음
 
5. 스 트 리밍 속성
대상 의 인 스 턴 스 속성, 계승 속성 을 옮 겨 다 니 는 것 입 니 다.
5.1 for / in 구문 블록
설명: 대상 을 옮 겨 다 니 며 매 거 진 인 스 턴 스 속성 과 계승 속성
문법:
for (p in obj) {/ p 는 옮 겨 다 니 는 속성 이름 을 표시 합 니 다}
예시:
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; //   o    po
for (property in o) {
    console.log(property); // =>        ：x、y、px、py
    console.log(o[property]); // =>          ，      
}

 
5.2 Object.keys(obj) 
설명: 대상 이 매 거 할 수 있 는 인 스 턴 스 속성 이름 을 포함 하 는 배열 을 되 돌려 줍 니 다.
인자:
①obj {object}: 인 스 턴 스 대상
반환 값:
{Array} 대상 이 매 거 진 인 스 턴 스 속성 이름 을 포함 하 는 배열 을 되 돌려 줍 니 다.
예시:
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; //   o    po
var propertyArray = Object.keys(o); // =>                     
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x、y
}

 
5.3 Object.getOwnPropertyNames(obj) 
설명: 대상 을 포함 하 는 모든 인 스 턴 스 속성 이름 을 되 돌려 줍 니 다. 매 거 진 것 과 매 거 진 것 을 포함 합 니 다.
인자:
①obj {object}: 인 스 턴 스 대상
반환 값:
{Array} 대상 의 모든 인 스 턴 스 속성 이름 을 포함 하 는 배열 을 되 돌려 줍 니 다.
Object. keys () 와 의 차이: Object. keys () 는 매 거 진 인 스 턴 스 속성 만 되 돌려 줍 니 다. Object. getOwnProperty Names () 는 모든 인 스 턴 스 속성 을 되 돌려 줍 니 다.
예시:
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
//     o     ：  x    ，  y     
Object.defineProperties(o, {
    x: {
        enumerable: true
    },
    y: {
        enumerable: false
    }
});
o.__proto__ = po; //   o    po

// 1.Object.keys()：                 
var propertyArray = Object.keys(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x 
}

// 2.Object.getOwnPropertyNames()：                ，           
propertyArray = Object.getOwnPropertyNames(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x、y
}

 
5.4 총화
검사 방식
문법
속성 범위 옮 겨 다 니 기 
반환 값
for / in 구문 블록
for (p in obj) {/ p 는 옮 겨 다 니 는 속성 이름 을 표시 합 니 다}
매 거 진 실례 속성 과 계승 속성
{String} 속성의 이름
Object.keys(obj)
Object.keys(obj)
매 거 진 실례 속성
{Array} 대상 이 매 거 진 인 스 턴 스 속성 이름 을 포함 하 는 배열 을 되 돌려 줍 니 다.
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(obj)
대상 을 포함 하 는 모든 인 스 턴 스 속성 이름 입 니 다. 매 거 진 것 과 매 거 진 것 을 포함 합 니 다.
{Array} 대상 의 모든 인 스 턴 스 속성 이름 을 포함 하 는 배열 을 되 돌려 줍 니 다.
 
6. 속성 설명자
데이터 속성 과 접근 기 속성 으로 나 뉜 다.
둘 은 서로 변환 할 수 있 습 니 다. 변환 후 enumerable 과 configurable 특성 (두 가지 속성 설명 자 는 모두 이 두 가지 특성 을 포함 합 니 다) 을 설정 하지 않 으 면 기본적으로 변환 전의 값 을 사용 합 니 다.
6.1 데이터 속성
설명: 속성 을 포함 하 는 조작 특성; 예 를 들 어 설정 값, 매 거 진 여부 등
특성 이름
묘사 하 다.
기본 값
value
속성 값 설정
undefined
writable
속성의 값 을 수정 할 수 있 습 니까? true: 속성의 값 을 수정 할 수 있 습 니 다. false: 속성의 값 을 수정 할 수 없습니다.
false　　
enumerable
속성 을 매 거 할 수 있 는 지 여부; true: 매 거 할 수 있 습 니 다. for / in 문 구 를 통 해 속성 을 매 거 할 수 있 습 니 다. false: 매 거 할 수 없습니다.
false
configurable
속성의 특성 을 수정 할 수 있 는 지 여부; true: 속성의 특성 을 수정 할 수 있 습 니 다 (예 를 들 어 writable 을 false 에서 true 로 변경). false: 속성의 특성 을 수정 할 수 없습니다.
false
 
 
 
 
기본 값:
1) Object. defineProperty, Object. defineProperties 또는 Object. create 함 수 를 사용 한 경우 데이터 속성 을 추가 합 니 다. writable, enumerable, configurable 기본 값 은 false 입 니 다.
2) 대상 이 직접 만 든 속성 을 사용 합 니 다. writable, enumerable, configurable 기능 은 기본적으로 true 입 니 다.
예시:
// 1)     ；       true
var o1 = {
    name: 'tom'
};
console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}

// 2)  Object.create  ，       false
var o2 = Object.create(null, {
    name: {value:'tom'}
});
console.log(Object.getOwnPropertyDescriptor(o2, 'name')); // => Object {value: "tom", writable: false, enumerable: false, configurable: false}

 
6.2 접근 기 속성
설명: 속성 을 설정 하 는 접근 방식;set, get 특성 등
특성 이름
묘사 하 다.
기본 값
get
속성의 반환 값 함수
undefined
set
속성의 설정 값 함수;할당 인자 포함
undefined
enumerable
매 거 속성 여부;true: 매 거 할 수 있 습 니 다. for / in 문 구 를 통 해 속성 을 매 거 할 수 있 습 니 다.false: 셀 수 없 음
false
configurable
속성의 특성 을 수정 할 수 있 는 지 여부;true: 속성의 특성 을 수정 할 수 있 습 니 다. (예 를 들 어 writable 을 false 에서 true 로 바 꿀 수 있 습 니 다.)false: 속성의 특성 을 수정 할 수 없습니다.
false
 
 
 
 
예시:
var obj = {};

//       ，         
Object.defineProperty(obj, "name", {
    get: function () {
        return this._name; // get set          ， ：   name，get set   _name
    },
    set: function (x) {
        if (isNaN(x)) {
            this._name = x;
        } else {
            this._name = 'name      ';
        }
    },
    enumerable: true,
    configurable: true
});

console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function, enumerable: true, configurable: true} 
obj.name = '12';
console.log(obj.name); // => name

 
End
웹 개발 의 길 시리즈
메뉴 불 러 오 는 중...
이펙티브자바(3) - 클래스와 인터페이스
데이터베이스 Tip 명령어

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage