1. 程式人生 > >原生js物件合併物件拷貝Object.assign()方法的es5、es6實現

原生js物件合併物件拷貝Object.assign()方法的es5、es6實現

實現思路:支援es6的瀏覽器,可以直接用Object.assign()合併物件,只支援es5的瀏覽器,我們用pollyfill的方法。

作用

Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。

語法

Object.assign(target, ...sources)

引數

target: 目標物件
sources: 源物件

返回值

目標物件

描述

Object.assign 方法只複製源物件中可列舉的屬性和物件自身的屬性。它在源物件上使用 [[Get]], 在目標物件上使用 [[Set]], 會呼叫 getter 和 setter。它不適合用於把一個包含 getter 的物件屬性合併到一個原型中。如果要把屬性定義連同可列舉性複製到一個原型中,應該使用 Object.getOwnPropertyDescriptor() 和 Object.defineProperty() 方法。

String 和 Symbol 型別的屬性都會被複制。

當發生錯誤時,例如有一個屬性是不可寫的,將會丟擲一個 TypeError 錯誤,目標物件保持不變。

注意 Object.assign() 源物件為 null 或 undefined 時不會報錯。

jian示例

克隆物件

var obj = {a: 1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1};

合併物件

var o1 = {a: 1};
var o2 = {b: 2};
var o3 = {c: 3};

var obj = Object.assign(o1, o2, o3);
console.log(obj); //{a: 1, b: 2, c: 3}
console.log(o1); //{a: 1, b: 2, c: 3}, 目標物件被改變了

ES5版本實現方法

/**
     * 物件合併polyfill
     * */
    function zyEs6AssignPolyfill() {
        if (!Object.assign) {
            Object.defineProperty(Object, "assign", {
                enumerable: false,
                configurable: true,
                writable: true,
                value: function (target, firstSource) {
                    "use strict";
                    if (target === undefined || target === null)
                        throw new TypeError("Cannot convert first argument to object");
                    var to = Object(target);
                    for (var i = 1; i < arguments.length; i++) {
                        var nextSource = arguments[i];
                        if (nextSource === undefined || nextSource === null) continue;
                        var keysArray = Object.keys(Object(nextSource));
                        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
                            var nextKey = keysArray[nextIndex];
                            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
                            if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey];
                        }
                    }
                    return to;
                }
            });
        }
    }

參考文獻:http://www.cnblogs.com/heiye168/p/5689006.html