Objects and Prototypes
Notes from Jim Cooper's excellent PluraSight course on JavaScript Objects and Prototypes and Kyle Simpson's Advanced JavaScript class, and my random scribblings.
Use jsbin.com to play with JavaScript.
- Six Ways to Create Objects:
- Creating objects with Object Literals
'use strict';
var cat = {name: 'Fluffy', color: 'White'}
console.log(cat.name); //Fluffy
cat.age = 3; //we can create properties on the fly
cat.speak = function() {console.log("Meeooow") }//add functions directly
- Creating objects with constructors:
Calling "new" makes the function a constructor and does four magic things:
- Creates new object
- Sets the 'this' to its context
- Calls the function
- Returns a pointer to the new object
Here's Jim's example:
function Cat(name, color) {
this.name = name
this.color = color
}
var cat = new Cat('Fluffy','White');
console.log(cat);
This writes:
[object Object] {
color: "White",
name: "Fluffy"
}
- Creating objects with Object.create syntax
Object.create()
The "create()" method exists at the top level object cleverly named, "Object".
Object.create(proto[, propertiesObject])
"Object.create()" creates a new object and sets its prototype link to be the first parameter passed in. It also copies the properties from propertiesObject to the new object.
The "new" keyword is just syntactic sugar, we could do the previous example like this:
var cat = Object.create(Object.prototype,
{
name: {
value: 'Fluffy',
enumerable:true,
writable:true,
configurable:true
},
color: {
value: 'White',
enumerable:true,
writable:true,
configurable:true
}
});
console.log(cat);
o = {};
//is shorthand for
o = Object.create(Object.prototype);
- A Fallback Polyfill for Older Browsers
Older browsers may not have the "create()" method, so you can use a polyfill from developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
if (typeof Object.create !== "function") {
Object.create = function (proto, propertiesObject) {
if (!(proto === null || typeof proto === "object" || typeof proto === "function")) {
throw TypeError('Argument must be an object, or null');
}
var temp = new Object();
temp.__proto__ = proto;
Object.defineProperties(temp, propertiesObject);
return temp;
};
}
- Creating objects with the new ECMAScript 6
ES6 has new built in support for creating classes:
'use strict';
class Cat {
constructor(name, color) {
this.name= name
this.color = color
}
speak() {
console.log('Meeooow')
}
}
- Properties
- Bracket Notation
Besides the dot notation, 'this.color = "blue"' you can use the bracket notation. An advantage of the bracket notation is that you can use property names with embedded spaces:
cat['color'] = "blue";
cat['Eye Color'] = "green";
- Descriptors
JavaScript properties have 4 descriptors: value, writable, enumerable, and configurable.
- Value
This is simply the actual "value" of the property.
- writable
"writable" is a boolean that determines if the value can be written over.
var cat = {name: 'Fluffy', color: 'White'}
console.log(Object.getOwnPropertyDescriptor(cat, 'name')
Object {
value: Fluffy
writable: true
enumerable: true
configurable: true
}
To set a property of field use defineProperty
Object.defineProperty(cat, 'name', {writable: false})
var cat = {
name: {first: 'Fluffy', last: 'LaBeouf'}, color: 'White'
}
To prevent writing of an object:
Object.freeze(cat.name)
- enumerable
If "enumerable" set to false, the property will not show up in any list
Object.defineProperty(cat, 'name', {enumerable: false})
console.log(Object.keys(cat))
console.log(JSON.stringify(cat))//will not show enumerable-false items
How to Loop Over Enumerables:
for(var propertyName in cat) {
console.log(propertyName+':'+ cat[propertyName])
}
- configurable
If configurable is set to true you cannot change enumerable attr or configurable attr, or delete it, but can change writable attr.
Object.defineProperty(cat, 'name', {configurable: false}
- Getters and Setters
Let's create a new property and add a get() and set() methods.
var cat = {
name: {first: 'Fluffy', last: 'LaBeouf'}, color: 'White'
}
Object.defineProperty(cat, 'fullName',
{
get: function() {
return this.name.first + ' ' + this.name.last
},
set: function(value) {
var nameParts = value.split(' ')
this.name.first = nameParts[0]
this.name.last = nameParts[1]
}
});
console.log(cat.fullName); //"Fluffy LaBeouf"
cat.fullName = 'Top Cat'; //"Top Cat"
console.log(cat.fullName);
- Prototypes and Inheritance
We can add methods to individual objects. Here we create a 'last' method to an object, arr.
'use strict';
var arr = ['red','blue','green']
Object.defineProperty(arr, 'last', {get: function() {
return this[this.length-1];}});
console.log(arr.last);//"green"
But wouldn't it be nice to add a method to all arrays. We can by adding a method to 'Array's prototype which is shared by all the Array objects. If an individual object doesn't contain a function, it looks to its "prototype" to see if it has that function.
'use strict';
var arr = ['red','blue','green']
Object.defineProperty(Array.prototype, 'last', {get: function() {
return this[this.length-1];}});
console.log(arr.last); //"green"
console.log(['sour','sweet','bitter'].last); //"bitter"
All functions have a built-in property that points to another object called "prototype".
var myFunc = function() { }
console.log(myFunc.prototype); //[object Object] { ... }
Objects do not have a prototype property but they have a __proto__
-
function Cat(name, color) {
this.name = name;
this.color = color;
}
var fluffy = new Cat('Fluffy','White');
console.log(Cat.prototype);//[object Object] { ... }
console.log(fluffy.__proto__);//[object Object] { ... }
console.log(Cat.prototype === fluffy.__proto__);//true
Cat.prototype.age = 4;
console.log(fluffy.__proto__.age);//4
Important: A function's prototype is the object instance that will become the default prototype for all objects created using this function.
Jim has a great example of linking two classes, "Animal" and "Cat" into an inheritance chain. It's kinda tedious and error prone. Be very careful. This is why Kyle Simpson prefers OLOO. (more on that later).
'use strict';
function Animal(voice) {
this.voice = voice || 'grunt';
}
Animal.prototype.speak = function() {
console.log(this.voice)
}
function Cat(name, color) {
Animal.call(this, 'Meow');
this.name = name;
this.color = color;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
var fluffy = new Cat('Fluffy','White');
console.log(fluffy.__proto__.__proto__);
This prints:
[object Object] {
speak: function () {
window.runnerWindow.proxyConsole.log(this.voice)
}
}
The above code is a little cleaner with the new ES6 "class" structure:
'use strict'
class Animal {
constructor(voice) {
this.voice = voice || 'grunt'
}
speak() {
console.log(this.voice)
}
}
class Cat extends Animal {
constructor(name, color) {
super('Meow');
this.name = name;
this.color = color;
}
}
var fluffy = new Cat('Fluffy', 'White');
fluffy.speak();//"Meow"
JavaScript Scope
My notes from Plurasight's Advanced JavaScript by Kyle Simpson. His series of online books is available on github at github.com/getify/You-Dont-Know-JS.
A good reference site for JavaScript is the Mozilla Developer Network MDM at https://developer.mozilla.org/en-US/docs/JavaScript
A good place to learn styles of programming JS is
https://github.com/rwldrn/idiomatic.js.
The actual definitive spec is at http://www.ecma-international.org/ecma-262/5.1
- Details of Scope
Scope: where to look for things
JavaScript is not interpreted. Bash is interpreted. The JS compiler goes through all the code before starting execution. It finds declaration of variables and puts them into appropriate scope slots. Finds "var" and "function"s.
JS has function scope only (kinda).
lhs - left hand side (target)
rhs - right hand side (source)
"undefined" really means uninitialized
Kyle has a good way of explaining scope: When executing a function "foo" and encountering a variable "foo", JavaScript asks the question: "Hey, scope of 'foo' do you have a lhs reference to variable x?"
For a function declaration, the first thing in the statement is "function name()".
function expressions should have names
var foo = function bar() { ... }
Why use named functions and not anonymous?
- Can refer to itself for recurse
- Can find it in minified stack trace
- Is self-documenting
- eval
"eval" cheats lexical scope. putting an "eval" in your code, forces the engine to run slower in strict mode, code is more optimizable. Don't use eval unless absolutely necessary.
For example, using setTimeout with a string of code is bad practive since it invokes "eval()"; better to use with a function:
setTimeout("console.log('hi')", 1000);
setTimeout(function () {console.log('bye');}, 2000); //ok with func pointer
- "with" is "more evil than eval"
var obj = { a: 2, b: 3, c: 4 };
with(obj) {//implies an obj.
a = b + c;
}
"with" effects the scope and in strick mode, you can't use "with".
Immediately-invoked-function-expression (IIFE) pattern
This is a widespread pattern in JavaScript with a history here: benalman.com/news/2010/11/immediately-invoked-function-expression. It forces a function to run immediately - hense the catchy name.
var foo = "outside";
(function() {
var foo = "inside";
console.log("foo:"+foo)//prints "inside"
})();
"let" (ES6) and block scope
"let" will set the scope of the variable to the "for" loop (or outer braces), not the function scope as "var" would have done.
creates an implicit block on the "for".
function foo() {
for(let i=0; i<var.length; i++) {
...
}
}
warnings: "let" is not hoisted. If in the middle of an if statement block, the variable is only available after the "let". The area above the "let" declaration where the variable is not defined is called the "Temporal Dead Zone".
How to get a new scope? create a function, catch, or a brace with the "let" in ES6
"undefined" is a value, meaning a variable doesn't currently have a value.
"undeclared" never been declared. reference error.
hoisting
during compile phase, functions and then declarations are "hoisted" to the top.
var a=6;
function foo() { ... }
The compiler rearrages and hoists declarations to top
function foo() { ... }
var a;
a=6;
Why hoisting? mutual recursion would be impossible. like c header files.
The "this" pointer
Four Rules for how the 'this' keyword get bound.
Every function, while executing, has a reference to its current execution context called "this".
The value of the "this" pointer depends on the call site i.e., where the method gets invoked.
BTW, "this" is not like "this" in any other language.
- new
"new" turns a function into a constructor call and sets the this pointer
The "new" constructor does four things:
- A brand new empty object will be created
- The new object gets linked to another object
- The new object gets bound as the "this" keyword for the function call
- If the function doesn't return something, it will return "this"
- Explicit binding Rule
.call() or .apply() take as their first arg "this"
example of hardcoding
function foo() { console.log(this.bar); }
var obj = { bar: "bar" };
var orig = foo;
foo = function() { orig.call(obj); } //forces this context on foo
foo.call(obj)
utility to do hardbinding:
function bind(fn,o) {return function() { fn.call(o); };}
function foo() { console.log(this.bar); }
var obj = { bar: "bar" };
foo = bind(foo,obj);
foo();//bar
put bind on Function prototype
if(!Function.prototype.bind2) {
Function.prototype.bind2 =
function(o) {
var fn = this; //the original function
return function() {
return fn.apply(o,arguments);
};
};
}
var obj = { bar: "bar" };
foo = foo.bind2(obj);
foo("baz");
ES5 has a builtin "bind"
hardbind makes "this" be predictable
- Implicit binding Rule
- object calling function becomes the "this"
- Default Binding Rule
in strict mode, default "this" is set to the undefined value
not in strict, "this" defaults to global, which in browser is window
Summary: Four Questions to determine what is the "this" object
- Was the function called with the "new" keyword? use that object.
- Was it called with .call() or .apply(). Use explicit object
- Was the function called with an owning object? use that.
- Default: global object (except in strict mode)
Details in his second book "You Don't Know JS.com" - chapter 2
Closure
Closure comes from Lambda calculus. Closure is when a function "remembers" its lexical scope even when the function is executed outside that lexical scope.
function foo() {
var bar = "bar";
function baz() {
console.log(bar);
}
bam(baz);
}
function bam(baz) { baz(); }
foo();
//calling a method that returns a method that retains lexical scope (Closure)
function foo() {
var bar = "bar";
return function() {
console.log(bar);
};
}
function bam() {
foo()(); //call the returned method
}
bam();
The Classic Closure Example
for(var i=1; i<=5; i++) {
setTimeout(function() {
console.log("i: "+i);//writes 6 since i references outer scope
},i*1000)
}
for(var i=1; i<=5; i++) {
(function(i) {//use an IIFE
setTimeout(function() {
console.log("i: "+i);//writes 1,2,3,4,5
},i*1000);
})(i);
}
Classic Module Pattern
Two Characterics of Classic Module Pattern
1. Must have outer function wrapper
2. One or more functions that are returned that have closure over inner scope to access variables
example of module pattern
var foo = (function() {
var o = {bar: "bar" };
return {
bar: function() {
console.log(o.bar);
}
};
})();
foo.bar();
//example of modified module pattern
var foo = (function() {
var publicAPI = {
bar: function() {
publicAPI.baz();
},
baz: function() {
console.log("baz");
}
};
return publicAPI;
})();
foo.bar()
Object Orienting
OO Design Patterns
- Prototype
Every single "object" is built by a constructor function.
Each time a constructor is called, a new object is created.
A constructor makes an object linked to its own prototype. (In class-based system, new objects are instantiations of the class)
An object has a link called ".prototype" pointing to its prototype object. The prototype object has a link back to the object called ".constructor"
A object has a private link called "[[Prototype]]" which points to its prototype object.
Three ways to get a "new"'d object's prototype.
1. A object in all browsers except IE has a public link called "__prototype__" (called DunderProto) which points to its prototype object.(in ES6, adopted in IE11)
2. The standard way to get an object's prototype is "Object.getPrototypeOf(o)" (in IE9, ES5)
3. For IE8 (ES3): o.constructor.prototype (but .constructor and .prototype are writtable)
A function has a [[Prototype]] link (__proto__ in ES6 and all browsers except IE below 10) to the object "Function"'s prototype which contains "call()", "apply()", and "bind()".
- Inheritance
Classical inheritance copys the class to make object. Instead use "Behavior Delegation".
OLOO - Objects Linked to Other Objects
function Foo(who) {
this.me = who;
}
Foo.prototype.identify = function() {
return "I am " + this.me;
};
function Bar(who) {
Foo.call(this,who);
}
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.speak = function() {
alert("Hello, " + this.identify() + ".");
};
var b1 = new Bar("b1");
b1.speak(); //alerts: "Hello, I am b1."
//a slight improvement
var b1 = Object.create(Bar.prototype);
Bar.call(b1,"b1");
b1.speak();
//moving forward
bar b1 = Object.create(Bar);
b1.init("b1");
b1.speak();
