es6 快速入门系列 —

当前位置:

首页 > temp > JavaScript教程 >

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() // 汪汪