【ES6】对象的扩展

对象的扩展

一、扩展运算符

二、可枚举性

三、属性的遍历 5 种方法

四、super 关键字

五、AggregateError 错误对象

扩展运算符

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

扩展运算符的解构赋值，不能复制继承自原型对象的属性。单纯的解构赋值，是可以读取到继承的原型对象属性。

let father = { count: 10 };
let obj = { num: 2 };

obj.__proto__ = father;

let { ...newObj } = obj;

console.log(newObj); // { num: 2 }
console.log(newObj.count); // undefined

上面代码中，对象 newObj 复制了 obj ，但是只复制了 obj 自身的属性，没有复制它的原型对象 father 的属性。

对象的扩展运算符等同于使用 Object.assign() 方法：合并对象，同名属性会被覆盖（后者覆盖掉前者）。

Object.assign(target, source1, source2) 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。第一个参数是目标对象，其余的都是源对象。

const obj = {
  name: "Author",
  age: 18,
};

const a = { ...obj, age: 20 }; // { name:"Author", age: 20 }

const b = { age: 20, ...obj }; // { name:"Author", age: 18 } （age: 20 相当于设置了新对象的默认值，如果说对象 obj 没有 age 属性，合并后得到的新对象 b = {age: 20, name:"Author" }）

数组是特殊的对象，对象运算符也可以用于数组。

const foo = { ...["a", "b", "c"] };
console.log(foo); // {0: "a", 1: "b", 2: "c"}

如果扩展运算符后面是一个空对象，则没有任何效果。数组扩展运算符也是如此。

如果扩展运算符后面不是对象，则会自动将其转为对象。

{...1} // {}  这个等同于 {...Object(1)}

上面代码中，扩展运算符后面是整数 1 ，会自动转为数值的包装对象 Number{1} 。由于该对象没有自身属性，所以返回一个空对象。

如果是字符串，会转为类数组对象。数组扩展运算符会将字符串转为真正的数组。

{...'hello'}; // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

对象扩展运算符后面也可以跟表达式。数组扩展运算符也如此。

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

可枚举性

• for...in 循环：只遍历对象自身的和继承的可枚举的属性。

• Object.keys()：返回对象自身的所有可枚举的属性的键名。

• JSON.stringify()：只串行化对象自身的可枚举的属性。

• Object.assign()： 忽略 enumerable 为 false 的属性，只拷贝对象自身的可枚举的属性。

其中，只有 for...in 会返回继承的属性，其他三个方法都会忽略继承的属性，只处理对象自身的属性。

实际上，引入可枚举（enumerable）这个概念的最初目的，就是让某些属性可以规避掉 for...in 操作，不然所有的内部属性和方法都会被遍历到。比如，数组中的 length 属性就是通过可枚举性不被遍历到。

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

属性的遍历

super 关键字

super 指向当前对象的原型对象。

this 关键字总是指向函数所在的当前对象。

const proto = {
  foo: "Hello",
};

const obj = {
  foo: "World",
  find() {
    return super.foo;
  },
};

Object.setPrototypeOf(obj, proto);

console.log(obj.find()); // Hello

注意：super 关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

// 报错
const obj = {
  foo: super.foo,
};

// 报错
const obj = {
  foo: () => super.foo,
};

// 报错
const obj = {
  foo: function () {
    return super.foo;
  },
};

以上 super 的用法都会报错，第一种情况是 super 写在属性中，第二、三种方法是 super 写在一个函数中，然后赋值给 foo 属性。目前，只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法。

AggregateError 错误对象