背景介紹
在之前的基礎(chǔ)篇已經(jīng)給出了ES6在數(shù)據(jù)結(jié)構(gòu)上做的優(yōu)化和改變,那這一篇進(jìn)階篇就來(lái)說(shuō)說(shuō)ES6的對(duì)象變化,順便給出之前基礎(chǔ)篇的傳送門:
ECMAScript 6重點(diǎn)一覽——基礎(chǔ)篇
特性重點(diǎn)
一、【重點(diǎn)】簡(jiǎn)潔屬性
var Person = {??
name:'張三',
birth, //等同于birth: birth
hello() {console.log('我的名字是',this.name); }// 等同于hello: function ()...
};
二、屬性名表達(dá)式
可以使用表達(dá)式作為屬性名,如下
obj.foo =true; // 方法一
obj['f'+'oo'] =true;?// 方法二
三、【重點(diǎn)】Object.assign()
Object.assign方法用來(lái)將源對(duì)象(source)的所有可枚舉屬性,復(fù)制到目標(biāo)對(duì)象(target)
var target = { a:1};
var source1 = { b:2};
var source2 = { c:3};
Object.assign(target, source1, source2);
target// {a:1, b:2, c:3}
關(guān)于這一點(diǎn)會(huì)有很多應(yīng)用:具體在此不展開(kāi),詳情請(qǐng)看文末鏈接:)
(1)為對(duì)象添加屬性
(2)為對(duì)象添加方法
(3)克隆對(duì)象
(4)為屬性指定默認(rèn)值
四、Object.setPrototypeOf(),Object.getPrototypeOf()
設(shè)置和讀取對(duì)象的prototype對(duì)象,如下示例:
var o =Object.setPrototypeOf({},null);
Object.getPrototypeOf(obj)
五、Symbol
ES6引入了一種新的原始數(shù)據(jù)類型Symbol,表示獨(dú)一無(wú)二的ID。它通過(guò)Symbol函數(shù)生成。
let symbol1 =Symbol();
typeof symbol1 // "symbol"
我的個(gè)人的理解ES6對(duì)Symbol的引入,想法上可能是類似Bool類型,雖然String的0和1,Integer的0和1都能表示對(duì)錯(cuò),但是從人類思維的意義上說(shuō),既然對(duì)錯(cuò)在邏輯思維中出現(xiàn)頻率非常高,那為什么不單獨(dú)使用Bool的false和true來(lái)表示?我想,Symbol也是一樣的道理,就專門定義一種數(shù)據(jù)類型來(lái)表示屬性名稱。當(dāng)然,我個(gè)人對(duì)此持中立態(tài)度,它有可能把原本簡(jiǎn)單的事情,弄復(fù)雜了。
六、Proxy
Proxy用于修改某些操作的默認(rèn)行為,等同于在語(yǔ)言層面做出修改。其實(shí)可以理解成在目標(biāo)對(duì)象之前,架設(shè)一層“攔截”,外界對(duì)該對(duì)象的訪問(wèn),都必須先通過(guò)這層攔截。
這個(gè)Proxy其實(shí)類似于設(shè)計(jì)模式中的代理,只不過(guò)是語(yǔ)言層面的實(shí)現(xiàn),如下代碼示例:
var proxy =newProxy({}, {??
get:function( target, property ){ return35; }
});
proxy.time// 35
proxy.name// 35
基于Proxy,可以有很多的想象,畢竟這已經(jīng)是一種設(shè)計(jì)模式的實(shí)現(xiàn)了,個(gè)人感覺(jué)這個(gè)可能用來(lái)做框架會(huì)用的比較多,實(shí)際業(yè)務(wù)處理可能不會(huì)用太頻繁,而且其實(shí)所有設(shè)計(jì)模式都不是只有利,也有弊,Proxy本身無(wú)可避免地會(huì)增加邏輯層次
七、Object.observe(),Object.unobserve()
Object.observe方法用來(lái)監(jiān)聽(tīng)對(duì)象(以及數(shù)組)的變化。一旦監(jiān)聽(tīng)對(duì)象發(fā)生變化,就會(huì)觸發(fā)回調(diào)函數(shù)。類似于第六點(diǎn),也是語(yǔ)言層面的設(shè)計(jì)模式實(shí)現(xiàn),觀察者模式?,F(xiàn)在很流行很趨勢(shì)的MVVM框架就是類似的思想,這一點(diǎn)可以用來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定。這其實(shí)是ES7的內(nèi)容,在此就不展開(kāi)了。
總結(jié)
原本這一篇文章是想對(duì)象和函數(shù)一起寫的,但是沒(méi)想到光對(duì)象就寫了七點(diǎn),篇幅已經(jīng)比較長(zhǎng)了,但是其實(shí)在對(duì)象這一塊上,雖然變化點(diǎn)不少,但實(shí)際上,需要特別關(guān)注的并不多,除非是有做框架的需求。JS的面向?qū)ο笃鋵?shí)還是有待增強(qiáng)的,即便是到了ES6??赡苣_本語(yǔ)言天生要實(shí)現(xiàn)面向?qū)ο缶捅容^糾結(jié),一方面既是腳本自由靈活,可另一方面卻又是有對(duì)象的約束,這其中的平衡很難把握,大多數(shù)的JS開(kāi)發(fā)者們應(yīng)該都有這樣的困擾,究竟什么時(shí)候我需要面向?qū)ο笕プ鲞@一件事情,可是往往很多時(shí)候強(qiáng)迫了自己用面向?qū)ο蟮姆绞饺?shí)現(xiàn),可是最后卻發(fā)現(xiàn)耗費(fèi)了不少的時(shí)間和精力,可能原本只需要按照腳本思想,很快就解決了。而且說(shuō)實(shí)話,真論到最后維護(hù)性上來(lái),過(guò)度設(shè)計(jì)的面向?qū)ο螅娴目赡芤h(yuǎn)遠(yuǎn)比簡(jiǎn)單的腳本流程難以維護(hù)的多。當(dāng)然,這就是題外話了。
后續(xù)的高級(jí)篇已經(jīng)完成,如下傳送門:
ECMAScript 6重點(diǎn)一覽——高級(jí)篇
本文基于阮一峰的ECMAScript 6 系列文章和眾多網(wǎng)絡(luò)散文資料匯聚。在此給出原文鏈接,上面給出的重點(diǎn)一覽,都可以在下面鏈接找到更為詳盡的講解:
如果有任何的批評(píng)建議,BUG反饋,問(wèn)題反饋,或是想法建議,幫助支持,個(gè)人都十分歡迎,我個(gè)人的聯(lián)系方式如下:)
作者:cheneyxu
郵箱:457299596@qq.com
QQ:457299596
關(guān)于:XServer官網(wǎng)