JavaScript: estendere gli oggetti e gestire l'ereditarietà in modo cross-browser

ECMAScript 5 ha introdotto nuove e potenti funzionalità per gestire l'ereditarietà in JavaScript. Tuttavia, resta il problema di quei browser che non supportano queste funzionalità. In questo articolo vedremo come implementare una funzione di utility che ci permetta di estendere gli oggetti e di gestire l'ereditarietà in modo cross-browser.

La funzione è la seguente:

function extend(target, source) {
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    for (var propName in source) {
        if (hasOwnProperty.call(source, propName)) {
            target[propName] = source[propName];
        }
    }
    return target;
}

In pratica cloniamo le proprietà di un oggetto in un secondo oggetto restituito dalla funzione. Ecco alcuni esempi:

var A = {
    test: 'Test'
};

var B = new function() {
    this.sample = 'OK';
}();

var C = extend(A, B);
var D = extend({alert: 'Message'});

alert(C.test + ' ' + C.sample + ' ' + D.alert); // 'Test OK Message'
​

Potete visionare l'esempio finale in questa pagina.