How to extend javascript objects?

This question already has an answer here:

How can I merge properties of two JavaScript objects dynamically? 55 answers

---

You can use jQuery's $.extend here.

Try following code

var BI = BI || {};
BI = {
  firstInit: function () {
    console.log('I am first init');
  }
}

$.extend(BI, {
  init: function () {
    console.log('I am init');
  }
});

console.log(BI);

Here is the DEMO

---

Out of the box, you can't do it that easily with good x-browser support.

However, jQuery does give you a means to have objects extend eachother: http://api.jquery.com/jQuery.extend/

So you would do:

var extended = $.extend({}, BI, {
   init: function () {
     console.log('I am init');
   }
});

The first argument (empty object, {} ) means that the properties of BI (the second argument) and the object you pass in will be combined in to the new object.

I wrote a small polymorphic extension to $.extend for this purpose which will allow you to extend from multiple objects, with the latter item taking precidence:

mergeObjects = function () {
  // Convert the arguments Array-like object to an actual array
  var args = Array.prototype.slice.call(arguments);

  // Only one item? If we give this to $.extend it'll extend jQuery, which is
  // not the desired result, so let's spit it back verbatim
  if (args.length === 1) {
    return args[0];
  }

  // We need to make sure we're always combining objects starting with a
  // completely empty one
  args.unshift(true, {});
  return jQuery.extend.apply(jQuery, args);
};

So, you can define your base module with common properties like so:

var MyBaseModule.prototype = {
  options: {},
  getOptions: function () {
    return this.options || {};
  },
  setOptions: function (options) {
    this.options = options;
  },
  log: function () {
    // do your logging stuff here
  },
  error: function () {
    // do your error handling stuff here
  }
};

And your actual modules:

var MyModule = function () {
  // constructor code here
};

var MyModule.prototype = mergeObjects(MyBaseModule, {
  // define your module's methods here
});

...now MyModule has "inherited" the options property and options getter and setter. You can instantiate the new module with new MyModule ;

If you want a vanilla way of doing it, this post may be useful

---

There are 2 ways of doing this in JavaScript. One is using prototype chaining, the other is to just copy the method. In this case both of your objects have the object as the prototype, so you need to copy the method:

BI2.init = BI1.firstInit;

To copy all methods and attributes in JQuery, use $.extend;

BI2 = $.extend({ init: function () { } }, BI1);

链接地址: http://www.djcxy.com/p/27342.html

上一篇: 合并Javascript对象

下一篇: 如何扩展JavaScript对象？