es6 快速入门 系列 —— 对象
其他章节请看：
对象
试图解决的问题
写法繁杂
属性初始值需要重复写
function createPeople(name, age){
// name 和 age 都写了 2 次
return {
name: name,
age: age
}
}
对象中的方法有更简单的写法吗？
let person = {
name: 'aaron',
sayName: function(){
}
}
原型访问困难
要记得如何使用 Object.getPrototypeOf() 方法和 .call(this) 方法来调用原型上的方法实在有些复杂
let people = {
role: 'father',
say: function(){
console.log(`你好: ${this.role}`)
}
}
let friend = {
role: 'son',
say(){
// 调用原型上的方法
Object.getPrototypeOf(this).say.call(this)
}
}
// 将friend的原型指定为people
Object.setPrototypeOf(friend, people)
friend.say() // 你好: son
解决方法
写法繁杂
es6给对象提供了属性初始值和对象方法的简写语法
重写上面（试图解决的问题->写法繁杂）的例子：
function createPeople(name, age){
// name 和 age 没有重复了
return {
name,
age
}
}
let person = {
name: 'aaron',
// 去掉了冒号和function
sayName(){
}
}
原型访问困难
es6引入 super 来访问原型用于简化原型的访问
super 是指向对象原型的指针，调用 super 相当于调用 Object.getPrototypeof(this)
用 super 重写上面（试图解决的问题->原型访问困难）的例子：
let people = {
role: 'father',
say: function(){
console.log(`你好: ${this.role}`)
}
}
let friend = {
role: 'son',
say(){
// 这段代码与 Object.getPrototypeOf(this).say.call(this) 相同
super.say()
}
}
// 将friend的原型指定为people
Object.setPrototypeOf(friend, people)
friend.say() // 你好: son
注：必须在简写方法的对象中使用 super
let people = {
say: function(){
console.log('你好')
}
}
let friend = {
// 简写方法
say(){
super.say()
}
}
Object.setPrototypeOf(friend, people)
friend.say() // 你好
如果在非简写方法的对象中使用则会导致语法错误，就像这样:
let friend = {
// 非简写。语法错误
say: function(){
super.say()
}
}
补充
可计算属性名
可以在对象字面量中使用可计算属性名，语法是使用方括号（[]）。请看示例：
let fullName = 'full name';
let obj = {
// 使用 [] 定义可计算属性名
[fullName]: 'aaron',
['test ' + fullName]: 'testAaron'
}
console.log(obj[fullName]) // aaron
console.log(obj['test full name']) // testAaron
重复属性
es6 中无论是严格模式还是非严格模式，都不再检查重复属性，对于每组重复属性，都会选取最后一个取值。请看示例：
let obj = {
name: 'name1',
name: 'name2'
}
console.log(obj.name) // name2
新增方法
Object.is()
Object.is() 用于比较两个值
注：大部分情况与 === 运算符相同，除了下面两种情况：
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，返回目标对象。请看示例：
let target = {}
Object.assign(target, {name: 'aaron', age: 18}, {age:19})
// { name: 'aaron', age: 19 }
console.log(target)
注：后者会覆盖前者，而且也不是深拷贝
Object.assign() 不能赋值访问器属性。请看示例：
// 由于Object.assign()执行的是赋值操作，因此提供者的访问器属性最终会转为接受对象的一个数据属性
let obj1 = {}
let obj2 = {
get name(){
return 'aaron'
}
}
// 类似 obj1.name = obj2.name
Object.assign(obj1, obj2)
let desc1 = Object.getOwnPropertyDescriptor(obj1, 'name')
let desc2 = Object.getOwnPropertyDescriptor(obj2, 'name')
console.log(desc1.value) // aaron
console.log(desc2.value) // undefined - value 只在数据属性描述符中
自有属性枚举顺序
es6 中严格规定了对象自有属性被枚举时的返回顺序：
- 所有数字键按照升序排列
- 字符串按照它们被加入对象的顺序排列
- Symbol键（后续会讲解）也按照它们被加入对象的顺序排列
let obj = {
a: 1,
0: 1,
c: 1,
2: 1,
b: 1,
1.1:1, // 非数字键
1.0: 1 // 数字键
}
obj.d = 1
const result = []
for(let key in obj){
result.push(key)
}
console.log(result.join('')) // 012acb1.1d
上面例子，虽然数字在字面量中的顺序时随意的，但在枚举时会被重新排列。
注：对于 for-in 循环，并非所有厂商都遵循相同的实现方式，因此仍未指定一个明确的枚举顺序。而 Object.keys() 和 JSON.stringify()都指明与 for-in 使用相同的枚举顺序，因此它们的枚举顺序目前也不明晰
改变对象的原型
es6 新增了 Object.setPrototypeOf() 方法来改变对象的原型。请看示例：
let people = {
say: function(){
console.log('你好')
}
}
let dog = {
say: function(){
console.log('汪汪')
}
}
let friend = Object.create(people)
friend.say() // 你好
Object.setPrototypeOf(friend, dog)
friend.say() // 汪汪
注：mdn 中提到，如果你关心性能，避免使用此方法。vue 2.x 对数组的变化侦测，就使用了此方法。
其他章节请看：
最新文章
- Django实现注册
- java中遍历map的两种方式
- CODESOFT都出中文官网了，你还等什么呢
- tcpdump来抓取执行的sql语句
- Fix Some bytes have been replaced with the Unicode substitution character while loading file XXX.cs with Chinese Simplified (GB2312) encoding
- 二十7天 春雨滋润着无形 —Spring依赖注入
- CodeForces 670B Game of Robots
- 物联网设备是如何被破解的？分析一种篡改IoT固件内容的攻击方式
- SpringMvc+Hibernate+Mysql保存表情字符(昵称)到数据库报错的问题?
- NGUI 做局部2d卷轴
- vim 正则非贪婪模式
- NOIP 普及组 2012 寻宝(思维？？？)
- 高手速成android开源项目【View篇】
- bzoj 4810 由乃的玉米田 - bitset - 莫队算法
- 用StringHelper.Split分解字符串
- UVA-127 "Accordian" Patience （模拟）
- Python3.x：将数据下载到xls时候用xml格式保存一份读取内容
- 1_jenkins环境搭建
- 数据挖据之GeoHash核心原理解析
- R中apply函数族