ECMAScript对象扩展

2017-10-19 本文已影响46人墨马

属性的简洁表示法

ES6允许直接写入变量和函数，作为对象的属性和方法

ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量
ES6允许在对象之中,简写方法

var birth = '2000/01/01';
var Person = {
   name: '张三',
   //等同于birth: birth
   birth,
   // 等同于hello: function ()...
   hello() { console.log('我的名字是', this.name); }  
};
function getPoint() {
   var x = 1;
   var y = 10;
   return {x, y};
}
getPoint()
// {x:1, y:10}

如果某个方法的值是一个Generator函数，前面需要加上星号

var obj = {
   * m(){
      yield 'hello world';
   }
}

属性名表达式

ES5中只能使用（标识符）定义属性

var obj = {
   foo: true,
   abc: 123
};

ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内

let propKey = 'foo';
let obj = {
   [propKey]: true,
   ['a' + 'bc']: 123
};

var lastWord = 'last word';
var a = {
   'first word': 'hello',
   [lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

表达式还可以用于定义方法名

let obj = {
   ['h'+'ello']() {
      return 'hi';
   }
};
obj.hello() // hi

属性名表达式与简洁表示法，不能同时使用

// 报错
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };
// 正确
var foo = 'bar';
var baz = { [foo]: 'abc'};

方法name属性

函数的 name 属性，返回函数名。对象方法也是函数，因此也有 name 属性

var person = {
   sayName() {
      console.log(this.name);
   },
   get firstName() {
      return "Nicholas";
   }
};
person.sayName.name // "sayName"
person.firstName.name // "get firstName"

方法的 name 属性返回函数名（即方法名）。如果使用了取值函数，则会在方法名前加上 get 。如果是存值函数，方法名的前面会加上 set
bind 方法创造的函数， name 属性返回“bound”加上原函数的名字； Function 构造函数创造的函数， name 属性返回“anonymous”

(new Function()).name // "anonymous"
var doSomething = function() {
   // ...
};
doSomething.bind().name // "bound doSomething"

如果对象的方法是一个Symbol值，那么 name 属性返回的是这个Symbol值的描述

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
   [key1]() {},
   [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""
key1 对应的Symbol值有描述， key2 没有

Object.is()

ES5比较两个值是否相等，有两个运算符：相等运算符（ == ）和严格相等运算符（ === ）。它们都有缺点，前者会自动转换数据类型，后者的 NaN 不等于自身，以及 +0 等于 -0 。JavaScript缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等
ES6提出“Same-value equality”（同值相等）算法，用来解决这个问题。 Object.is 就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致,不同之处只有两个：一是 +0 不等于 -0 ，二是 NaN 等于自身

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

ES5可以通过下面的代码，部署 Object.is

Object.defineProperty(Object, 'is', {
   value: function(x, y) {
      if (x === y) {
         // 针对+0 不等于 -0的情况
         return x !== 0 || 1 / x === 1 / y;
      }
      // 针对NaN的情况
      return x !== x && y !== y;
   },
   configurable: true,
   enumerable: false,
   writable: true
});

Object.assign()

基本用法

Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）
Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象
如果只有一个参数， Object.assign 会直接返回该参数

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

如果该参数不是对象，则会先转成对象，然后返回

typeof Object.assign(2) // "object"

由于 undefined 和 null 无法转成对象，所以如果它们作为参数，就会报错

Object.assign(undefined) // 报错
Object.assign(null) // 报错

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果 undefined 和 null 不在首参数，就不会报错

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

var v1 = 'abc';
var v2 = true;
var v3 = 10;
var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

v1 、 v2 、 v3 分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性 [[PrimitiveValue]] 上面，这个属性是不会被 Object.assign 拷贝的。只有字符串的包装对象，会产生可枚举的实义属
性，那些属性则会被拷贝

Object(true) // {[[PrimitiveValue]]: true}
Object(10) // {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

Object.assign 只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（ enumerable: false ）

Object.assign({b: 'c'},
   Object.defineProperty({}, 'invisible', {
      enumerable: false,
      value: 'hello'
   })
)
// { b: 'c' }

属性名为Symbol值的属性，也会被 Object.assign 拷贝

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

注意点

Object.assign 方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

上面代码中，源对象 obj1 的 a 属性的值是一个对象， Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面
对于这种嵌套的对象，一旦遇到同名属性， Object.assign 的处理方法是替换，而不是添加

var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }
target 对象的 a 属性被 source 对象的 a 属性整个替换掉了，而不会得到 { a: { b: 'hello', d: 'e' }} 的结果

Object.assign 可以用来处理数组，但是会把数组视为对象

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

Object.assign 把数组视为属性名为0、1、2的对象，因此目标数组的0号属性 4 覆盖了原数组的0号属性 1 。

常见用途

1.为对象添加属性

通过 Object.assign 方法，将 x 属性和 y 属性添加到 Point 类的对象实例

class Point {
   constructor(x, y) {
      Object.assign(this, {x, y});
   }
}

2.为对象添加方法

使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用assign方法添加到SomeClass.prototype之中。

Object.assign(SomeClass.prototype, {
   someMethod(arg1, arg2) {
      ···
   },
   anotherMethod() {
      ···
   }
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
   ···
};
SomeClass.prototype.anotherMethod = function () {
   ···
};

3.克隆对象

将原始对象拷贝到一个空对象得到了原始对象的克隆
function clone(origin) {
   return Object.assign({}, origin);
}
这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，采用下面的代码
function clone(origin) {
   let originProto = Object.getPrototypeOf(origin);
   return Object.assign(Object.create(originProto), origin);
}

4.合并多个对象

const merge = (target, ...sources) => Object.assign(target, ...sources);
//合并后返回一个新对象
const merge = (...sources) => Object.assign({}, ...sources);

5.为属性指定默认值

const DEFAULTS = {
   logLevel: 0,
   outputFormat: 'html'
};
function processContent(options) {
   let options = Object.assign({}, DEFAULTS, options);
}

DEFAULTS 对象是默认值， options 对象是用户提供的参数。 Object.assign 方法将 DEFAULTS 和 options 合并成一个新对象，如果两者有同名属性，则 option 的属性值会覆盖 DEFAULTS 的属性值。注意，由于存在深拷贝的问题， DEFAULTS 对象和 options 对象的所有属性的值，都只能是简单类型，而不能指向另一个对象。否则，将导致DEFAULTS 对象的该属性不起作用

属性的可枚举性

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。 Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true }

enumerable 属性，称为”可枚举性“，如果该属性为 false ，就表示某些操作会忽略当前属性
ES5有三个操作会忽略 enumerable 为 false 的属性。

for...in 循环：只遍历对象自身的和继承的可枚举的属性
Object.keys()：返回对象自身的所有可枚举的属性的键名
JSON.stringify()：只串行化对象自身的可枚举的属性

ES6新增了两个操作，会忽略 enumerable 为 false 的属性。

Object.assign()：只拷贝对象自身的可枚举的属性
Reflect.enumerate()：返回所有 for...in 循环会遍历的属性
这五个操作之中，只有 for...in 和 Reflect.enumerate() 会返回继承的属性。实际上，引入 enumerable 的最初目的，就是让某些属性可以规避掉 for...in 操作。比如，对象原型的 toString 方法，以及数组的 length 属性，就通过这种手段，不会被 for...in 遍历到

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false
Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

ES6规定，所有Class的原型的方法都是不可枚举的

Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用 for...in 循环，而用 Object.keys() 代替

属性的遍历

ES6一共有6种方法可以遍历对象的属性。

for...in
for...in 循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。
Object.keys(obj)
Object.keys 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。
Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols 返回一个数组，包含对象自身的所有Symbol属性。
Reflect.ownKeys(obj)
Reflect.ownKeys 返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。
Reflect.enumerate(obj)
Reflect.enumerate 返回一个Iterator对象，遍历对象自身的和继承的所有可枚举属性（不含Symbol属性），与 for...in 循
环相同

以上的6种方法遍历对象的属性，都遵守同样的属性遍历的次序规则
(1)首先遍历所有属性名为数值的属性，按照数字排序
(2)其次遍历所有属性名为字符串的属性，按照生成时间排序
(3)最后遍历所有属性名为Symbol值的属性，按照生成时间排序

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

proto 属性，Object.setPrototypeOf()，Object.getPrototypeOf()

proto 属性

__ proto __ 属性（前后各两个下划线），用来读取或设置当前对象的 prototype 对象。

// es6的写法
var obj = {
   method: function() { ... }
};
obj.__proto__ = someOtherObj;
// es5的写法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };

__ proto __ 前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的API，只是由于浏览器广泛支持，才被加入了ES6。标准明确规定，只有浏览器必须部署这个属性，其他运行环境不一定需要部署，而且新的代码最好认为这个属性是不存在的。因此，无论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用下面的Object.setPrototypeOf() （写操作）、 Object.getPrototypeOf() （读操作）、 Object.create() （生成操作）代替。
在实现上， __ proto __ 调用的是 Object.prototype.__ proto __ ，具体实现如下

Object.defineProperty(Object.prototype, '__proto__', {
   get() {
      let _thisObj = Object(this);
      return Object.getPrototypeOf(_thisObj);
   },
   set(proto) {
      if (this === undefined || this === null) {
         throw new TypeError();
      }
      if (!isObject(this)) {
         return undefined;
      }
      if (!isObject(proto)) {
         return undefined;
      }
      let status = Reflect.setPrototypeOf(this, proto);
         if (!status) {
            throw new TypeError();
         }
      },
   });
function isObject(value) {
   return Object(value) === value;
}

如果一个对象本身部署了 __ proto __ 属性，则该属性的值就是对象的原型

Object.getPrototypeOf({ __proto__: null })
// null

Object.setPrototypeOf()

Object.setPrototypeOf 方法的作用与 __ proto __ 相同，用来设置一个对象的 prototype 对象。它是ES6正式推荐的设置原型对象的方法

// 格式
Object.setPrototypeOf(object, prototype)
// 用法
var o = Object.setPrototypeOf({}, null);
//等同于
function (obj, proto) {
obj.__proto__ = proto;
return obj;
}

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40

上面代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性

Object.getPrototypeOf()

该方法与setPrototypeOf方法配套，用于读取一个对象的prototype对象

Object.getPrototypeOf(obj);

function Rectangle() {
}
var rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype
// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

Object.values()，Object.entries()

Object.keys

ES5引入了 Object.keys 方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名

var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

ES7有一个提案，引入了跟 Object.keys 配套的 Object.values 和 Object.entries

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
   console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
   console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
   console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()

Object.values 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]

返回顺序
(1)首先遍历所有属性名为数值的属性，按照数字排序
(2)其次遍历所有属性名为字符串的属性，按照生成时间排序
(3)最后遍历所有属性名为Symbol值的属性，按照生成时间排序

var obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []

Object.create 方法的第二个参数添加的对象属性（属性 p ），如果不显式声明，默认是不可遍历的。 Object.values 不会返回这个属性

Object.values 会过滤属性名为Symbol值的属性

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

如果 Object.values 方法的参数是一个字符串，会返回各个字符组成的一个数组

Object.values('foo')
// ['f', 'o', 'o']

字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此， Object.values 返回每个属性的键值，就是各个字符组成的一个数组

如果参数不是对象， Object.values 会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。
所以， Object.values 会返回空数组

Object.values(42) // []
Object.values(true) // []

Object.entries

Object.entries 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

如果原对象的属性名是一个Symbol值，该属性会被省略

Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]

Object.entries 的基本用途是遍历对象的属性

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
   console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// "one": 1
// "two": 2

Object.entries 方法的一个用处是，将对象转为真正的 Map 结构

var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

自己实现 Object.entries 方法

// Generator函数的版本
function* entries(obj) {
   for (let key of Object.keys(obj)) {
      yield [key, obj[key]];
   }
}
// 非Generator函数的版本
function entries(obj) {
   return ( 
             for (key of Object.keys(obj)) 
               [key, obj[key]]
           );
}

对象的扩展运算符

ES7有一个提案，将Rest解构赋值/扩展运算符（...）引入对象。Babel转码器已经支持这项功能

Rest解构赋值

对象的Rest解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
//变量 z 是Rest解构赋值所在的对象。它获取等号右边的所有尚未读取的键（ a 和 b ），将它们和它们的值拷贝过来

由于Rest解构赋值要求等号右边是一个对象，所以如果等号右边是 undefined 或 null ，就会报错，因为它们无法转为对象

let { x, y, ...z } = null; // 运行时错误
let { x, y, ...z } = undefined; // 运行时错误

Rest解构赋值必须是最后一个参数，否则会报错

let { ...x, y, z } = obj; // 句法错误
let { x, ...y, ...z } = obj; // 句法错误

Rest解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么Rest解构赋值拷贝的是这个值的引用，而不是这个值的副本

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

Rest解构赋不会拷贝继承自原型对象的属性

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 // { b: 2 }

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let o3 = { ...o2 };
o3 // { b: 2 }

变量 x 是单纯的解构赋值，所以可以读取继承的属性；Rest解构赋值产生的变量 y 和 z ，只能读取对象自身的属性，所以只有变量 z 可以赋值成功。
Rest解构赋值的一个用处，是扩展某个函数的参数，引入其他操作

function baseFunction({ a, b }) {
   // ...
}
function wrapperFunction({ x, y, ...restConfig }) {
   // 使用x和y参数进行操作
   // 其余参数传给原始函数
   return baseFunction(restConfig);
}

原始函数 baseFunction 接受 a 和 b 作为参数，函数 wrapperFunction 在 baseFunction 的基础上进行了扩展，能够接受多余的参数，并且保留原始函数的行为

扩展运算符

扩展运算符（ ... ）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

扩展运算符可以用于合并两个对象

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

let newVersion = {
   ...previousVersion,
   name: 'New Name' // Override the name property
};
//newVersion 对象自定义了 name 属性，其他属性全部复制自 previousVersion 对象

如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值

let aWithDefaults = { x: 1, y: 2, ...a };
// 等同于
let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
// 等同于
let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);

扩展运算符的参数对象之中，如果有取值函数 get ，这个函数是会执行的

// 并不会抛出错误，因为x属性只是被定义，但没执行
let aWithXGetter = {
   ...a,
   get x() {
      throws new Error('not thrown yet');
   }
};
// 会抛出错误，因为x属性被执行了
let runtimeError = {
   ...a,
   ...{
      get x() {
         throws new Error('thrown now');
      }
   }
};

如果扩展运算符的参数是 null 或 undefined ，这个两个值会被忽略，不会报错

let emptyObject = { ...null, ...undefined }; // 不报错

Object.getOwnPropertyDescriptors()

ES5有一个 Object.getOwnPropertyDescriptor 方法，返回某个对象属性的描述对象（descriptor）

var obj = { p: 'a' };
Object.getOwnPropertyDescriptor(obj, 'p')
// Object { value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// }

ES7提案提出了 Object.getOwnPropertyDescriptors 方法，返回指定对象所有自身属性（非继承属性）的描述对象

const obj = {
   foo: 123,
   get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
   // { value: 123,
      // writable: true,
      // enumerable: true,
      // configurable: true },
   // bar:
      // { get: [Function: bar],
         // set: undefined,
         // enumerable: true,
        // configurable: true } }

Object.getOwnPropertyDescriptors 方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象

function getOwnPropertyDescriptors(obj) {
const result = {};
for (let key of Reflect.ownKeys(obj)) {
   result[key] = Object.getOwnPropertyDescriptor(obj, key);
}
return result;
}

该方法的提出目的，主要是为了解决 Object.assign() 无法正确拷贝 get 属性和 set 属性的问题

const source = {
   set foo(value) {
      console.log(value);
   }
};
const target1 = {};
Object.assign(target1, source);
Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
// writable: true,
// enumerable: true,
// configurable: true }

source 对象的 foo 属性的值是一个赋值函数， Object.assign 方法将这个属性拷贝给 target1 对象，结果该属性的值变成了 undefined 。这是因为 Object.assign 方法总是拷贝一个属性的值，而不会拷贝它背后的赋值方法或取值方法
而Object.getOwnPropertyDescriptors 方法配合 Object.defineProperties 方法，就可以实现正确拷贝

const source = {
   set foo(value) {
      console.log(value);
   }
};
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
// set: [Function: foo],
// enumerable: true,
// configurable: true }

const shallowMerge = (target, source) => Object.defineProperties(
   target,
   Object.getOwnPropertyDescriptors(source)
);

Object.getOwnPropertyDescriptors 方法的另一个用处，是配合 Object.create 方法，将对象属性克隆到一个新对象。这属于浅拷贝

const clone = Object.create(Object.getPrototypeOf(obj),
   Object.getOwnPropertyDescriptors(obj));
// 或者
const shallowClone = (obj) => Object.create(
   Object.getPrototypeOf(obj),
   Object.getOwnPropertyDescriptors(obj)
);

Object.getOwnPropertyDescriptors 方法可以实现，一个对象继承另一个对象。以前，继承另一个对象，常常写成下面这样

const obj = {
   __proto__: prot,
   foo: 123,
};

ES6规定 __ proto __ 只有浏览器要部署，其他环境不用部署。如果去除 __ proto __ ，上面代码就要改成下面这样

const obj = Object.create(prot);
obj.foo = 123;
// 或者
const obj = Object.assign(
   Object.create(prot),
   {
      foo: 123,
   }
);

用Object.getOwnPropertyDescriptors

const obj = Object.create(
   prot,
   Object.getOwnPropertyDescriptors({
      foo: 123,
   })
);

Object.getOwnPropertyDescriptors 也可以用来实现Mixin（混入）模式

let mix = (object) => ({
   with: (...mixins) => mixins.reduce(
      (c, mixin) => Object.create(
         c, Object.getOwnPropertyDescriptors(mixin)
      ), object)
});
// multiple mixins example
let a = {a: 'a'};
let b = {b: 'b'};
let c = {c: 'c'};
let d = mix(c).with(a, b);
//对象 a 和 b 被混入了对象 c

出于完整性的考虑， Object.getOwnPropertyDescriptors 进入标准以后，还会有 Reflect.getOwnPropertyDescriptors 方法。

ECMAScript对象扩展

属性的简洁表示法

属性名表达式

方法name属性

Object.is()

Object.assign()

基本用法

注意点

常见用途

属性的可枚举性

属性的遍历

proto 属性，Object.setPrototypeOf()，Object.getPrototypeOf()

proto 属性

Object.setPrototypeOf()

Object.getPrototypeOf()

Object.values()，Object.entries()

Object.keys

Object.values()

Object.entries

对象的扩展运算符

Rest解构赋值

扩展运算符

Object.getOwnPropertyDescriptors()

猜你喜欢

热点阅读

ECMAScript对象扩展

属性的简洁表示法

属性名表达式

方法name属性

Object.is()

Object.assign()

基本用法

注意点

常见用途

属性的可枚举性

属性的遍历

__proto __ 属性，Object.setPrototypeOf()，Object.getPrototypeOf()

__ proto __属性

Object.setPrototypeOf()

Object.getPrototypeOf()

Object.values()，Object.entries()

Object.keys

Object.values()

Object.entries

对象的扩展运算符

Rest解构赋值

扩展运算符

Object.getOwnPropertyDescriptors()

猜你喜欢

热点阅读

proto 属性，Object.setPrototypeOf()，Object.getPrototypeOf()

proto 属性