资讯专栏INFORMATION COLUMN

《深入理解ES6》笔记——扩展对象的功能性(4)

baihe / 2578人阅读

摘要:将对象的属性拷贝到了对象,合并成一个新的对象。而这种行为也是新增的标准。总结本章讲解了对象字面量语法拓展,新增方法,允许重复的对象字面量属性,自有枚举属性排序,增强对象原型,明确了方法的定义。但是,就算把全部新增的功能记住也不是难事。

变量功能被加强了、函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗?

对象类别

在ES6中,对象分为下面几种叫法。(不需要知道概念)

1、普通对象

2、特异对象

3、标准对象

4、内建对象

对象字面量语法拓展

随便打开一个js文件,对象都无处不在,看一个简单的对象。

{
  a: 2
}

ES6针对对象的语法扩展了一下功能

1、属性初始值简写

//ES5
function a(id) {
  return {
    id: id
  };
};

//ES6
const a = (id) => ({
  id
})

2、对象方法简写

// ES5
const obj = {
  id: 1,
  printId: function() {
    console.log(this.id)
  }
}

// ES6
const obj = {
  id: 1,
  printId() {
    console.log(this.id)
  }
}

3、属性名可计算

属性名可以传入变量或者常量,而不只是一个固定的字符串。

const id = 5
const obj = {
  [`my-${id}`]: id
}
console.log(obj["my-5"]) // 5
ES6对象新增方法

在Object原始对象上新增方法,原则上来说不可取,但是为了解决全世界各地提交的issue,在ES6中的全局Object对象上新增了一些方法。

1、Object.is()

用来解决JavaScript中特殊类型 == 或者 === 异常的情况。

下面是一些异常情况

//实际出现了异常(错误输出)
console.log(NaN === NaN) // false
console.log(+0 === -0) // true
console.log(5 == "5") //true

//我们期望的目标输出(正确输出)
console.log(NaN === NaN) // true
console.log(+0 === -0) // false
console.log(5 == "5") //false

为了解决历遗留问题,新增了Object.is()来处理2个值的比较。

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false
console.log(Object.is(5, "5")) //false

2、Object.assign()

也许你已经见过或者使用过这个方法了,那这个新增的方法解决了什么问题呢?

答:混合(Mixin)。

mixin是一个方法,实现了拷贝一个对象给另外一个对象,返回一个新的对象。

下面是一个mixin方法的实现,这个方法实现的是浅拷贝。将b对象的属性拷贝到了a对象,合并成一个新的对象。

//mixin不只有这一种实现方法。
function mixin(receiver, supplier) {
  Object.keys(supplier).forEach((key) => {
    receiver[key] = supplier[key]
  })
  return receiver
}

let a = {name: "sb"};
let b = {
  c: {
    d: 5
    }
  }
console.log(mixin(a, b)) // {"name":"sb","c":{"d":5}}

写这样一个mixin方法是不是很烦,而且每个项目都得引入这个方法,现在,ES6给我们提供了一个现成的方法Object.assign()来做mixin的事情。

假设要实现上面的mixin方法,你只需要给Object.assign()传入参数即可。

console.log(Object.assign(a, b))// {"name":"sb","c":{"d":5}}

使用Object.assign(),你就可以不是有继承就能获得另一个对象的所有属性,快捷好用。

看一个实现Component的例子。

//声明一个构造函数Component
class Component {}
//给构造函数设置原型方法
Component.prototype = {
  componentWillMount() {},
  componentDidMount() {},
  render() {console.log("render")}
}
//定义一个新的对象
let MyComponent = {}
//新对象继承了Component的所有方法和属性。
Object.assign(MyComponent, Component.prototype)

console.log(MyComponent.render()) // render

在react的reducer中,每次传入新的参数返回新的state,你都可能用到Object.assign()方法。

重复的对象字面量属性

ES5的严格模式下,如果你的对象中出现了key相同的情况,那么就会抛出错误。而在ES6的严格模式下,不会报错,后面的key会覆盖掉前面相同的key。

const state = {
  id: 1,
  id: 2
}
console.log(state.id) // 2
自有属性枚举顺序

这个概念看起来比较模糊,如果你看了下面的例子,你可能就会明白在说什么了。

const state = {
  id: 1,
  5: 5,
  name: "eryue",
  3: 3
}

Object.getOwnPropertyNames(state) 
//["3","5","id","name"] 枚举key

Object.assign(state, null)
//{"3":3,"5":5,"id":1,"name":"eryue"} 

上面的例子的输出结果都有个规律,就是数字提前,按顺序排序,接着是字母排序。而这种行为也是ES6新增的标准。你还可以自己测试一下其他方法是不是也支持枚举自动排序。比如Object.keys(), for in 等。

增强对象原型

如果你想定义一个对象,你会想到很多方法。

let a = {}

let b = Object.create(a)

function C() {}

class D {}

那么,ES6是如何在这么强大的对象上面继续增强功能呢?

1、允许改变对象原型

改变对象原型,是指在对象实例化之后,可以改变对象原型。我们使用 Object.setPrototypeOf() 来改变实例化后的对象原型。

let a = {
  name() {
    return "eryue"
  }
}
let b = Object.create(a)
console.log(b.name()) // eryue
  
//使用setPrototypeOf改变b的原型
let c = {
  name() {
    return "sb"
  }
}    
Object.setPrototypeOf(b, c)    
console.log(b.name()) //sb

2、简化原型访问的super引用

这一个知识你可以看书籍原文,我目前想不到实际业务代码来分析。

方法的定义

ES6明确了方法的定义。

let a = {
  //方法
  name() {
    return "eryue"
  }
}
//函数
function name() {}

估计习惯了函数和方法切换的我们,还是不用太在意这些具体的叫法。

总结

本章讲解了对象字面量语法拓展,ES6新增方法,允许重复的对象字面量属性,自有枚举属性排序,增强对象原型,明确了方法的定义。

我们平时开发中比较常用的是前面4种新增的功能,尤其是Object.assign()的使用。但是,就算把全部新增的功能记住也不是难事。所以,全都记住吧!

=> 返回文章目录

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84076.html

相关文章

  • 深入理解ES6笔记——扩展对象能性4

    摘要:将对象的属性拷贝到了对象,合并成一个新的对象。而这种行为也是新增的标准。总结本章讲解了对象字面量语法拓展,新增方法,允许重复的对象字面量属性,自有枚举属性排序,增强对象原型,明确了方法的定义。但是,就算把全部新增的功能记住也不是难事。 变量功能被加强了、函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法。(不需...

    Amos 评论0 收藏0
  • 深入理解ES6笔记(四)扩展对象功能

    摘要:主要知识点有对象类别属性速记法方法简写需计算属性名方法方法可允许重复的属性自有属性的枚举顺序方法引用方法定义深入理解笔记目录对象类别普通对象拥有对象所有默认的内部行为。奇异对象其内部行为在某些方面有别于默认行为。所有的标准对象都是内置对象。 主要知识点有对象类别、属性速记法、方法简写、需计算属性名、Object.is()方法、Object.assign()方法、可允许重复的属性、自有属...

    awkj 评论0 收藏0
  • 深入理解ES6笔记——导读

    摘要:最近买了深入理解的书籍来看,为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序,作为一个粉丝,还是挺看好这本书能给我带来一个新的升华,而且本书的作者也非常厉害。 使用ES6开发已经有1年多了,以前看的是阮一峰老师的ES6教程,也看过MDN文档的ES6语法介绍。 最近买了《深入理解ES6》的书籍来看,为什么学习ES6这么久还要买这本书呢?主要是看到Daniel A...

    Godtoy 评论0 收藏0
  • 深入理解ES6笔记——导读

    摘要:最近买了深入理解的书籍来看,为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序,作为一个粉丝,还是挺看好这本书能给我带来一个新的升华,而且本书的作者也非常厉害。 使用ES6开发已经有1年多了,以前看的是阮一峰老师的ES6教程,也看过MDN文档的ES6语法介绍。 最近买了《深入理解ES6》的书籍来看,为什么学习ES6这么久还要买这本书呢?主要是看到Daniel A...

    wupengyu 评论0 收藏0
  • 深入理解ES6笔记(十)增强数组功能

    摘要:在可迭代对象上使用所有数组上的新方法与方法与方法均接受两个参数一个回调函数一个可选值用于指定回调函数内部的。回调函数可接收三个参数数组的某个元素该元素对应的索引位置以及该数组自身。 主要知识点:创建数组、数组上的新方法、类型化数组showImg(https://segmentfault.com/img/bVbfWo1?w=991&h=587); 《深入理解ES6》笔记 目录 创建数组...

    pekonchan 评论0 收藏0

发表评论

0条评论

baihe

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<