이 페이지에 스크립팅 오류가 있습니다. 오류가 사이트 편집자에 의해 처리되는 동안, 아래에 있는 부분 콘텐츠만 볼 수 있습니다.

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

{{JSRef}}

이 페이지는 {{jsxref ( "Object.defineProperty ()"}}}에 대한 추가 예제를 제공합니다.

property

만약  메서드 {{jsxref ( "Object.defineProperty는 ()")}}을  통한 많은 속성을 한번에 정의해야 하는 경우 당신은 수시로 같은 속성의 객체를 {{jsxref("Operators/Bitwise_Operators", "binary flags", "Signed_32-bit_integers", 1)}} 을 통해서 각각 재정의 할 수 있습니다. 

var oDesc = {}; 
함수 setProp (oObj, nMask, sKey, vVal_fGet, fSet) { 
  if (nMask & 8) { 
    // 접근 자 설명자 
    if (vVal_fGet) { 
      oDesc.get = vVal_fGet; 
    } else { 
      delete oDesc.get; 
    } 
    if (fSet) { 
      oDesc.set = fSet; 
    } else { 
      delete oDesc.set; 
    } 
    삭제 oDesc.value; 
    oDesc.writable 삭제; 
  } else { 
    // 데이터 설명자 
    if (arguments.length> 3) { 
      oDesc.value = vVal_fGet; 
    } else { 
      delete oDesc.value; 
    } 
    oDesc.writable = 부울 (nMask & 4);
    삭제 oDesc.get; 
    oDesc.set을 삭제하십시오; 
  } 
  oDesc.enumerable = 부울 (nMask & 1); 
  oDesc.configurable = 부울 (nMask & 2); 
  Object.defineProperty (oObj, sKey, oDesc); 
  return oObj; 
} 

/ * 
* :: function setProp :: 
* 
* nMask는 비트 마스크입니다. 
* 플래그 0x1 : 속성이 열거 가능합니다. 
* 플래그 0x2 : 속성이 구성 가능합니다. 
* 플래그 0x4 : 속성이 쓰기 가능합니다. 
* 플래그 0x8 : 속성은 접근 자 설명 자입니다. 
* oObj는 특성을 정의 할 오브젝트입니다. 
* sKey는 정의되거나 수정 될 속성의 이름입니다. 
* vVal_fGet은 데이터 설명자 또는 게터 함수에 할당 할 값입니다.
* 접근 자 설명자에 할당 (비트 마스크에 따라 다름). 
* fSet은 액세서 설명자에 지정할 setter 함수입니다. 
* 
* 비트 마스크 가능한 값 : 
* 
* 0 : 읽기 전용 데이터 설명자 - 구성 할 수없고 열거 할 수 없습니다 (0000). 
* 1 : 읽기 전용 데이터 설명자 - 구성 할 수없고, 열거 할 수 없습니다 (0001). 
* 2 : 읽기 전용 데이터 설명자 - 구성 가능, 열거 가능하지 않음 (0010). 
* 3 : 읽기 전용 데이터 설명자 - 구성 가능, 열거 가능 (0011). 
* 4 : 쓰기 가능한 데이터 설명자 - 구성 할 수없고 열거 할 수 없음 (0100). 
* 5 : 쓰기 가능한 데이터 설명자 - 구성 할 수없고, 열거 할 수 없습니다 (0101). 
* 6 : 쓰기 가능한 데이터 설명자 - 구성 가능, 열거 가능하지 않음 (0110).
* 7 : 쓰기 가능한 데이터 설명자 - 구성 가능하고, 열거 가능합니다 (0111). 
* 8 : 접근 자 설명자 - 구성 할 수없고 열거하지 않습니다 (1000). 
* 9 : 접근 자 설명자 - 구성 가능하지 않고 열거 가능합니다 (1001). 
* 10 : 접근 자 설명자 - 구성 가능하지만 열거 가능하지 않음 (1010). 
* 11 : 접근 자 설명자 - 구성 가능하고, 열거 가능합니다 (1011). 
* 
* 참고 : 플래그 0x8이 "접근 자 설명자"로 설정된 경우 플래그 0x4 (쓰기 가능) 
*는 무시됩니다. 그렇지 않으면 fSet 인수가 무시됩니다. 
* / 

// 새 빈 객체 만들기 
var myObj = {}; 

// 쓰기 가능한 데이터 디스크립터를 추가 - 설정 불가능, 열거 가능하지 않음 
setProp (myObj, 4, 'myNumber', 25);

// 읽기 전용 데이터 디스크립터를 추가 - 설정 불가능, 열거 가능 
setProp (myObj, 1, 'myString', 'Hello world!'); 

// 접근 자 설명자 추가 - 구성 가능, 열거 
불가능 setProp (myObj, 9, 'myArray', function () { 
  for (var iBit = 0, iFlag = 1, aBoolArr = [false]) 
    iFlag <this.myNumber + 1 | | (this.myNumber 및 iFlag) 
    << 1 iFlag = iFlag 
  ) { 
    aBoolArr [아이 비트 ++ = 부울 (this.myNumber 및 iFlag는); 
  } 
  ; aBoolArr 반환 
} 함수 (aNewMask)를 { 
  (VAR nNew = 0, 아이 비트에 대한 = 0; iBit <aNewMask.length; iBit ++) {nNew 
    | = Boolean (aNewMask [iBit]) << iBit; 
  } 
  this.myNumber = nNew; 
});

// 쓰기 가능한 데이터 설명 자 추가 (정의되지 않은 값) - 구성 가능하고, 열거 가능 
setProp (myObj, 7, 'myUndefined'); 

// 접근 자 설명자 추가 (getter 만) - 구성 가능하고 열거 가능한 
setProp (myObj, 11, 'myDate', function () {return new Date ();}); 

// 접근 자 설명자 추가 (setter 만) - 구성 할 수없고 열거 
할 수 없습니다. setProp (myObj, 8, 'myAlert', null, function (sTxt) {alert (sTxt);}); 

myObj.myAlert = myObj.myDate.toLocaleString () + '\ n \ n'+ myObj.myString + 
  '\ n'+ myObj.myNumber + '숫자는 다음 비트 마스크를 나타냅니다.'+ 
  myObj.myArray.join ( ',' ) + '.'; 

// 열거 가능한 속성을 나열합니다. 
var sList = '
for (myObj의 var sProp) { 
  sList + = '\ nmyObj.' + sProp + '=>'+ myObj [sProp] + ';' 
} 

경고 (sList);

새로운 비 네이티브 Object.setProperty()메서드 만들기

익명 생성자 및 {{jsxref ( "Global_Objects / Object", "Object")}}의 사용자 정의 메서드를 통해 얻은 설명자 객체를 사용하여 동일한 작업을 수행 할 수 있습니다 setProperty().

// creating a new Object method named Object.setProperty()

new (function() {
  var oDesc = this;
  oDesc.constructor = Object;
  Object.setProperty = function(oObj, nMask, sKey, vVal_fGet, fSet) {
    if (nMask & 8) {
      // accessor descriptor
      if (vVal_fGet) {
        oDesc.get = vVal_fGet;
      } else {
        delete oDesc.get;
      }
      if (fSet) {
        oDesc.set = fSet;
      } else {
        delete oDesc.set;
      }
      delete oDesc.value;
      delete oDesc.writable;
    } else {
      // data descriptor
      if (arguments.length > 3) {
        oDesc.value = vVal_fGet;
      } else {
        delete oDesc.value;
      }
      oDesc.writable = Boolean(nMask & 4);
      delete oDesc.get;
      delete oDesc.set;
    }
    oDesc.enumerable = Boolean(nMask & 1);
    oDesc.configurable = Boolean(nMask & 2);
    Object.defineProperty(oObj, sKey, oDesc);
    return oObj;
  };
})();

// creating a new empty object
var myObj = {};

// adding a writable data descriptor - not configurable, not enumerable
Object.setProperty(myObj, 4, 'myNumber', 25);

// adding a readonly data descriptor - not configurable, enumerable
Object.setProperty(myObj, 1, 'myString', 'Hello world!');

// etc. etc.
Note: The Object.setProperty() method could be also a proposal for a possible new JavaScript native method (see ECMAScript bug 335).

Syntax

Object.setProperty(obj, bitmask, prop[, value/getter[, setter]])

Parameters

obj
The object on which to define the property.
bitmask
The descriptor bitmask (see below).
prop
The name of the property to be defined or modified.
value/getter
Optional. The value to assign to a data descriptor or the getter function to assign to an accessor descriptor (depends on the bitmask).
setter
Optional. The setter function to assign to an accessor descriptor. If the flag 0x8 is setted to data descriptor this argument will be ignored.

Description

The non-native Object.setProperty() method works like the native Object.defineProperty() method, except for the descriptor object which is replaced with a descriptor bitmask. The bitmask argument has the following structure:

flag 0x1
The property is enumerable.
flag 0x2
The property is configurable.
flag 0x4
The property is writable.
flag 0x8
The property is an accessor descriptor.

So, the descriptor bitmask can have these possible numeric values:

  • 0: The bitmask represents a readonly data descriptor — not configurable, not enumerable (0000).
  • 1: The bitmask represents a readonly data descriptor — not configurable, enumerable (0001).
  • 2: The bitmask represents a readonly data descriptor — configurable, not enumerable (0010).
  • 3: The bitmask represents a readonly data descriptor — configurable, enumerable (0011).
  • 4: The bitmask represents a writable data descriptor — not configurable, not enumerable (0100).
  • 5: The bitmask represents a writable data descriptor — not configurable, enumerable (0101).
  • 6: The bitmask represents a writable data descriptor — configurable, not enumerable (0110).
  • 7: The bitmask represents a writable data descriptor — configurable, enumerable (0111).
  • 8: The bitmask represents an accessor descriptor — not configurable, not enumerable (1000).
  • 9: The bitmask represents an accessor descriptor — not configurable, enumerable (1001).
  • 10: The bitmask represents an accessor descriptor — configurable, not enumerable (1010).
  • 11: The bitmask represents an accessor descriptor — configurable, enumerable (1011).
Note: If the flag 0x8 is set to accessor descriptor the flag 0x4 (writable) will be ignored. If not, the setter argument will be ignored.

HTMLSelectElement.selectedIndex implementation

You can use the Object.defineProperty() method with native objects also. The following example shows how to implement the {{domxref("HTMLSelectElement")}}'s {{domxref("HTMLSelectElement.selectedIndex", "selectedIndex")}} property in radio button groups.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Radio group selectedIndex example</title>
<script type="text/javascript">
Object.defineProperty(NodeList.prototype, 'selectedIndex', {
  get: function() {
    var nIndex = this.length - 1;
    while (nIndex > -1 && !this[nIndex].checked) {
      nIndex--;
    }
    return nIndex;
  },

  set: function(nNewIndex) {
    if (isNaN(nNewIndex)) {
      return;
    }
    var nOldIndex = this.selectedIndex;
    if (nOldIndex > -1) {
      this[nOldIndex].checked = false;
    }
    if (nNewIndex > -1) {
      this[nNewIndex].checked = true;
    }
  },

  enumerable: true,
  configurable: false
});

// try it!
function checkForm() {
  var nSelectedIndex = document.myForm.myRadioGroup.selectedIndex;
  if (nSelectedIndex < 0) {
    alert('Select a gadget!!');
    return false;
  }
  alert('Congratulations!! You selected the ' + document.myForm.myRadioGroup[nSelectedIndex].value + '.');
  return true;
}
</script>
</head>

<body>
  <form name="myForm" onsubmit="return(checkForm());">
    <fieldset><legend>Select a gadget</legend>
      <p><input type="radio" name="myRadioGroup" id="ourShirt" value="shirt" /> <label for="ourShirt">shirt</label><br />
      <input type="radio" name="myRadioGroup" id="ourPants" value="pants" /> <label for="ourPants">pants</label><br />
      <input type="radio" name="myRadioGroup" id="ourBelt" value="belt" /> <label for="ourBelt">belt</label><br />
      <input type="radio" name="myRadioGroup" id="ourShoes" value="shoes" /> <label for="ourShoes">shoes</label></p>
      <p><span style="cursor:pointer;text-decoration:underline;color:#0000ff;" onclick="document.myForm.myRadioGroup.selectedIndex=2;">Select our favorite gadget ;-)</span></p>
      <p><input type="submit" value="Order!" />
    </fieldset>
  </form>
</body>
</ html>

문서 태그 및 공헌자

이 페이지의 공헌자: sorieil
최종 변경자: sorieil,