/**
* 扩展对象的功能性
*/
// ECMAScript5 对象方法写法
var person = {
name : "song123",
sayName : function () {
return this.name;
}
};
// 一、 ECMAScript6 对象方法的简写语法,消除冒号和function关键字
var person = {
name : "song",
sayName() {
console.log(this.name);
}
};
person.sayName();
// 二、可计算属性名
var person = {}, lastName = "last name"; // 字符串字面量
person['first name'] = "Nike";
person[lastName] = "Love";
console.log(person['first name']); // Nike
console.log(person[lastName]); // Love
/*
* 它支持通过任何字符串值作为名称访问属性的值。
*
* 这种模式: 适用于属性名提前已知或者可被字符串字面量表示的情况
*
* */
let name = "last name";
let json = {
"first name" : "zhangsan",
[lastName] : "song" // 在对象字面量中,使用方括号表示的该属性名称是可计算的
};
console.log(json['first name']); // zhangsan
console.log(json[lastName]); // song
var suffix = "level";
var card = {
['first-' + suffix]: "song",
['second-' + suffix]: "lv"
};
console.log(card["first-level"]); // song
console.log(card["second-level"]); // lv
// 三、新增方法
/**
* ECMAScript其中一个设计目标是 不再创建新的全局函数,也不再Object.prototype上创建新的方法。
在全局Object对象上引入了一些新方法。
Object.is()方法
当你想在JavaScript中比较两个值, 可能使用相等运算符(==)或者 全等(===)
+0 和 -0在JavaScript被表示为两个完全不同的实体
NaN === NaN
ECMAScript6 引入 Object.is()来弥补运算符的不准确
*/
console.log(0 === -0); // true
console.log(NaN === NaN); // false
console.log(Object.is(0,-0)); // false
console.log(Object.is(NaN, NaN)); // true
console.log(5 == "5"); // true
console.log(5 === "5"); // false
console.log(Object.is(5,"5")); // false
/*
Object.assign()方法
混合(Mixin)是JavaScript中实现对象组合最流行的一种模式
在mixin一个对象接收来自另一个对象的属性和方法
*/
function mixin(receiver, supplier) {
Object.keys(supplier).forEach(function (key) {
receiver[key] = supplier[key];
});
return receiver;
}
// mixin()函数遍历supplier的自有属性并复制到recevier(此处的复制是浅复制,当属性值为对象时只复制对象的引用)
function EventTarget() {
}
EventTarget.prototype = {
constructor: EventTarget,
on: function (name) {
console.log(name);
}
};
var myObject = {};
var result = mixin(myObject, EventTarget.prototype);
console.log(typeof result); // object
result.on("hello"); // hello
/*
* Object.assign()方法, 可以接收任意参数的源对象,并按指定顺序将属性复制到接收对象之中
* 如果多个源对象具有同名属性,则排位靠后的源对象会覆盖之前的
* */
var receiver = {};
Object.assign(receiver, {
type : "css",
name : "张三"
}, {
type : "html"
});
console.log(receiver.type); // html
console.log(receiver.name); // name
var supplier = {
get name() {
return "files"
}
};
Object.assign(receiver, supplier);
var desc = Object.getOwnPropertyDescriptor(receiver,"name");
console.log(desc.value); // files
console.log(desc.get); // undefined
// Object.getOwnPropertyDescriptor
var param = {
age : 1,
name : "song"
};
var descriptor = Object.getOwnPropertyDescriptor(param, "name");
console.log(descriptor.value); // song
// 四、重复的对象字面量属性
/*
* ES6中重复属性检查被移除了,无论是严格还是非严格,代码不再检查重复属性,
* 对于每一组重复的属性都会取最后一个取值。
* */
"use strict";
var song = {
name : "张三",
name : "王五" // ES5严格模式下会有语法错误
};
console.log(song.name); // 王五 ES6严格模式下没有错误
// 五、自有属性枚举顺序
/**
* ECMAScript6严格规定了对象的自有属性被枚举时的返回顺序,这会影响到Object.getOwnPropertyNames()
*
*/
console.log(Object.getOwnPropertyNames(param)); // ['age','name']