JavaScript Equivalent of Jquery's Extend Method

JavaScript equivalent of jQuery's extend method

To get the result in your code, you would do:

function extend(a, b){
    for(var key in b)
        if(b.hasOwnProperty(key))
            a[key] = b[key];
    return a;
}

Keep in mind that the way you used extend there will modify the default object. If you don't want that, use

$.extend({}, default, config)

A more robust solution that mimics jQuery's functionality would be as follows:

function extend(){
    for(var i=1; i<arguments.length; i++)
        for(var key in arguments[i])
            if(arguments[i].hasOwnProperty(key))
                arguments[0][key] = arguments[i][key];
    return arguments[0];
}

What is the equivalent of jQuery $.extend() in Ember.js?

Yes there is: Ember.copy

var clonedObj = Ember.copy(originalObj, true);

Object.assign vs $.extend

The two key differences are the optional boolean for deep merge which is recursive on the jQuery $.extend method (where false is not supported?!) ...

let object1 = {
  id: 1,
  name: {
    forename: 'John',
    surname: 'McClane'
  },
};

let object2 = {
  id: 2,
  name: {
  }
};

// merge objects
let objExtend = $.extend(true, {}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name.forename); // "John"
console.log(objAssign.name.forename); //  undefined

Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

Example: JsFiddle

The second is the $.extend method ignores undefined ...

let object1 = {
  id: 1,
  name: 'hello world'
};

let object2 = {
  id: 2,
  name: undefined
};

// merge objects
let objExtend = $.extend({}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name); // "hello world"
console.log(objAssign.name); //  undefined

Example: JsFiddle

Docs

MDN: Object.assign(target, ...sources)

jQuery: jQuery.extend([deep], target, object1 [, objectN])

Additionally:

If you are looking for a way to deep merge objects without jQuery, this answer is excellent:

How to deep merge instead of shallow merge?

Example: JsFiddle

How to deep merge using Object.assign with ES6:

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

function mergeDeep(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return mergeDeep(target, ...sources);
}

Something like jQuery.extend() but standalone?

If all you need is extend, then it's pretty simple to write that in a couple of lines. If you want recursive extension, it's tricky to do that completely generically if you want have circular structures, objects with complex prototype chains, etc. If it's just some nested plain objects, then this should work:

function extend (target, source) {
  target = target || {};
  for (var prop in source) {
    if (typeof source[prop] === 'object') {
      target[prop] = extend(target[prop], source[prop]);
    } else {
      target[prop] = source[prop];
    }
  }
  return target;
}

If you're looking for a lightweight library that does this (minus the recursion, for the reasons listed above) and other similar functions not provided by javascript, look at Underscore which is available via NPM for node too.

Extend jQuery's .val() method to non-input elements

To overwrite the $.val() method you need to do something like $.fn.val = function () {...}. Here is a demo: http://jsfiddle.net/CRRP5. I would recommend saving the old .val() method in a variable so you can use it when .val() is called on a regular form input.

How to extend javascript objects?

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

Jquery: extend an object to modify a method

Javascript uses prototypal inheritance, so you can make object2 inherit object1's properties and methods by doing

object2.prototype=object1;

this means that object2 will inherit all the properties and methods of object1, and any overwritten methods can be accessed at object2.prototype.method()

so parent::whatever(); is equivalent to this.prototype.whatever(); when calling from the scope of object2.

---

var object1 = {
    whatever : function(){
        console.log('first object method');
    }
}

var object2 = {
    whatever : function(){
        console.log('second object method');
        this.prototype.whatever(); // Equivalent to parent::whatever(); 
    }
}

object2.prototype=object1; // Makes object2 inherit object1's properties and methods

object2.whatever(); // "second object method" "first object method"

---

Related Topics