Created
November 1, 2012 22:06
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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