2012-01-18 23 views
5

thể trùng lặp:
How can I merge properties of two JavaScript objects dynamically?Tạo một đối tượng dựa trên 2 người khác

Tôi có hai đối tượng a và b được định nghĩa như thế này:

a = { 
    a: 1, 
    af: function() { console.log(this.a) }, 
}; 
b = { 
    b: 2, 
    bf: function() { console.log(this.b) }, 
}; 

Những gì tôi muốn bây giờ là tạo một đối tượng khác sẽ lấy các thuộc tính của a và b, như sau:

c = { 
    a: 1, 
    af: function() { console.log(this.a) }, 
    b: 2, 
    bf: function() { console.log(this.b) }, 
} 

Lưu ý rằng a và b cần giữ nguyên.

Bất kỳ ý tưởng nào về cách thực hiện việc này?

Trả lời

2

Bạn có thể thực hiện vòng lặp for cho cả a và b và sao chép tất cả các thuộc tính hasOwn vào đối tượng mới.

var c = {}; 
for (var p in a) 
    if(a.hasOwnProperty(p)) 
     c[p] = a[p]; 
for (var p in b) 
    if(b.hasOwnProperty(p)) 
     c[p] = b[p]; 

DEMO


Hoặc, nếu bạn tình cờ được sử dụng jQuery, bạn có thể làm:

var c = $.extend({}, a, b); 
+0

Giải pháp jQuery thật tuyệt vời! –

+0

@NicolasBADIA - vâng, $ .extend rất tuyệt –

1
var i, c={}; 
for (i in a) { if (a.hasOwnProperty(i)) { c[i] = a[i]; } } 
for (i in b) { if (b.hasOwnProperty(i)) { c[i] = b[i]; } } 

Bạn có thể trừu tượng chức năng này vào "extend" function similar to the one provided by jQuery riêng bạn:

function extend() { 
    var i, j, x, o=(arguments[0] || {}); 
    for (i=1; i<arguments.length; i++) { 
    x = arguments[i]; 
    for (j in x) { if (x.hasOwnProperty(j)) { o[j] = x[j]; } } 
    } 
    return o; 
} 
var c = extend({}, a, b); 
1
var desc = Object.getOwnPropertyDescriptor, 
    props = Object.getOwnPropertyNames, 
    define = Object.defineProperty; 

function extend(target) { 
    return { 
     with: function(source) { 
      props(source).forEach(function(key) { 
       define(target, key, desc(source, key)); 
      }); 
     } 
    }; 
} 

Vì vậy, bây giờ chúng tôi có thể đi như

var c = Object.create(null); 

extend(c).with(a); 
extend(c).with(b); 

Disclaimer: các mã được cung cấp giả sử chúng ta đang ở trong một ES5 hoặc ES5 shimed môi trường!

Các vấn đề liên quan