defineProperty AND defineProperties

2018-07-13 admin

Object.defineProperty(obj, prop, descriptor) 该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...inObject.keys 方法), 这些值可以被改变,也可以被删除。这种方法允许这些额外的细节从默认值改变。默认情况下,使用Object.defineProperty()添加的属性值是不可变的。

`Object.defineProperties(obj, props)`、` Object.defineProperties`本质上定义了`obj` 对象上`props`的`可枚举属性`相对应的所有属性。
`Object.defineProperties(obj, props)`实现

function defineProperties(obj, properties) {
  function convertToDescriptor(desc) {
    function hasProperty(obj, prop) {
      return Object.prototype.hasOwnProperty.call(obj, prop);
    }

    function isCallable(v) {
      // NB: modify as necessary if other values than functions are callable.
      return typeof v === 'function';
    }

    if (typeof desc !== 'object' || desc === null)
      throw new TypeError('bad desc');

    var d = {};

    if (hasProperty(desc, 'enumerable'))
      d.enumerable = !!desc.enumerable;
    if (hasProperty(desc, 'configurable'))
      d.configurable = !!desc.configurable;
    if (hasProperty(desc, 'value'))
      d.value = desc.value;
    if (hasProperty(desc, 'writable'))
      d.writable = !!desc.writable;
    if (hasProperty(desc, 'get')) {
      var g = desc.get;

      if (!isCallable(g) && typeof g !== 'undefined')
        throw new TypeError('bad get');
      d.get = g;
    }
    if (hasProperty(desc, 'set')) {
      var s = desc.set;
      if (!isCallable(s) && typeof s !== 'undefined')
        throw new TypeError('bad set');
      d.set = s;
    }

    if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d))
      throw new TypeError('identity-confused descriptor');

    return d;
  }

  if (typeof obj !== 'object' || obj === null)
    throw new TypeError('bad obj');

  properties = Object(properties);

  var keys = Object.keys(properties);
  var descs = [];

  for (var i = 0; i < keys.length; i++)
    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);

  for (var i = 0; i < descs.length; i++)
    Object.defineProperty(obj, descs[i][0], descs[i][1]);

  return obj;
}

参数

`obj `在其上定义或修改属性的对象。
`prop` 要定义或修改的属性的名称。
`descriptor` 将被定义或修改的属性描述符。
`返回值 ` `被传递给函数的对象`。
`props` 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:`数据描述符`和`访问器描述符`。描述符具有以下键:
数据描述符和存取描述符均具有以下可选键值:
对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。`存取描述符`是由`getter-setter`函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。
  `configurable` true 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。`默认为 false`
  `enumerable` true 当且仅当在枚举相应对象上的属性时该属性显现。` 默认为 false`  for ... in obj  obj.keys() 实现内部原理
数据描述符同时具有以下可选键值:
  `value` 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。 ` 默认为 undefined`.
  `writable` true当且仅当与该属性相关联的值可以用assignment operator改变时。 `默认为 false`  当需要些一些不可以被更改的属性时可以使用
存取描述符同时具有以下可选键值:
  `get `作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。默认为 undefined
  `set `作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。默认为 undefined

如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字,将会产生一个异常。

记住,这些选项不一定是自身属性,如果是继承来的也要考虑。为了确认保留这些默认值,你可能要在这之前冻结 Object.prototype,明确指定所有的选项,或者将__proto__属性指向null。

   使用 __proto__
   var obj = {};
   var descriptor = Object.create(null); // 没有继承的属性
   // 默认没有 enumerable,没有 configurable,没有 writable
   descriptor.value = 'static';
   Object.defineProperty(obj, 'key', descriptor);

   // 显式
   Object.defineProperty(obj, "key", {
     enumerable: false,
     configurable: false,
     writable: false,
     value: "static"
   });

   // 循环使用同一对象
   function withValue(value) {
     var d = withValue.d || (
       withValue.d = {
         enumerable: false,
         writable: false,
         configurable: false,
         value: null
       }
     );
     d.value = value;
     return d;
   }
   // ... 并且 ...
   Object.defineProperty(obj, "key", withValue("static")); 
   // 如果 freeze 可用, 防止代码添加或删除对象原型的属性
   // (value, get, set, enumerable, writable, configurable)
   (Object.freeze||Object)(Object.prototype);
###作用:
☆创建属性
当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value,get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”,并被“键入”为一个数据描述符。

var o = {}; // 创建一个新对象

在对象中添加一个属性与数据描述符的示例 Object.defineProperty(o, “a”, { value : 37, writable : true, enumerable : true, configurable : true });

// 对象o拥有了属性a,值为37

// 在对象中添加一个属性与存取描述符的示例 var bValue; Object.defineProperty(o, “b”, { get : function(){ return bValue; }, set : function(newValue){ bValue = newValue; }, enumerable : true, configurable : true }); o.b = 38; // 对象o拥有了属性b,值为38 // 改变bValue也无法改变o.b console.log(bValue);

// o.b的值现在总是与bValue相同,除非重新定义o.b

// 数据描述符和存取描述符不能混合使用 Object.defineProperty(o, “conflict”, { value: 0x9f91102, get: function() { return 0xdeadbeef; } }); throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors

☆修改属性
如果属性已经存在,`Object.defineProperty()`将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其`configurable` 属性设置为`false`,则该属性被认为是`“不可配置的”`,并且没有属性可以被改变(除了单向改变 `writable` 为 `false`)。当属性不可配置时,不能在数据和访问器属性类型之间切换。
当试图改变不可配置属性(除了writable 属性之外)的值时会抛出{jsxref("TypeError")}},除非当前值和新值相同。
1 `Writable` 属性 当writable属性设置为false时,该属性被称为“不可写”。它不能被重新分配。 试图写入非可写属性不会改变它,也不会引发错误。

var o = {}; // Creates a new object

Object.defineProperty(o, ‘a’, { value: 37, writable: false });

console.log(o.a); // logs 37 o.a = 25; // No error thrown // (it would throw in strict mode, // even if the value had been the same) console.log(o.a); // logs 37. The assignment didn’t work.

// strict mode (function() { ‘use strict’; var o = {}; Object.defineProperty(o, ‘b’, { value: 2, writable: false }); o.b = 3; // throws TypeError: “b” is read-only return o.b; // returns 2 without the line above }());


2 Enumerable特性 enumerable定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举默认是true。


var o = {}; Object.defineProperty(o, “a”, { value : 1, enumerable:true }); Object.defineProperty(o, “b”, { value : 2, enumerable:false }); Object.defineProperty(o, “c”, { value : 3 }); // enumerable defaults to false o.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable为true

for (var i in o) {
console.log(i);
} 打印 ‘a’ 和 ‘d’ (in undefined order)

Object.keys(o); // [“a”, “d”]

o.propertyIsEnumerable(‘a’); // true o.propertyIsEnumerable(‘b’); // false o.propertyIsEnumerable(‘c’); // false

3 Configurable 特性 configurable特性表示对象的属性是否可以被删除,以及除writable特性外的其他特性是否可以被修改。
如果o.a的configurable属性为true,则不会抛出任何错误,并且该属性将在最后被删除。
  var o = {};
  Object.defineProperty(o, "a", { get : function(){return 1;},  configurable : false } ); //为true时,不会报错 结果为12  undefined(可以删除)

  // throws a TypeError Cannot redefine property: a
  Object.defineProperty(o, "a", {configurable : true}); 
  // // throws a TypeError
  Object.defineProperty(o, "a", {enumerable : true}); 
  // // throws a TypeError (set was undefined previously) 
  Object.defineProperty(o, "a", {set : function(){}}); 
  // // throws a TypeError (even though the new get does exactly the same thing) 
  Object.defineProperty(o, "a", {get : function(){return 1;}});
  // // throws a TypeError
  Object.defineProperty(o, "a", {value : 12});

  console.log(o.a); // logs 1
  delete o.a; // Nothing happens
  console.log(o.a); // logs 1

☆ 添加多个属性和默认值 考虑特性被赋予的默认特性值非常重要,通常,使用点运算符和Object.defineProperty()为对象的属性赋值时,数据描述符中的属性默认值是不同的,如下例所示。

var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});

// 另一方面,
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

☆ 一般的 SetterGetters 下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时,archive 数组会获取日志条目。

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

// 或

var pattern = {
    get: function () {
        return 'I alway return this string,whatever you have assigned';
    },
    set: function () {
        this.myname = 'this is my name string';
    }
};

function TestDefineSetAndGet() {
    Object.defineProperty(this, 'myproperty', pattern);
}

var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';

// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname);

☆ ☆兼容性问题 1 数组的 length 属性重定义是可能的,但是会受到一般的重定义限制。(length 属性初始为 non-configurable,non-enumerable 以及 writable。对于一个内容不变的数组,改变其 length 属性的值或者使它变为 non-writable 是可能的。但是改变其可枚举性和可配置性或者当它是 non-writable 时尝试改变它的值或是可写性,这两者都是不允许的。)然而,并不是所有的浏览器都允许 Array.length 的重定义。

在 Firefox 4 至 22 版本中尝试去重定义数组的 length 属性都会抛出一个 TypeError 异常。

有些版本的Chrome中,Object.defineProperty() 在某些情况下会忽略不同于数组当前length属性的length值。有些情况下改变可写性并不起作用(也不抛出异常)。同时,比如Array.prototype.push的一些数组操作方法也不会考虑不可读的length属性。

有些版本的Safari中,Object.defineProperty() 在某些情况下会忽略不同于数组当前length属性的length值。尝试改变可写性的操作会正常执行而不抛出错误,但事实上并未改变属性的可写性。

只在Internet Explorer 9及以后版本和Firefox 23及以后版本中,才完整地正确地支持数组length属性的重新定义。目前不要依赖于重定义数组length 属性能够起作用,或在特定情形下起作用。与此同时,即使你能够依赖于它,你也没有合适的理由这样做。 2 Internet Explorer 8 具体案例 Internet Explorer 8 实现了 Object.defineProperty() 方法,但 只能在 DOM 对象上使用。 需要注意的一些事情:

尝试在原生对象上使用 Object.defineProperty()会报错。 属性特性必须设置一些特定的值。对于数据属性描述符,configurable, enumerable 和 writable 特性必须全部设置为 true;对于访问器属性描述符,configurable 必须设置为 true,enumerable 必须设置为 false。(?) 任何试图提供其他值(?)将导致一个错误抛出。 重新配置一个属性首先需要删除该属性。如果属性没有删除,就如同重新配置前的尝试。


原文链接:https://segmentfault.com/a/1190000015629643

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35938.html

文章标题:defineProperty AND defineProperties

相关文章
html+css+js+Hbuilder开发一款安卓APP,根本不用学Android开发!
我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端。那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户端,用php构建服务端。 首先我们要准备...
2018-05-31
解读Object.defineProperty()
Object.defineProperty()解读 第一个栗子:实现js双向数据绑定(借用网上的例子) 首先,将结构先搭建好 &lt;input type=&quot;text&quot; id=&quot;txt1&quo...
2018-04-28
【quickhybrid】Android端的项目实现
前言 前文中就有提到,Hybrid模式的核心就是在原生,而本文就以此项目的Android部分为例介绍Android部分的实现。 提示,由于各种各样的原因,本项目中的Android容器确保核心交互以及部分重要API实现,关于底层容器优化等机制...
2017-12-29
是前端还是Android?快应用 快速入门与初步分析
前阵子微信小程序的推出快速占据了Android桌面,手机厂商们坐不住了,为了抢回移动端应用分发入口,前几天中国通信院等协会联合小米、华为、OPPO等一众手机厂商共同发布了“快应用”。 废话不说,先甩两个网址: 文档是最权威的,建议大家在...
2018-03-23
react-native-whc-banner 支持ios 、android可高度自定义
A react native module to banner auto play loop component, it works on iOS and Android. Content Installation Dem...
2018-02-08
个人理解:Object.defineProperty
一、概念语法 Object.defineProperty(obj,prop,descriptor) 参数: 1.obj:要在其上定义属性的对象 2.key:要定义或者修改的属性 3.descriptor:将被定义或者修改的属性描述符 返回值...
2018-02-11
【node】相当nice且详细的commander.js用例
前言 在当下,作为一名前端码农,不知道Nodejs是不可原谅的。可以说,除了一些特别要求的业务范畴,常见的后端业务Nodejs都能handle住。 Nodejs的另一个常用场景是,造出一些实用工具,而这些工具大部分都是一些命令行程序。今天我...
2018-04-05
记第一次发布npm包经历,smart-import,node-command-line-tool
故事背景 前情提要:自动 Import 工具,前端打字员的自我救赎 github: smart-import smart-import 的功能 根据配置文件,在目标文件中自动导入规定目录下自定义模块,并监听规定目录下文件的变动,自动更新 尚...
2018-01-14
Weex: Review and Comparison with React Native
In the last year, React Native - a truly brilliant creation of the Facebook team - has become one of the most discussed ...
2018-02-23
Five minutes to understand async and defer
Script tag When we want to insert a script into a web page, the standard way is to use the script tag(i.e. &lt;script&gt...
2018-03-11
回到顶部