객체 지향 이해 - 속성 유형(1)

1. 구조 함수를 정의하는 두 가지 방법 ###

  // # 1.  Object  #
        var person = new Object();
        person.name = "Nicholas";
        person.age = 29;
        person.job = "Software Engineer";
        person.sayName = function(){
            alert(this.name);
        };

      //  2.  
        var person = {
                                name: "Nicholas",
                                age: 29,
                                job: "Software Engineer",
                                sayName: function(){
                                                    alert(this.name);
                                            }
                                };

2. 속성 유형

ECMAScript에는 데이터 속성과 액세서리 속성이라는 두 가지 속성이 있습니다.

1. 데이터 속성 ####

[[Configurable]]: delete를 통해 속성을 삭제하여 다시 정의할 수 있는지, 속성의 특성을 수정할 수 있는지, 또는 속성을 액세서리 속성으로 수정할 수 있는지를 나타낸다.앞의 예에서 보듯이 대상에 직접 정의된 속성의 기본값은true입니다.

[[Enumerable]]:for-in 순환을 통해 속성을 되돌릴 수 있는지 여부를 나타낸다.앞의 예에서 보듯이 대상에 직접 정의된 속성의 기본값은true입니다.

[[Writable]]: 속성의 값을 수정할 수 있는지 여부를 나타냅니다.앞의 예에서 보듯이 대상에 직접 정의된 속성의 기본값은true입니다.

[[Value]]: 이 속성을 포함하는 데이터 값입니다.속성 값을 읽을 때 이 위치에서 읽기;속성 값을 쓸 때 새 값을 이 위치에 저장합니다.이 특성의 기본값은undefined입니다.

앞에서 설명한 대로 객체에 직접 정의된 속성의 경우 [[[Configurable]], [[Enumerable], [[Writable]] 특성은 true로 설정되고 [[Value]] 특성은 지정된 값으로 설정됩니다.예를 들면 다음과 같습니다.

      var person = {
          name: "Nicholas"
      };

주의:name이라는 속성을 만들었습니다. 지정한 값은 "Nicholas"입니다.즉, [[Value]] 특성이 "Nicholas"로 설정되고 이 값에 대한 수정 사항이 이 위치에 반영됩니다.

속성의 기본 특성을 수정하려면 ECMAScript 5 Object를 사용해야 합니다.defineProperty() 방법입니다.이 방법은 속성이 있는 대상, 속성의 이름, 설명자 대상 세 개의 매개 변수를 수신합니다.그 중에서 설명자 (descriptor) 대상의 속성은 configurable,enumerable, writable,value이어야 합니다.해당 특성 값을 수정할 수 있는 값을 설정합니다.예:

              var person = {};
              Object.defineProperty(person, "name", {
                        writable: false,    // **   **
                        value: "Nicholas"
              });
              alert(person.name); //"Nicholas"
              person.name = "Greg";
              alert(person.name); //"Nicholas"

**분석: *** 이 예는name이라는 속성을 만들었고 그 값'Nicholas'는 읽기만 합니다.이 속성의 값은 수정할 수 없습니다. 새 값을 지정하려고 시도하면 엄격하지 않은 모드에서 값을 부여하는 작업은 무시됩니다.엄격한 모드에서 값 부여 작업은 버퍼 오류를 초래할 수 있습니다.*
유사한 규칙은 구성할 수 없는 속성에도 적용됩니다.예를 들면 다음과 같습니다.

               var person = {};
               Object.defineProperty(person, "name", {
                               configurable: false,  // 
                               value: "Nicholas"
                         });
                   alert(person.name); //"Nicholas"
                   delete person.name;
                   alert(person.name); //"Nicholas"

주의: configurable를false로 설정하면 대상에서 속성을 삭제할 수 없습니다.이 속성에 delete를 호출하면, 비엄격한 모드에서는 아무 일도 일어나지 않고, 엄격한 모드에서는 오류가 발생할 수 있습니다.그리고 속성을 설정할 수 없는 것으로 정의하면 다시 설정할 수 없습니다.Object를 다시 호출합니다.defineProperty() 메서드가 writable을 제외한 특성을 수정하면 오류가 발생합니다.

var person = {};
Object.defineProperty(person, "name", {
        configurable: false,
        value: "Nicholas"
    });
      // 
Object.defineProperty(person, "name", {
        configurable: true,
        value: "Nicholas"
  });

주의:1.즉 Object를 여러 번 호출할 수 있습니다.defineProperty () 방법은 같은 속성을 수정하지만 configurable 특성을false로 설정하면 제한이 있습니다.2. Object를 호출합니다.defineProperty () 방법을 지정하지 않으면 configurable,enumerable, writable 특성의 기본값은false입니다.대부분의 경우 Object를 사용할 필요가 없을 수 있습니다.defineProperty() 메서드에서 사용할 수 있는 고급 기능입니다.그러나 이러한 개념을 이해하는 것은 JavaScript 객체를 이해하는 데 매우 유용하다.

2. 액세서리 속성

** 액세스 속성에 데이터 값이 포함되지 않습니다.그것들은 한 쌍의 Getter와setter 함수를 포함한다. (단, 이 두 함수는 모두 필수적이지 않다.)액세서리 속성을 읽을 때 Getter 함수를 호출합니다. 이 함수는 유효한 값을 되돌려줍니다.액세서리 속성을 쓸 때 setter 함수를 호출하여 새 값을 전송합니다. 이 함수는 데이터를 어떻게 처리하는지 결정합니다.액세서리 속성에는 다음과 같은 네 가지 특성이 있습니다.**
1 . [[Configurable]: delete를 통해 속성을 삭제하여 속성을 재정의할 수 있는지, 속성의 특성을 수정할 수 있는지, 또는 속성을 데이터 속성으로 수정할 수 있는지를 나타낸다.대상에 직접 정의된 속성에 대해 이 특성의 기본값은true입니다.2 . [[Enumerable]: for-in 루프를 통해 속성을 반환할 수 있는지 여부를 나타냅니다.대상에 직접 정의된 속성에 대해 이 특성의 기본값은true입니다.3 . [[Get]: 속성을 읽을 때 호출되는 함수입니다.기본값은 undefined입니다.4 . [[Set]]: 속성을 쓸 때 호출되는 함수입니다.기본값은 undefined입니다.

var book = {
     _year: 2004,
     edition: 1
 };
Object.defineProperty(book, "year", {
         get: function(){   // 。
         return this._year;
 },
set: function(newValue){    // 
       if (newValue > 2004) {
       this._year = newValue;
     this.edition += newValue - 2004;
     }
 }
});
book.year = 2005;   // 。
alert(book.edition); //2

설명: 위 코드는 책 대상을 만들고 두 개의 기본 속성을 정의합니다:year 및 edition.year 앞의 밑줄은 대상 방법으로만 접근할 수 있는 속성을 나타내는 데 자주 사용되는 기호입니다.액세서리 속성 year는 Getter 함수와setter 함수를 포함합니다.Getter 함수 반환year의 값,setter 함수는 계산을 통해 정확한 버전을 정합니다.따라서 Year 속성을 2005로 변경하면year는 2005가 되고, 편집은 2가 된다.이것은 액세서리 속성을 사용하는 일반적인 방식입니다. 즉, 하나의 속성의 값을 설정하면 다른 속성에 변화가 생길 수 있습니다.
주의: 반드시 Getter와setter를 동시에 지정할 필요는 없습니다.Getter만 지정하면 속성은 쓸 수 없으며, 쓰기 시도는 무시됩니다.엄격한 모드에서 Getter 함수만 지정한 속성을 쓰기를 시도하면 오류가 발생합니다.이와 같이 setter 함수의 속성만 지정해도 읽을 수 없습니다. 그렇지 않으면 엄격하지 않은 모드에서undefined로 되돌아오고, 엄격한 모드에서는 오류가 발생합니다.
특수한 상황:
/ECMAScript 5를 지원하는 이 방법의 브라우저는 IE9+(IE8은 부분적인 실현일 뿐), Firefox4+, Safari5+, Opera12+와 크롬이 있다.이 방법에 앞서 액세서리 속성을 만들려면 일반적으로 두 가지 비표준적인 방법을 사용합니다: defineGetter () 와 defineSetter ().이 두 방법은 처음에 Firefox에서 도입된 것으로 사파리 3, 크롬 1, Opera 9.5도 같은 실현을 내놓았다.이 두 가지 남겨진 방법을 사용하면 다음과 같이 앞의 예를 다시 쓸 수 있다.

var book = {
      _year: 2004,
      edition: 1
  };
// 
book.__defineGetter__("year", function(){
      return this._year;
    });
book.__defineSetter__("year", function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
  });
  book.year = 2005;
  alert(book.edition); //2

3. 여러 속성 정의 ##

객체에 대해 여러 속성을 정의할 가능성이 높기 때문에 ECMAScript 5는 Object를 하나 더 정의합니다.defineProperties() 방법입니다.이 방법을 이용하면 묘사부호를 통해 여러 개의 속성을 한 번에 정의할 수 있다.이 방법은 두 개의 대상 매개 변수를 수신한다. 첫 번째 대상은 그 속성을 추가하고 수정하는 대상이고, 두 번째 대상의 속성은 첫 번째 대상에서 추가하거나 수정할 속성과 일일이 대응한다.예를 들면 다음과 같습니다.

var book = {};
Object.defineProperties(book, {
        _year: {
            value: 2004
      },
        edition: {
          value: 1
      },
      year: {
            get: function(){
                    return this._year;
            },
            set: function(newValue){
                    if (newValue > 2004) {
                    this._year = newValue;
                    this.edition += newValue - 2004;
            }
      }
  }
});

설명: 위 코드는 책 대상에 두 개의 데이터 속성(year 및 edition)과 한 개의 액세서리 속성(year)을 정의합니다.최종 대상은 이전 절에서 정의한 대상과 같다.유일한 차이점은 이곳의 속성은 모두 같은 시간에 만들어진 것이다.
버전: * Object가 지원됩니다.define Properties () 방법의 브라우저는 IE9 +, Firefox 4 +, Safari 5 +, Opera 12 +, 크롬이 있습니다.

4. 속성 읽기 ##

ECMAScript 5를 사용하는 Object.getOwnPropertyDescriptor () 방법으로 주어진 속성에 대한 설명자를 얻을 수 있습니다.이 방법은 두 개의 매개 변수를 수신합니다. 속성이 있는 대상과 설명자를 읽을 속성 이름입니다.되돌아오는 값은 하나의 대상입니다. 만약 액세서리 속성이라면, 이 대상의 속성은configurable,enumerable,get과 set이 있습니다.데이터 속성이라면, 이 대상의 속성은configurable,enumerable, writable,value가 있습니다.예를 들면 다음과 같습니다.

var book = {};
Object.defineProperties(book, {
      _year: {
      value: 2004
  },
      edition: {
      value: 1
  },
    year: {
      get: function(){
      return this._year;
  },
    set: function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
   }
  }
});

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false

alert(typeof descriptor.get); //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value); //undefined
alert(descriptor.enumerable); //false
alert(typeof descriptor.get); //"function"

설명: 데이터 속성의 경우year,value는 최초의 값이고 configurable는false이며 get은undefined입니다.액세서리 속성 year에 대해value는undefined이고,enumerable는false이며,get은getter 함수를 가리키는 바늘입니다.**버전(사용 범위): JavaScript에서는 DOM과 BOM 객체를 포함한 모든 객체에 대해 Object를 사용할 수 있습니다.getOwnPropertyDescriptor() 메서드입니다.이 방법을 지원하는 브라우저는 IE9+, Firefox4+, Safari5+, Opera12+, 크롬이 있습니다.**