Category: javascript

The this Keyword Runtime Semantics – Part 2

Published on by bhoomabrsrLeave a comment

Every Function Object Has Methods apply(), call() and bind().
All these methods useful to call an arbitrary function as if this function was declared as a method on a target object.
[table class=”table table-striped”]
Function,Function invoke,Scope Change,How to call,Args passing
Apply(),Yes,Yes,”Function.prototype.apply ( thisArg, argArray )”,As Array[]
Call(),Yes,Yes,”Function.prototype.call (thisArg , …args)”,As comma separated
Bind(),No,Yes,”Function.prototype.bind ( thisArg , …args)”,As comma separated
[/table]

share = {
 a52WeekHigh:100,
 a52WeekLow:55,
 publishValue:function (demandIncrease){
 var d = demandIncrease? '. Demand Increase By:'+demandIncrease+'%' : ''
 console.log("52 week High and Low:"+ this.a52WeekHigh+'-'+this.a52WeekLow + d);
 }
}
pqrShare={
 a52WeekHigh:99,
 a52WeekLow:17
}
share.publishValue(); //52 week High and Low:100-55
share.publishValue.apply(pqrShare); //52 week High and Low:99-17
share.publishValue.apply(pqrShare,[12]);
share.publishValue.call(pqrShare,13);
var bond = share.publishValue.bind(pqrShare,14);//function won't invoke
bond(); //52 week High and Low:99-17. Demand Increase By:14%

Output will come as following:

52 week High and Low:100-55
52 week High and Low:99-17
52 week High and Low:99-17. Demand Increase By:12%
52 week High and Low:99-17. Demand Increase By:13%
52 week High and Low:99-17. Demand Increase By:14%

The this Keyword Runtime Semantics

Published on by bhoomabrsrLeave a comment

A function’s this keyword in JavaScript have a different behavior than other languages, even it will represent different behavior between strict mode and non-strict mode. In JavaScript while executing a function this keyword plays a vital role.
Global Ref:
If there is no parent/owner for a function, it will execute as global function.

var noParentFunction = function () {
console.log(toString.call(this)); // [object Window]
};
//Call Method
noParentFunction();

When we execute noParentFunction function it will yield this object reference as window(global ref). As per JavaScript lexical rules if there is no specific parent of a function it will fall under window. There is no deference between below two statements:

noParentFunction();
Window.noParentFunction();

Object Ref:
Whenever we call parent.child() child function always get this scope as parent’s. now we create a parent, it will have function child:

var parentClass = {
name:'parent',
childMethod: function (){console.log(this === parentClass);} //->true
};
// call the method
parentClass.childMethod();//->true

Inherited Function:
when we create parent function, use this keyword inside to transfer your properties when object inherited.

var parentClass = function(){
//attach childMethod to parentClass scope by using this keyword
this.childMethod= function (){console.log(this);};
};
// Inherited parent1
var parent1 = new parentClass();
// call the method
parent1.childMethod();//->parentClass

Inherited function with prototype:
Same as above inherited prototype methods this scope works.

var parentClass = function(){
//attache childMethod to parentClass scope by using this keyword
this.childMethod= function (){console.log(this);};
};
//add prototype methode
parentClass.prototype.parentPrototype = function ()
{
console.log(this);
}
// call the method
var parent1 = new parentClass();
parent1.childMethod();//->parentClass
parent1.parentPrototype();//->parentClass

Directives scope in AngularJS

Published on by bhoomabrsrLeave a comment

Scope is context where the model is stored so that controllers, directives and expressions can access it. By default, each directive inherits its parent’s scope, which is passed to it in the link function. below three options are described scope creation in angularjs,

Scope:false (default) which basically tells AngularJS that the directive scope is the same as the parent scope.
Example: If scope:false means it will simply return same address location of parent scope.
working Fiddle.

return {
    restrict: 'A',
      scope:false,
    template: '',
    link: function(scope, element, attrs) {
        console.log(scope);
        scope.data = scope.data + " + directive postfix";
        child = scope;
    }

Result:

 image01

Scope:true creates new scope object but never override parent properties. The directive thus gets access to all the variables and functions from the parent scope, but any modifications it makes are not available in the parent.
Example: create a child scope prototypically inherited with scope: true.
working Fiddle.

return {
    restrict: ‘A’,
      scope:true,
    template: ”,
    link: function(scope, element, attrs) {
        console.log(scope);
        scope.data = scope.data + ” + directive postfix”;
        child = scope;
    }

Result:

image00

Scope:{} (isolated scope) This scope does not inherit anything from the parent, and any data that the parent scope needs to share with this directive needs to be passed in through HTML attributes
Example: create an isolated scope with scope: {} then you can bind some property to parent scopes with ‘@’, ‘&’, ‘=’.
working Fiddle.

return {
    restrict: ‘A’,
      scope:{},
    template: ”,
    link: function(scope, element, attrs) {
        console.log(scope);
        scope.data = scope.data + ” + directive postfix”;
        child = scope;
    }

Result:

image02