Friday, June 6, 2014

Javascript this and call that

The essentials video on 'this' says: " this refers to owner of the function we are executing or to the particular object the function is a method of." http://quirksmode.org/js/this.html

Here is one of simplest programs but it demonstrates the 'this' in two different uses:
var MyFunction = function () {
        console.log(this);
       
    }

MyFunction();
var obj = new MyFunction();

From each of the invocations, the two console outputs look like this:




Now, we have added a local function tryme() to MyFunction(). Again, it starts out by executing line 35 without a variable defining it.

















Since tryme() gets invoked without a variable assigned to it, we get the global this object. Likewise, when MyFunction() is invoked without a variable assigned to it, we get the global object.


Then, with a var obj getting  new MyFunction(), we have MyFunction owner of this, but inside tryme we get default value of this (i.e. window)


Now on to prototypes , its is an object in which other objects inherits properties.
Note that every object has a __proto__ in the debugger. Here is what it provides:









The prototype says if i do not have the property or method that is being requested, go to the 'object' that this field references and look for it.





















After highlighted line executes displaying f



Here we refdefine the class and instead have a prototype method for setName:
var MyFunction = function () {
this.first = 'chris';
this.last = 'cross';
    }

var f = new MyFunction();
MyFunction.prototype.setName = function (_first, _last) {
 this.first = _first;
 this.last = _last;
};

f.setName('cross', 'court');
console.log(f.first);
console.log(f.last);




First: (FROM http://jsfiddle.net/vzFT2/2/):







This value at line 54 before executing the call (global object of window):



Then we step into call at line 54:










the output of line 58 with the hello for property2 (the local_fn.call() populated this as the passed in method):



throw is executed on line 49 which is caught on line 57, line 63 is next function called and this from line 61 has global object:


http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

http://tech.pro/tutorial/2010/functional-javascript-part-3-apply-call-and-the-arguments-object

 Object.getOwnPropertyNames(Function.prototype);


var MyFunction = function (name, color ){
   var b =  {
  this:this, 
  name:name, 
  color:color
}
console.log(b);
    }
    MyFunction('ipod');
    MyFunction('ipod', 'black');



"call method: method of a function invokes the function with the context variable this set to the first argument passed in, and then each additional argument is passed into the function"

MyFunction('ipod', 'black');
MyFunction.call(window, 'ipod', 'black');

"apply method:invokes the function with the context variable this set to the first argument passed in. The second and final argument, however, will end up being the arguments of the function provided as an array"

ttp://www.smashingmagazine.com/2014/01/23/understanding-javascript-function-prototype-bind/


http://stackoverflow.com/questions/17017115/javascript-call-function

1 comment: