javascript - How does "this" keyword work within a function? -

i came across interesting situation in javascript. have class method defines several objects using object-literal notation. inside objects, this pointer being used. behavior of program, have deduced this pointer referring class on method invoked, , not object being created literal.

this seems arbitrary, though way expect work. defined behavior? cross-browser safe? there reasoning underlying why way beyond "the spec says so" (for instance, consequence of broader design decision/philosophy)? pared-down code example:

// inside class definition, object literal, have function: onrender: function() {      this.menuitems = this.menuitems.concat([         {             text: 'group module',             rptletdiv:         },         {             text: 'group status',             rptletdiv:         }]);     // etc } 

cannibalized post of mine, here's more ever wanted know this.

before start, here's important thing keep in mind javascript, , repeat when doesn't make sense. javascript not have classes (es6 class syntactic sugar). if looks class, it's clever trick. javascript has objects , functions. (that's not 100% accurate, functions objects, can helpful think of them separate things)

the this variable attached functions. whenever invoke function, this given value, depending on how invoke function. called invocation pattern.

there 4 ways invoke functions in javascript. can invoke function method, function, constructor, , apply.

as method

a method function that's attached object

var foo = {}; foo.somemethod = function(){     alert(this); } 

when invoked method, this bound object function/method part of. in example, bound foo.

as function

if have stand alone function, this variable bound "global" object, window object in context of browser.

 var foo = function(){     alert(this);  }  foo(); 

this may what's tripping up, don't feel bad. many people consider bad design decision. since callback invoked function , not method, that's why you're seeing appears inconsistent behavior.

many people around problem doing like, um, this

var foo = {}; foo.somemethod = function (){     var that=this;     function bar(){         alert(that);     } } 

you define variable that points this. closure (a topic it's own) keeps that around, if call bar callback, still has reference.

note: in use strict mode if used function, this not bound global. (it undefined).

as constructor

you can invoke function constructor. based on naming convention you're using (testobject) may you're doing , what's tripping up.

you invoke function constructor new keyword.

function foo(){     this.confusing = 'hell yeah'; } var myobject = new foo(); 

when invoked constructor, new object created, , this bound object. again, if have inner functions , they're used callbacks, you'll invoking them functions, , this bound global object. use var = trick/pattern.

some people think constructor/new keyword bone thrown java/traditional oop programmers way create similar classes.

with apply method

finally, every function has method (yes, functions objects in javascript) named "apply". apply lets determine value of this be, , lets pass in array of arguments. here's useless example.

function foo(a,b){     alert(a);     alert(b);     alert(this); } var args = ['ah','be']; foo.apply('omg',args);