为什么在不使用原型，调用或应用的情况下不能向对象添加属性？

Question

Take the following code snippet:

Foo() {}
var bar = new Foo(); /* uses Foo as constructor for new object */

Now I create a function that will add the property x to my object and assign its value to 2;

function addX() {
this.x = 2;
}

My question is, why DOESN'T this succeed in adding the x property to the bar object:

addX(bar);

while this does:

addX.apply(bar);

Shouldn't they do the same thing?

I'm a junior javascript programmer trying to get a better understanding of the language and OOP in general. There's no corresponding real-world example, ie I'm not currently in the middle of a project. I've just been learning what I can and cannot do with objects and I'm trying to figure out why.

Answer 1

A function if "applied" to an object, would mean that the function will get "this" variable which would be the object itself. Whereas just calling addX(bar) passes bar as a parameter to the function.

So had addX been written like this:

function addX(barObject) {
   barObject.x = 2;
}

The call addX(bar) would have worked.

Whereas,in your example addX.apply(bar), internally does this:

// apply does the following internally
bar.addX =  function()
{ 
   this.x = 2;
}
bar.addX()
// end of scope for apply

hence addX(bar) does not do anything in your example, because in that case, "this" does not belong to anything but the function itself.

Answer 2

Modify your addX method as follows. Calling your previous method does not pass the context as parameter.

function addX(barx) {
barx.x = 2;
}

Answer 3

Every function has a special 'this' object. When a function is called, the this value is set, which is a reference to the context object the function is operating on (when a function is called in global scope of a web page, this this object points to window object). apply() method of a function is used to call the function with a particular this value. Calling the function with apply method supplied with the 'bar' argument sets the this value of the function to the bar object.