第4章 对象的改动

对象的改变

ES6对象的变化不多,主要有以下几点变化:

  1. 语法简化和语法改变;
  2. 添加一些新的方法,Object.is(), Object.assign(), Object.setPrototypeOf();
  3. 引入super()

一.语法改变

1.语法简化

ES6语法简化主要是一下2个方面:

1.属性初始化器 property initializer

// ES5-,返回的对象字面量对参数进行复制后赋值
function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

ES6简化这种写法:当对象属性名和局部变量名一样时,可以省略冒号和值

// ES6
function createPerson(name, age) {
    return {
        name,
        age
    };
}

2.简写方法 concise methods

// ES5
var obj = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

ES6可以省略冒号和function关键词,简写语法的另一个用处就是可以调用super()方法,非简写语法则不能(后面会介绍super方法)

// ES6
var obj = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

2.计算属性名

变量可以作为对象字面量属性:

let lastName = "last name";
let person = {
    "first name": "Nicholas",
    [lastName]: "Zakas"       // 使用方括号将变量添加进去 
};
person["first name"]; // "Nicholas"
person[lastName]; // "Zakas" 变量计算为字符串"last name"

// 另一种用法
var suffix = "name";
var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};
person("first name"); // "Nicholas"
person("last name"); // "Zakas"

3.语法修改

ES5 严格模式下不允许有重复属性, 而ES6严格和非严格模式都允许有重复属性

// ES5严格模式下, 下面情况抛出错误; ES6 则允许这种情况 
"use strict;"
var obj = {
    name: "Nicholas",
    name: "James"
};  

二.新方法

1.Object.is()

这个方法用于判断一些严格等于以前不能判断的等式,比如isNaN()判断NaN不够准确,+0,-0之间的问题。

// 我们知道NaN自身都不相等
NaN === NaN; // false
// 判断NaN用isNaN方法,但是这个方法并不准确,undefined也会返回true,如:
isNaN(NaN); // true
isNaN(undefined); // true

// 可以自定义一个函数来判断NaN
function isReallyNaN(o) {
    if (typeof o === "number") {
        return o !== o;
    }
    return false;
}
isReallyNaN(NaN); // true
isReallyNaN(undefined); // false

ES6方法

Object.is(NaN, NaN); // true

// 对于+0,-0 js引擎中两者是不相等的,但是一般比较
+0 === -0; // true
Object.is(+0, -0); // false

2.Object.assign()

对象组合模式在js中很流行,一般我们称之为mixins, 指的是将一个对象的属性和方法赋给另一个对象。

ES5:

function mixin(receiver, supplier) {
    Object.keys(supplier).forEach(
        key => {receiver[key] = supplier[key]}
    );
    return receiver;
}

ES6 Object.assign()和上面的方法差不多,不过可以接受任意supplier

Object(receiver, supplier[, supplier...]);
// **supplier中若有重复属性, 后面的属性将重写前面的属性**
var receiver = {};
Object.assign(reveiver, 
    {
        type: "js",
        name: "file.js"
    },
    {
        type: "css"
    }
);
receiver.name; // "file.js"
receiver.type; // "css"

3.Object.setPrototypeOf()

ES6之前一个对象的原型在创建之后是不能改变的, ES6通过新方法setPrototypeOf()来修改一个对象的原型。

Object.setPrototypeOf(obj, protoObj);
// 通过修改对象内部[[prototype]]属性

eg

let person = {
    saySomething() {
        return "hello";
    }
};

let dog = {
    saySomething() {
        return "woof";
    }
};

let friend = Object.create(person);
friend.saySomething(); // "hello"
Object.getPrototypeOf(friend) === person; // true

// 将原型改为dog
Object.setPrototypeOf(friend, dog);
friend.saySomething(); // "woof"
Object.getPrototypeOf(friend) === dog; // true

三.super

为访问对象原型提供了很大的便利,在多级原型(即多级继承)中及其有用,在多级继承中Object.getPrototypeOf()有些条件下是不能使用的。
只能用于简写方法中(concise method)

let person = {
    saySomething() {
        return "hello";
    }
};

let dog = {
    saySomething() {
        return "woof";
    }
};

let friend = {
    saySomething() {
        return Object.getPrototypeOf(this).saySomething.call(this) + " hi";
    }
};

Object.setPrototypeOf(friend, person);
friend.saySomething(); // "hello hi"
// 多级继承
var rel = Object.create(friend); // rel 继承 friend
**rel.saySomething(); // ERROR**

// 可以通过super简写上面friend对象
let friend = {
    saySomething() {
        return super.saySomething() + " hi";
    }
};

// 多级继承中
var rel = Object.create(friend); // rel 继承 friend
rel.saySomething(); // OK "hello hi"

总结

总的来讲,ES6对象上的改动不是很大,主要是新添加了一些方法,和语法上的优化,最重要的是对原来一些比较模糊的概念进行了正是规范,还有super方法的引入,对继承的便利提供了很大的帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,128评论 0 3
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,510评论 0 8
  • 第四章 扩展对象的功能性 1. 对象字面量语法扩展 直接看例子 ES6中通过属性初始化的简写语法,可以消除这种属性...
    NowhereToRun阅读 734评论 0 2
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,051评论 8 25
  • 他有个哥哥,是个傻子。 喜欢在水果皮上划开一个小洞, 用一把长柄的小勺子挖去里面的肉。 然后,把挖空的果皮填进去另...
    找hui阅读 250评论 0 0