JavaScript 대상 의 특성 과 실천 응용 에 대한 심도 있 는 설명

본 고의 실례 는 자 바스 크 립 트 대상 의 특성 과 실천 응용 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
JavaScript 의 간단 한 데이터 형식 은 숫자, 문자열, 불 값 (true / false), null 및 undefined 이 며, 기타 모든 값 은 대상 입 니 다.이 대상 들 은 가 변 적 인 키 쌍 집합 이다.
대상 은 속성의 용기 이 며, 속성 마다 이름과 값 이 있 습 니 다.속성의 이름 은 빈 문자열 을 포함 하 는 모든 문자열 일 수 있 으 며, 속성 값 은 undefined 값 을 제외 한 임의의 값 입 니 다.
대상 은 유형 이 없습니다. 속성의 이름과 값 에 대해 유형 제한 이 없습니다.그래서 대상 은 데 이 터 를 모 으 고 관리 하기에 적합 하 다.대상 은 다른 대상 을 포함 할 수 있 기 때문에 트 리 나 도형 데이터 구조 로 쉽게 표시 할 수 있다.
원형 체인 을 사용 하면 한 대상 이 다른 대상 의 속성 을 계승 할 수 있 습 니 다.이 기능 을 합 리 적 으로 사용 하면 초기 화 대상 이 소모 하 는 메모리 와 시간 을 줄 일 수 있다.
1 개체 글자 크기
대상 글자 의 양 은 한 쌍 의 괄호 에 둘러싸 인 0 또는 여러 개의 이름 값 쌍 입 니 다. 표현 식 이 허용 되 는 곳 에 나타 날 수 있 습 니 다.

var empty_object = {};
var stooge = {
  "first-name": "deniro",
  "last-name": "Li"
};

속성의 이름 은 빈 문자열 을 포함 하 는 모든 문자열 일 수 있 습 니 다.속성 명 이 합 법 적 인 자 바스 크 립 트 식별 자 라면 따옴표 가 붙 지 않 아 도 됩 니 다.쉼표 는 여러 개의 이름 값 을 구분 하 는 데 쓰 인 다.
속성 값 은 임의의 표현 식 (다른 대상 의 글자 수 포함) 일 수 있 습 니 다. 즉, 대상 은 도망 갈 수 있 습 니 다.

var flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    IATA: "SYD",
    time: "2017-08-02 19:00",
    city: "Sydney"
  },
  arrival: {
    IATA: "LAX",
    time: "2017-08-03 21:37",
    city: "Los Angeles"
  }
};

검색[ ] 문법 을 사용 하여 대상 의 값 을 얻 을 수 있 습 니 다.문자열 표현 식 이 문자열 의 글자 크기 이 고 합 법 적 인 자바 스 크 립 트 식별 자 라면 '문법' 도 사용 할 수 있 습 니 다.우선 사용 합 니 다. 문법 은 더욱 치밀 하고 가 독성 이 좋 기 때 문 입 니 다.

console.log(stooge["first-name"]);//"deniro"
console.log(flight.departure.IATA);//"SYD"（     .    ）

검색 할 속성의 값 이 존재 하지 않 으 면 undefined 로 돌아 갑 니 다:

console.log(stooge["middle-name"]);
console.log(flight.status);
console.log(stooge["FIRST-NAME"]);

| | 연산 자 는 기본 값 을 채 울 수 있 습 니 다:

console.log(stooge["middle-name"] || "(none)");//(none)
console.log(flight.status || "unknown");//unknown

undefined 속성 에서 값 을 추출 하면 TypeError 이상 을 던 집 니 다. 우 리 는 & & 를 사용 하여 이 문 제 를 피 할 수 있 습 니 다.

console.log(flight.equipment);//undefined
//console.log(flight.equipment.model);//   TypeError
console.log(flight.equipment && flight.equipment.model);//undefined

업데이트
할당 문 구 를 통 해 대상 의 값 을 업데이트 할 수 있 습 니 다.속성 명 이 대상 에 존재 하면 속성의 값 이 대 체 됩 니 다:

stooge["first-name"] = "lily";
console.log(stooge["first-name"]);//"lily"

대상 이 이전에 이 속성 이 없 었 다 면 이 새로운 속성 은 대상 으로 확 대 됩 니 다:

stooge["middle-name"] = "Song";
console.log(stooge["middle-name"]);//"Song"
stooge.nickname = "Deniro";
console.log(stooge.nickname);//"Deniro"
flight.equipment = {
  model: "Boeiing 787"
};
console.log(flight.equipment.model);//"Boeiing 787"
flight.status = "overdue";
console.log(flight.status);//"overdue"

인용
대상 은 인용 을 통 해 전달 되 기 때문에 영원히 복사 되 지 않 습 니 다.

var x = stooge;
x.nickname = "Lucy";
console.log(stooge.nickname);//"Lucy"；x   stooge        
var a = {}, b = {}, c = {};//a、b、c           
a = b = c = {};//a、b、c         

원형
모든 대상 이 하나의 원형 대상 에 연결 되 어 원형 대상 의 속성 을 계승 한다.대상 의 글자 수 를 통 해 만 든 모든 대상 이 Object.prototype 에 연결 되 어 있 으 며, 이것 은 레이 블 대상 입 니 다.
새 대상 을 만 들 때 원형 으로 대상 을 지정 할 수 있 습 니 다.Object 에 create 방법 을 추가 합 니 다. 원본 대상 을 원형 대상 으로 사용 하 는 새로운 대상 을 만 들 고 되 돌려 줍 니 다.

if (typeof Object.beget !== "function") {
  Object.create = function (o) {
    var F = function () {
    };
    F.prototype = o;
    return new F();
  }
}
var another_stooge = Object.create(stooge);

대상 을 업데이트 할 때 원형 대상 을 업데이트 하지 않 습 니 다.

another_stooge["first-name"] = "Jack";
console.log(another_stooge["first-name"]);//"Jack"
console.log(stooge["first-name"]);//"lily"

검색 할 때 만 원형 대상 을 사용 할 수 있다.대상 에서 특정한 속성 을 검색 하지 않 으 면 자 바스 크 립 트 는 원형 대상 에서 속성 값 을 가 져 오 려 고 합 니 다. 만약 에 찾 지 못 하면 자 바스 크 립 트 는 원형 체인 을 따라 Object 까지 위로 거 슬러 올 라 갑 니 다.모두 존재 하지 않 으 면 undefined 로 돌아 갑 니 다.
원형 관 계 는 동태 적 인 관계 다.만약 에 우리 가 원형 체인 에 속성 을 추가 하면 이 속성 은 이 원형 을 바탕 으로 만 든 모든 대상 을 볼 수 있 습 니 다.

stooge.profession = "actor";
console.log(another_stooge.profession);//"actor"

반사typeof 조작 부 호 는 속성의 유형 을 확정 하 는 데 도움 이 된다.

console.log(typeof flight.number);//number
console.log(typeof flight.status);//string
console.log(typeof flight.arrival);//object
console.log(typeof flight.manifest);//undefined

원형 체인 의 모든 속성 에 값 이 발생 할 수 있 음 을 주의 하 십시오:

console.log(typeof flight.toString);//function
console.log(typeof flight.constructor);//function

이러한 속성 을 제거 할 수 있 는 두 가지 방법 이 있 습 니 다. ①. 값 을 함수 로 하 는 속성 을 검사 하고 버 립 니 다.②. hasOwnProperty 방법 을 사용 하면 대상 이 독특한 속성 을 가지 고 있 으 면 true 로 돌아 갑 니 다.

console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false

매 거for in 문 구 는 한 대상 의 모든 속성 명 을 옮 겨 다 니 기 때문에 원 하지 않 는 속성 을 걸 러 내야 합 니 다.

var name;
for (name in another_stooge) {
  if (typeof another_stooge[name] !== 'function') {//     
    document.writeln(name + ': ' + another_stooge[name] + "; ");
  }
}

속성 명 이 나타 나 는 순 서 는 확실 하지 않 습 니 다.속성 이 특정한 순서 로 나타 나 려 면 특정한 속성 명 을 포함 하 는 배열 을 만들어 야 합 니 다.

var i;
var properties = [
  "first-name",
  "middle-name",
  "last-name",
  'profession'
];//             
for (i = 0; i < properties.length; i += 1) {
  document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; ");
}

삭제delete 연산 자 는 대상 의 속성 을 삭제 하지만 원형 체인 의 어떠한 대상 도 언급 하지 않 습 니 다.
대상 의 속성 을 삭제 하면 원형 체인 에서 온 속성 을 나 타 낼 수 있 습 니 다:

another_stooge.nickname = "Jack";
console.log(another_stooge.nickname);//Jack
delete another_stooge.nickname;
console.log(another_stooge.nickname);//Lucy

9 전역 변수의 오염 감소
전역 변 수 는 프로그램의 유연성 을 약화 시 켰 기 때문에 사용 을 피해 야 한다.
유일한 전역 변수 만 만 들 기:

var MYAPP = {};

이 변 수 는 우리 가 사용 하 는 용기 가 됩 니 다.

MYAPP.stooge = {
  "first-name": "deniro",
  "last-name": "Li"
};
MYAPP.flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    IATA: "SYD",
    time: "2017-08-02 19:00",
    city: "Sydney"
  },
  arrival: {
    IATA: "LAX",
    time: "2017-08-03 21:37",
    city: "Los Angeles"
  }
};

전체적인 자원 을 하나의 네 임 스페이스 에 포함 시 켜 야 한다. 그러면 우리 의 프로그램 이 다른 라 이브 러 리 와 충돌 할 가능성 이 현저히 낮 아 지고 프로그램 도 쉽게 읽 을 수 있다.
관심 있 는 친 구 는 본 사이트 의 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 결 과 를 테스트 합 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.