Object.defineProperty()函数可向对象添加新的属性或者修改对象的现有属性

语法:Object.defineProperty(object,propertyName,descriptor)

参数:1.object 必需。要在上面添加和修改属性的对象。这可以是一个js对象(即用户定义的对象或者内置对象)或DOM对象。

   2.propertyName 必需。属性名称,是一个字符串。

   3.descriptor 必需。描述属性,可以针对数据属性或者访问器属性。

备注:如果想对象添加多个属性或者修改多个现有属性,可使用Object.defineProperties()函数。

返回值:修改后的对象。

添加数据属性:

  eg: var  newHerizon = "<hr/>";

    var newObj={};

    Object.defineProperty(newObj,"newDataProperty",{

      value:1,

      writable: true,

      enumerable:true,

      configurable:true

    })

    newObj.newDataProperty = 2;

    document.write("Property value:" + newObj.newDataProperty + newHerizon);

    // output:

    // Property value:2

    PS:若要获取对象的属性,则

    var names = Object.getOwnPropertyNames(newObj);

    for(var i = 0; i < names.length; i++){

      var prop = names[i];

      document.write(prop + ':' + newObj[prop]);

      document.write(newHerizon);

    }

    // output:

    // newdataProperty:2

修改数据属性:

  如要修改对象的属性特性,需要将下面代码添加到所示的addProperty函数。descriptor参数只包含writable特性。其他数据属性特性保持不变。

  Object.defineProperty(newObj,"newDataProperty,{ writable : false });

  var descriptor = Object.getOwnPropertyDescriptor(newObj,"newDataProperty");

  for(var prop in descriptor){

    document.write(prop + ":" + descriptor[prop]);

    document.write(newHerizon);

  }

  // output

  // writable :false

  // value:2

  //configurable:true

  //enumerable:true

添加访问器属性:

  eg: var newHerizon = "<hr />";

    var newObj = {};

    Object.defineProperty(newObj,"newAccessProperty",{

      set: function(x){

        document.write("in property set accessor" + newHerizon);

        this.newaccpropvalue = x;

      },

      get: function(){

        document.write("in property get accessor" + newHerizon);

        return this.newaccpropvalue;

      },      

      enumerable:true,

 

      configurable:true

 

    });

    newObj.newAccessorProperty = 10;

    document.write("Property value " + newObj.newAccessorProperty + newHerizon);

    // output:

    // in property set accessor

    // in property get accessor

    // Property value:10

    如要获取对象属性,需要添加如下代码。

   

    var names = Object.getOwnPropertyNames(newObj);

 

    for(var i = 0; i < names.length; i++){

 

      var prop = names[i];

 

      document.write(prop + ':' + newObj[prop]);

 

      document.write(newHerizon);

 

    }

 

    // output:

    // in property get accessor

 

    // newdataProperty:10

修改访问器属性:

    Object.defineProperty(newObj,"newAccessorProperty",{

       get: function(){ return this.newaccpropvalue;}

    });

    var descriptor = Object.getOwnPropertyDescriptor(newObj,"newAccessorProperty");

    for(var prop in descriptor){

         document.write(prop + ":" + descriptor[prop]);

      document.write(newHerizon);

    }

         // output:

    // get:function(){ return this.newaccpropvalue}

    // set: function(x){ document.write("in property set accessor" + newHerizon); this.newaccpropvalue = x;}

    //configurable:true

    //enumerable:true

修改DOM元素上的属性:

   通过使用 Object.getOwnPropertyDescriptor 函数来获取和修改属性的属性描述符,从而自定义内置 DOM 属性。  对于此示例中,必须通过使用 ID 为“div”的 DIV 元素。  

  var descriptor = Object.getOwnPropertyDescriptor(Element.prototype, "querySelector");
  descriptor.value = "query";
  descriptor.writable = false;
  // Apply the changes to the Element prototype.
  Object.defineProperty(Element.prototype, "querySelector", descriptor);   
  var elem = document.getElementById("div"); 
  // Attempt to change the value. This causes the revised value attribute to be called.
  elem.querySelector = "anotherQuery";   document.write(elem.querySelector);   
  // output:   
  // query

要求:

  Internet Explorer 9 标准模式、Internet Explorer 10 标准模式以及 Windows 8.x 应用商店 应用支持所有功能。

  Internet Explorer 8 标准模式 支持 DOM 对象,但不支持用户定义的对象。  可以指定 enumerable 和 configurable 特性,但不使用它们。  

 

 

posted @ 2018-04-03 14:27  秋风画扇  阅读(2060)  评论(0编辑  收藏  举报