Skip to content

Instantly share code, notes, and snippets.

@netpoetica
Created November 1, 2012 22:06
Show Gist options
  • Save netpoetica/3996971 to your computer and use it in GitHub Desktop.
Save netpoetica/3996971 to your computer and use it in GitHub Desktop.
Some simple examples to help grok scope in JS in terms of object literals, functions, prototypes and inheritance
// Grok JS Scope for Object Literals in Various Uses
var name = 'Keith Window';
var obj = {
name: 'Keith Object',
getObjName: function(){
return this.name;
},
getWindowName: function(){
return name;
}
};
console.log("-- Grok JS Scope for Object Literals in Various Uses --");
console.log(obj.getWindowName());
console.log(obj.getObjName());
console.log("--------FUNCTION SCOPE------------");
(function fn(o){
var name = 'Keith Self-executing Function';
console.log("Inside a self-executing function...");
console.log(name); // Get name from function scope
console.log(o.getWindowName()); // Window scope
console.log(o.getObjName()); // Object scope
}(obj));
console.log("--------------------");
function func(o){
var name = 'Keith Plain Old Function';
console.log("Inside a plain old function...");
console.log(name); // Get name from function scope
console.log(o.getWindowName()); // Window scope
console.log(o.getObjName()); // Object scope
}
func(obj);
console.log("--------------------");
var me = new func({
name: 'Keith Object Literal inside New Instance',
getObjName: function(){
return this.name;
},
getWindowName: function(){
return name;
}
});
console.log("---------INSTANCE AND CLASS SCOPE-----------");
function _Class(config){
// Private
var name = 'Keith Class';
// Public
this.name = (config.name || "Noname McGee" ) + ' Instance' ;
this.getClassName = config.getClassName || function(){
return name;
}
this.getInstanceName = config.getInstanceName || function(){
return this.name;
}
}
var keith = new _Class({
name: 'Keith'
});
console.log(keith.getClassName());
console.log(keith.getInstanceName());
var keith2 = new _Class({
name: 'Keith2',
getInstanceName: function(){
return this.name;
}
});
console.log(keith2.getInstanceName());
console.log("---------PROTOTYPE SCOPE-----------");
_Class.prototype.name = 'Keith Prototype';
_Class.prototype.getWindowName = function(){
console.log(">Evoked from prototype");
return name; // Window
}
_Class.prototype.getPrototypeName = function(){
console.log(">Evoked from prototype");
return _Class.prototype.name;
}
_Class.prototype.getInstanceName = function(){
console.log(">Evoked from prototype");
return this.name;
}
_Class.prototype.getClassName = function(){
console.log(">Evoked from prototype");
return new _Class({}).getClassName();
}
// Delete the instance vars first so JS will look to the prototyle
delete keith.getClassName;
delete keith.getInstanceName;
console.log(keith.getWindowName());
console.log(keith.getPrototypeName());
console.log(keith.getClassName());
console.log(keith.getInstanceName());
console.log("---------PROTOTYPAL INHERITANCE SCOPE-----------");
function Child(config){
this.name = config.name || 'Baby';
this.getInstanceName = function(){
return this.name;
}
}
Child.prototype = new _Class({ name: 'Daddy Keith' }); // You can't access this from Child
var babykakes = new Child({ name: 'Baby Keith' });
console.log(babykakes.getWindowName());
console.log(babykakes.getPrototypeName());
console.log(babykakes.getClassName());
console.log(babykakes.getInstanceName());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment