ES6

ES6学习笔记11:对象的新面貌

Posted by mieruko on 2016-12-20

前言

在ES6里面，对象越来越“对象”了。
这么说有点奇怪吧，哈哈哈，还是一点一点写代码来看吧。

创建对象的新形式

先看一段代码: 

1
2
3
4
5
6
7
8
9
10
'use strict'

let dessert = "🍰", drink="🍹";

let food = {
  dessert: dessert,
  drink: drink
}

console.log(food);

我们输出了food，food中是🍰和🍹，没毛病。

但是ES6中，给同名的属性和变量提供了便利，我们可以把它写成这样： 

1
2
3
4
5
6
7
8
9
10
'use strict'

let dessert = "🍰", drink = "🍹";

let food = {
  dessert,
  drink
};

console.log(food);

我们可以得到一样的效果。

此外，ES6中方法的定义可以简写： 

1
2
3
4
5
6
7
'use strict'

let food = {
  breakfast(): {
    // todo
  };
}

像楼上这样就可以。

Object.is()方法

对比两个值是否相等，我们以前用”==”和”===”。

但这样会有一些问题： 

1
2
3
+0 == -0;
+0 === -0;
NaN == NaN;

前两个都返回了true,而它们显然不是一个东西。
最后一个虽然是一个东西，但是它返回了false。
对于这个，我们的解决办法是： 

1
2
Object.is("+0","-0");
Object.is(NaN, NaN);

第一个返回了false,第二个返回了true,得到了我们想要的结果😄。
当然大部分情况下我们还是可以使用两个等号或者三个等号来判断两个值是不是相等的。

Object.assign()方法

Object.assign(a, b, ….)可以用来把一个对象中的方法和属性复制到另一个对象里去。
如果a和b(以及更后面的对象)中有一样的属性，那么b中的属性会覆盖a中的属性，如果b中的属性a没有，那么b中的这个新属性会添加给a。 

1
2
3
4
5
6
7
8
9
10
11
'use strict'

let breakfast = {};

Object.assign(
  breakfast,
  {drink: "🍺"},
  {food: "🍎"}
);

console.log(breakfast);

嘻嘻，是不是添加进来啦？

ES6中的原型

ES6中为我们提供了getPrototypeOf()和setPrototypeOf()两个好用的方法。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict'

let breakfast = {
  getDrink() {
    return "🍵";
  }
};

let dinner = {
  getDrink() {
    return "🍹";
  }
}

let sunday = Object.create(breakfast);
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday));

这段代码首先基于breakfast创建了一个新对象sunday,然后我们调用了原型对象中的方法，没毛病。最后输出它的原型确实是breakfast,没毛病，嘻嘻。

此时我们在它的基础上如果想要更改原型，就可以请出setPrototypeOf()这个方法： 

1
Object.setPrototypeOf(sunday, dinner);

然后我们再输出： 

1
console.log(Object.getDrink());

输出了🍹啦！

再确认一下： 

1
console.log(Object.getPrototypeOf(sunday));

输出的就是dinner对象，没毛病！

super

super也来啦！！word妈！JS你这是要上天，越来越像“正统语言”了哈哈哈哈。
看一段代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let breakfast = {
  drink() {
    return 🍹;
  }
}

let sunday = {
  __proto__: breakfast,
  getDrink() {
    return super.getDrink() + "🍼";
  }
}

console.log(sunday.getDrink());

然后就输出了果汁和奶瓶，嘻嘻。

就是说如果你需要在子对象的方法中使用父对象的方法或者属性，你就应该使用super这个东西。
在其它情况下，你调用super,是会报错的。

```

FEATURED TAGS
ES6