Javascript Scoping

apply.js

function Button(text){
  this.text = text;
}
Button.prototype.onClick=function(callback){
  //set fake x,y coordinates
  var x=0,y=0;
  callback.apply(this,[x,y]);
};
var button = new Button('The Button');
button.onClick(function(x,y){
  //can access the text pass into the constructor
  console.log(this.text);
  console.log(x);
  console.log(y);
});

bind.js

function Button(text){
  this.text = text;
}
Button.prototype.onClick=function(callback){
  //set fake x,y coordinates
  var x=0,y=0;
  //get a bound function
  var boundCallback = callback.bind(this,x,y);
  //call it
  boundCallback();
};
var button = new Button('The Button');
button.onClick(function(x,y){
  //can access the text pass into the constructor
  console.log(this.text);
  console.log(x);
  console.log(y);
});

call.js

function Button(text){
  this.text = text;
}
Button.prototype.onClick=function(callback){
  //set fake x,y coordinates
  var x=0,y=0;
  callback.call(this,x,y);
};
var button = new Button('The Button');
button.onClick(function(x,y){
  //can access the text pass into the constructor
  console.log(this.text);
  console.log(x);
  console.log(y);
});

callback.js

function Button(text){
  this.text = text;
}
Button.prototype.onClick=function(callback){
  //set fake x,y coordinates
  var x=0,y=0;
  callback(x,y);
};
var button = new Button('The Button');
button.onClick(function(x,y){
  //cannot access the text pass into the constructor
  console.log(this.text);
  console.log(x);
  console.log(y);
});

lexicalscope.js

var scope1 = function(){
  //scope 1
  var scope2 = function(){
    //scope2 creates a new scope and has access to scope1
    var scope3 = function(){
    //scope3 creates a new scope ans has access to scope2 and scope3
    }
  }
}

localscope.js

function localScope(){
  var localVariable = "local";
  
}
//create a new local scope object
var newLocalScope = new LocalScope();
//does not exist
console.log(newLocalScope.localVariable);

novar.js

var noVar = function(){
  x = 1;
}
noVar();
//1
console.log(x);
var withVar = function(){
  var y = 1;
}
withVar();
//not defined
console.log(y);

this.js

function thisObject(){
  //create variable and put it in the current execution context
  this.thisVariable = 'this';
}
//create an instance of the object
var thisInstance = new thisObject();
//has access to any variable bound to this
console.log(thisInstance.thisVariable);

variableoverride.js

var scope1 = function(){
  //create a variable in scope1
  var variableInScope1=0;
  var scope2 = function(){
  //override the variable in scope2
    var variableInScope1=1;
    //variableInScope1 will now reference 1 not 0!
  }
}

windowoverride.js

function noVar(){
  x = 1;
}
//set x
noVar();
console.log(x);
//also 1
console.log(window.x);