重读《深入理解ES6》—— 对象扩展

在前端高速发展的今天，对象的使用频率越来越高。因此，为了让我们使用对象越来越方便，ES6 新增了一些针对对象操作的扩展。

一、简洁属性

ES5 中，我们这样使用对象：

var a = 1, b = 2;
var obj = {
    a: a,
    b: b
}
复制代码

在 ES6 中，你可以这样：

const a = 1, b = 2;
const obj = {
    a,
    b
}
复制代码

在对象中，如果你的属性名与变量名相同的情况下，只需要写属性名就可以了。

二、简洁方法

在 ES5 中，对象中这样定义方法：

var person = {
    name: 'zhangsan',
    age: 18,
    say: function() {
        console.log('Hello');
    }
};
复制代码

在 ES6 中，我们可以简化对象中的方法：

const person = {
    name: 'zhangsan',
    age: 18,
    say() {
        console.log('Hello');
    }
};
复制代码

如果是 Generator 函数，只需要在前面加上 *：

const obj = {
    *foo() { ... }
};
复制代码

在对象中创建方法，可以省略冒号和 function。

三、计算属性名

在 ES5 中，当一个对象的属性名是一个表达式时，我们是无法通过对象字面量来表达的，只能通过中括号的形式：

var a = "name";

var obj = {
    say: function() { ... }
};

obj["first" + a] = 'san';
obj["last" + a] = 'zhang';

console.log(obj);
复制代码

ES6 中，新增了一个语法来支持要计算的表达式，结果可以直接作为属性名：

const a = "name";

const obj = {
    say: function() { ... },
    ["first" + a]: 'san',
    ["last" + a]: 'zhang'
};

console.log(obj);
复制代码

方法、 Generator以及 Symbol 也可以用这种形式来表示：

const obj = {
    ["s" + "ay"]() { ... }, // 计算方法
    *["lis" + "ten"]() { ... }, // 计算生成器
    [Symbol.toStringTag]: "ES6 is cool" // 为 Symbol.toStringTag 求值
};
复制代码

在对象字面量中，可以用 [ … ] 的语法，创建计算属性名。

四、设定 [[ Prototype ]]

关于原型和继承的问题，这里不展开讲了，可以参考这3篇文章：

JS进阶(1)：人人都能懂的构造函数

JS进阶(2)：人人都能懂的原型对象

JS进阶(3)：人人都能懂的继承

这里我们来重点说说 ES6 中如何获取以及改变对象的原型。在 ES5 中，我们可以通过 Object.getPrototypeOf() 方法来获取一个对象实例的原型，但不可以更改。而在 ES6 中，新增的 Object.setPropotypeOf() 方法，可以在对象实例化后改变原型。

// 定义一个父类 person
let person = {
    say() {
        console.log('Hi');
    }
};

// ES5 中就有的 Object.getPrototypeOf()
let p1 = Object.create(person);
Object.getPrototypeOf(p1) === person; // true

// ES6 中我们可以设置实例的原型了
// 通过 Object.setPrototypeOf()
// 两个参数：
// 1、要改变原型的对象
// 2、替代原型的对象
let animal = {
    say() {
        console.log('I can not speak');
    }
};

Object.setPrototypeOf(p1, animal);

Object.getPrototypeOf(p1) === person; // false
Object.getPrototypeOf(p1) === animal; // true
复制代码

五、super 对象

super 的引入主要是为了我们更方便地访问对象的原型。

假设我们有两个类，A 类和 B 类。A 类是 B 类的父类。A 类中有一个 say() 方法，B 类中也有一个 say() 方法，同时我们还想在 B 类的 say() 方法中，调用 A 类的 say() 方法。这个时候用 super 简直太爽了。听着有点绕，我们举例来说。

// A 类
let A = {
    say() {
        return 'Hello';
    }
};

// B 类
let B = {
    say() {
        return super.say() + ', World';
    }
}

// A类 是 B类的父类
Object.setPrototypeOf(B, A);

B.say(); // "Hello, World"
复制代码

可以看出来，这样的写法既方便，又可以很轻松地看出哪里是调用父类的方法。只是我们需要注意一点，super 只能用在简洁方法中。

对于对象的扩展，虽然没有块级作用，箭头函数又或是 Promise 那么重要，但这一些细节的改变，确实让我们的编码轻松了许多。

友情链接

重读《深入理解ES6》 —— 块级作用域

重读《深入理解ES6》 —— 模板字符串

重读《深入理解ES6》—— 函数

如果文章中错误或表述不严谨的地方，欢迎指正。

也欢迎大家关注我的同名微信公众号：李等等扣丁

转载于:https://juejin.im/post/5c80cfd651882547113db6de