天天看點

js實作複制對象、擴充對象 方法

jquery裡有extend方法來擴充對象,但如果我們隻用js,怎麼來實作擴充對象呢?

1、ES6提供了Object.assign() ,用于合并/複制對象的屬性。

Object.assign(target, source_1, ..., source_n)
           

它會依次把 source_1, …, source_n 等對象的屬性 複制 到 target對象中,最後傳回target對象。當遇到同名屬性時,後添加的對象屬性會覆寫先添加的對象屬性。

var o = {
    'a':,
    'b':
};
var a = {
    'b':,
    'c':
};
console.log(Object.assign({}, o, a));//{a: 1, b: 3, c: 5}
           

2、對于ES5,可以自己寫一個extend方法

源代碼:

//******** 深複制對象 ********
function cloneObj(obj) {
    var newObj = obj.constructor === Array ? []:{};
    newObj.constructor = obj.constructor;
    if(typeof obj !== "object"){ 
        return ;
    } else if(window.JSON){
        newObj = JSON.parse(JSON.stringify(obj));//若需要考慮特殊的資料類型,如正則,函數等,需把這個else if去掉即可
    } else {
        for(var prop in obj){
            if(obj[prop].constructor === RegExp ||obj[prop].constructor === Date){
                newObj[prop] = obj[prop];
            } else if(typeof obj[prop] === 'object'){
                newObj[prop] = deepCopy(obj[prop]);//遞歸
            } else {
                newObj[prop] = obj[prop];
            }
        }
    } 
    return newObj;
};

//******** 擴充對象 ********
function extendObj() {
    if(arguments.length < ){return ;}
    var tempobj = cloneObj(arguments[]); //調用複制對象cloneObj方法
    for(var n = ;n < arguments.length;n++){
        for(var key in arguments[n]){
            tempobj[key] = arguments[n][key];
        }
    }
    return tempobj;
};

//******** 測試 擴充對象 ********
//讓obj3繼承obj1和obj2
var obj1 = {name:"bty",age:};
var obj2 = {sex:"boy"};
var obj3 = extendObj(obj1,obj2); 
console.log(obj3.age); //12

//******** 測試 複制對象 ********
var obj2 = cloneObj(obj1);//深複制對象
obj1.name = "ssh";//修改obj1.name值,但下面obj2.name值不變
console.log(obj2.name);   //bty
           

注:這裡我們寫方法的時候,不要用Array.prototype.name 的形式,因為上面cloneObj方法中我們涉及到了for-in周遊,如果用了改寫原型的方式寫方法,周遊時會把原型的方法也周遊進去,這不是為我們想要的結果。

繼續閱讀