标签：es6 系列 入门 Object say let log console name

其他章节请看：

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 中严格规定了对象自有属性被枚举时的返回顺序：

1. 所有数字键按照升序排列
2. 字符串按照它们被加入对象的顺序排列
3. 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 对数组的变化侦测，就使用了此方法。

其他章节请看：

es6 快速入门 系列

标签：es6,系列,入门,Object,say,let,log,console,name
来源： https://www.cnblogs.com/pengjiali/p/14648023.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。