-1

I previously posted a similar question in context to jquery but jquery's inner handling of this confused matters. So to keep it plain and simple consider:

function someCallbackFunction() {
    this.name = "Tom";
}

anObject.method(someCallbackFunction);

what is the "this" of someCallbackFunction pointing to when invoked by "anObject"?

That is, when the function "some callback function" is being invoked by an object (within one of its function), what is "this" of (inner) "some callback function" pointing to then? [not the "this" of "outer" (AnObject.function - which is of course pointing to AnObject or another invoking function when called with call or apply)]

I think it should point to the global object (window object) since this inside a closure will point to the global DOM window object (in non-strict mode) or be undefined (in strict mode).

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Tomatoes
  • 91
  • 1
  • 7

3 Answers3

1

this depends on the way the function is called. If you call it like mycallback(), this will refer to window object. If you call it by mycallback.call(object) (or apply), this will refer to object.

http://jsfiddle.net/ydqZ8/1/

function callback()
{    
    alert(this.toto);
}

window.toto = 0;
var obj = {
    toto : "TOTO" 
};

callback(); // displays 0
callback.call(obj);    // displays TOTO
dooxe
  • 1,481
  • 12
  • 17
  • yes I get that, but when the function "some callback function" is being invoked by an object (within one of its function), what is `this` of (inner) "some callback funtion" pointing to then? [not the `this` of "outer" (AnObject.function - which is of course pointing to AnObject or another invoking function when called with call or apply)] – Tomatoes Nov 27 '13 at 15:19
  • I have just answered you. It depends on the way that `some callback function` is called inside your method `method`. Like I have just explained : http://jsfiddle.net/ydqZ8/2/ – dooxe Nov 27 '13 at 15:25
  • doxee, what if it was = anObject.method(anotherObject.someCallbackFunction); – Tomatoes Nov 27 '13 at 15:27
  • Please see the fiddle to get the answer : http://jsfiddle.net/ydqZ8/3/ Keep in mind that a function is just `an object`. So when you call `myobj.method(obj2.func)`, you just pass a function (`func`) as parameter, not a function with an object context. – dooxe Nov 27 '13 at 15:29
0

Try this:

var self = this;
some callback function () {
    self.name = "Tom";
}

Object.function (some callback function);
Mykyta Shyrin
  • 312
  • 1
  • 14
  • I know that your answer works but I want to know what the `this` is pointing to initially. DOM object or not? – Tomatoes Nov 27 '13 at 15:16
  • 4 sure this works best practices is _this see https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md – Cracker0dks Nov 27 '13 at 15:16
0

Generally 'this' is pointing to the object hosting the method called. (You may override this by function.call(thisObject, arg1, arg2) or function.apply(thisObject, [argList]).)

A simple example:

var myObject = {
  value: 1,
  report: function() {
    return "value: " + this.value;
  }
}

console.log( myObject.report() ); // "value: 1"

Should be quite clear.

Using a constructor and a prototype, it would be:

function Reporter(v) {
  this.value = v;
}

Reporter.prototype = {
  report: function() { return "value: " + this.value; }
};

var myObject = new Reporter(1);
console.log( myObject.report() ); // "value: 1"

Works just the same. 'this' is the object created by calling "new Reporter(1)" and the 'this' in the prototype is referring to the object which's method "report()" is called. (The prototype comes only into play, if there's no method "report()" defined in the "myObject" as an own property.)

Now a bit more nested:

function ComplexReporter(v) {
  this.value = v;
}

ComplexReporter.prototype = {
  report: function() { return "value: " + this.value; },
  utils: {
    innerReport: function() { return "value: " + this.value; }
  }
};

var myObject = new ComplexReporter(1);
console.log( myObject.report() ); // "value: 1"
console.log( myObject.utils.innerReport() ); // "value: undefined"

The first call is just as above and provides the expected result.

In the second call, 'this' is not as might be expected 'myObject', but 'myObject.prototype.utils', which has no property @value of any kind. This is effectively

ComplexReporter.prototype.utils.innerReport.apply( myObject.prototype.utils, [] );

So as a rule of thumb, 'this' is the entity described by the path to the very last identifier before the last dot when invoking an object's method in dot-notation.

The last example without the prototype (to make it a bit simpler again):

var myComplexObject = {
  value: 1,
  report: function() {
    return "value: " + this.value;
  },
  utils: {
    innerReport: function() {
      return "value: " + this.value;
    }
  }
}

console.log( myComplexObject.report() ); // "value: 1"
console.log( myComplexObject.utils.innerReport() ); // "value: undefined"
// same as myComplexObject.utils.innerReport.apply( myComplexObject.utils, [] );
console.log( myComplexObject.utils.innerReport.apply( myComplexObject, [] ) ); // "value: 1"

And: 'this' is always evaluated the very moment, the function is called (so you can't save the contextual meaning of 'this' when constructing a closure).

I hope, these examples helped a bit in understanding how 'this' works ...

P.S.: If the this-object provided with a call to function.call() or function.apply() is undefined or null, the global object ('self', in a browser identical to 'window') is used as 'this'.

masswerk
  • 261
  • 1
  • 4