jQuery extend object with Prototype object

Question

I try to aggregate a Prototype object to a JavaScript normal object:

var ModuleA = function( data ) {
    this.data = data;
};

ModuleA.prototype.funcA = function() {
    alert( JSON.stringify( this ) );
}

var myMainObject = { 
    list: []
};

$.extend( myMainObj <--------- ???ect, new ModuleA( 'Haha' ) );

myMainObject.funcA();

Now the myMainObject will have data property and funcA function, since I merge to the myMainObject.

When I execute myMainObject.funcA, the this arguments actually is myMainObject!

To my understanding, when new a Prototype object, the function will bind to the object created with the new and pass to the constructor.

But with the jQuery extend, the this arguments is not the new object, but point to the myMainObject, which confuse me.

Is there any idea?

My actual intention is to let ModuleA functions has its own scope without jumble up with the myMainObject attribute. — ZeroX
– ZeroX, Commented May 24, 2015 at 9:07

T.J. Crowder · Accepted Answer · 2015-05-24 09:06:22Z

1

When I execute myMainObject.funcA, the this arguments actually is myMainObject !!!

Right. That's how this works in JavaScript. This expression:

myMainObject.funcA();

looks up the funcA property on myMainObject, getting back a function reference, and then calls that function, setting this during the call to the object that it got the function from (myMainObject). That's the normal way this is assigned.

If you want this to be something else, you can use Function#bind to create a function with this baked into it, or Function#call or Function#apply to call a function using a specific this value, but you probably don't want to in your scenario.

More about this (on my blog):

Mythical methods
You must remember this (I need to update this to talk about ES6 arrow functions)

Re your comment:

My actual intention is to let ModuleA functions has its own scope without jumble up with the myMainObject attribute

Then don't jumble ModuleA into myMainObject. Sounds like you want composition instead:

var myMainObject = { 
    list: [],
    moda: new ModuleA()
};

myMainObject.moda.funcA();

answered May 24, 2015 at 9:06

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ZeroX Over a year ago

Wow, i did not know that javascript did it differently from bind function

ZeroX Over a year ago

Ya, composition is another way. My scenario is to have my object inherit from PublishSubscribe object which will have the function to subscribe and dispatch Event to all subscriber. composition require client code to know where to find the function, which not so right.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

$.extend doesn't call constructors, it just copies the data of the object. From the documentation:

Properties that are an object constructed via new MyCustomObject(args), or built-in JavaScript types such as Date or RegExp, are not re-constructed and will appear as plain Objects in the resulting object or array.

For needs that fall outside of this behavior, write a custom extend method instead, or use a library like lodash.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 24, 2015 at 9:06

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

jQuery extend object with Prototype object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related