您好,登錄后才能下訂單哦!
前言
將A對象的屬性復(fù)制給B對象,這是JavaScript編程中很常見的操作。下面這篇文章將介紹ES6的Object.assign()屬性,可以用于對象復(fù)制。
在JavaScript生態(tài)系統(tǒng)中,對象復(fù)制有另外一個術(shù)語: extend。下面是兩個JS庫提供的extend接口:
Prototype: Object.extend(destination, source)
Underscore.js: _.extend(destination, *sources)
Object.assign()介紹
ES6提供了Object.assign()
,用于合并/復(fù)制對象的屬性。
Object.assign(target, source_1, ..., source_n)
它會修改target對象,然后將它返回:先將source_1對象的所有可枚舉屬性復(fù)制給target,然后依次復(fù)制source_1等的屬性。
1. 屬性名可以為字符串或者Symbol
在ES6中,對象的屬性名可以是字符串或者Symbol。因為Symbol值具有唯一性,這就意味著Symbol作為對象的屬性名時,可以保證不會出現(xiàn)同名的屬性。對象屬性名為字符串或者Symbol時,Object.assign()
都支持。
2. 屬性復(fù)制通過賦值實現(xiàn)
target對象的屬性是通過復(fù)制來創(chuàng)建的,這就意味著,如果target有setters方法時,它們將會被調(diào)用。
另一種方案是通過定義來實現(xiàn),這樣將會創(chuàng)建新的自有屬性,不會調(diào)用setters方法。其實,另一個版本的Object.assign()
的提案正是采用這種方法。不過,這個提議在ES6中被拒絕了,也許之后的版本會再考慮。
Object.assign()使用示例
1. 初始化對象屬性
構(gòu)造器正是為了初始化對象的屬性,通常,我們不得不多次重復(fù)屬性的名字。示例代碼的constructor中,x與y均重復(fù)了兩次:
class Point { constructor(x, y) { this.x = x; this.y = y; } }
如果可以的話,個人偏愛將所有冗余都省去。(事實上,CoffeeScript與TypeScript都有語法解決構(gòu)造器中屬性名重復(fù)的問題。):
class Point { constructor(this.x, this.y){} }
至少,Object.assign()
可以幫助我們減少一些重復(fù):
class Point { constructor(x, y) { Object.assign(this, { x, y }); } }
在ES6中, { x, y }
為{ x: x, y: y }
的縮寫。
2. 為對象添加方法
ECMAScript 5, you use a function expression to add a method to an object:
在ES5中,需要使用function關(guān)鍵字定義對象的新增方法:
MyClass.prototype.foo = function(arg1, arg2) { //... };
在ES6中,對象方法的定義更加簡潔,不需要使用function關(guān)鍵字。這時,可以使用Object.assign()
為對象新增方法:
Object.assign(MyClass.prototype, { foo(arg1, arg2) { //... } });
3. 復(fù)制對象
使用Object.assign()
深度復(fù)制對象,包括其prototype
var Point = function(x) { this.x = x; } Point.prototype.y = 2; var obj = new Point(1); var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 輸出{x:1,y:2} console.log(copy) // 輸出{x:1,y:2}
僅復(fù)制自身屬性:
var Point = function(x) { this.x = x; } Point.prototype.y = 2; var obj = new Point(1); var copy = Object.assign({}, obj); console.log(copy) // 輸出{x:1}
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
參考
原文: ECMAScript 6: merging objects via Object.assign()
譯者: Fundebug
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。