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,没有 writabledescriptor.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 objectObject.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-onlyreturn 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 falseo.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable为truefor (var i in o) {    console.log(i);  }打印 'a' 和 'd' (in undefined order)Object.keys(o); // ["a", "d"]o.propertyIsEnumerable('a'); // trueo.propertyIsEnumerable('b'); // falseo.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: aObject.defineProperty(o, "a", {configurable : true}); // // throws a TypeErrorObject.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 TypeErrorObject.defineProperty(o, "a", {value : 12});console.log(o.a); // logs 1delete o.a; // Nothing happensconsole.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});```☆ 一般的 `Setter` 和 `Getters`下面的例子展示了如何实现一个自存档对象。 当设置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。(?) 任何试图提供其他值(?)将导致一个错误抛出。重新配置一个属性首先需要删除该属性。如果属性没有删除,就如同重新配置前的尝试。

defineProperty AND defineProperties相关推荐

  1. Javascript面向对象:Object.defineProperty()与Object.defineProperties()

    对象属性的操作 let obj = {name: "ziu",age: 18 }console.log(obj.name) // 获取属性 obj.name = "ziu ...

  2. 详解Javascript中的Object对象

    本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...

  3. ECMA262 Edition5 Object,Object的属性和方法,Object.prototype的方法.

    ES5,为Object添加了一批方法.了解这些方法,可以更好的理解属性描述符的应用. 所以还是很有必要读一读的.另外,这些方法用起来还是蛮给力的. 暂时对于ES5,就只放出这些吧,希望对大家有所帮助. ...

  4. 前端知识点总结——JS高级(持续更新中)

    前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...

  5. firefox-Developer开发者站点——关于Object.create()新方法的介绍

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create Objec ...

  6. 【前端基础进阶】JS-Object 功能详解

    Object.assign(target,source1,source2,...) 该方法主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身 ...

  7. 3.Contructor(构造器)模式—精读《JavaScript 设计模式》Addy Osmani著

    同系列友情链接: 1.设计模式之初体验-精读<JavaScript 设计模式>Addy Osmani著 2.设计模式的分类-精读<JavaScript 设计模式>Addy Os ...

  8. JavaScript 逆向 ( 一 ) --- JavaScript 语法基础

    js 逆向:https://www.cnblogs.com/wuxianyu/category/1940304.html js逆向2:https://www.cnblogs.com/wuxianyu/ ...

  9. JavaScript:class类的实现方式及特点

    在JavaScript开发中,我们通常会使用构造函数的方式来是实现实例对象的生成,代码如下: function People(name, age) {this.name = name;this.age ...

最新文章

  1. 【BZOJ 1927】 [Sdoi2010]星际竞速
  2. 计算机二级python用什么书-计算机二级Python考试有什么学习资料?
  3. Android官方开发文档Training系列课程中文版:管理设备的睡眠状态
  4. 信息系统项目管理师优秀论文:项目范围管理
  5. Cannot resolve method ‘getTableEnvironment(org.apache.flink.api.java.ExecutionEnvironment)‘
  6. 250W电源带i7+GTX1080?
  7. Java高级语法笔记-HashMap
  8. php导出服务器表格乱码,phpExcel导出, 在本地正常,在服务器乱码解决办法
  9. exec 与shell_exec的区别
  10. springboot 多线程_机密文档!阿里产出SpringBoot/Cloud,细节爆炸
  11. 源码角度,分析@Transactional实现原理
  12. 【给你几个使用Xamarin的理由】
  13. 多分支维护难题:如何提交 ChangeLog 变更日志?
  14. 2012.4.19总结(一)
  15. C++写的B+树源码
  16. win10 安装 ssh后,命令行中仍无法运行ssh命令,‘ssh‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
  17. ai语音系统智能AI机器人AI源码营销机器人电销机器人智能电话机器人拨号机器人语音机器人空号识别科大识别阿里识别语音识别语音翻译FreeSWITCH呼叫中心中间ipbxIPBX
  18. 分析咪蒙1013篇文章,300多万字,她凭什么会火?
  19. 股票实战专题:6000102019一二月分析收盘价绘图
  20. 干货 | 京东云部署Wordpress最佳实践

热门文章

  1. 配置所需要的依赖_配置spring所需要的jar包
  2. flex简单常用笔记
  3. 游戏扫码登录器程序PHP源码版
  4. C#的多线程机制探索3
  5. CSS: HTML 和 Body 的区别
  6. Magento: 产品页面下jquery change函数失效 Call javascript function onchange product option
  7. linux命令之less 命令
  8. 为facebook添加html/iframe页面 Create A Facebook Landing Page (Static HTML / iFrame)
  9. 在Windows环境下用Editplus打造一个Python编辑调试环境
  10. linux设置date-hwclock-clock