JAVASCRIPT: THE CONFUSING BITSJSON Dean
cf.Objective() 2014
Who am I?
This guy
Otherwise nobody
ARE YOU CONFUSED?I was
JavaScript is the most confusing thing I have ever tried to learn
JavaScript is not your parents’ programming language
No Classes
Unusual inheritance
Changing scopes
Weird object creation
Functions with functions
Unusual variable behavior
What this session isn’t
This session is not an intro to JavaScript
You have worked with JavaScript for a while
This session is not about politics, muscle cars, your DVR, or anything else you may find confusing
Scoping
ScopingJavaScript Scopes !== C-Style Scopes
JavaScript does not have block scope
CFML developers are used to this
If you create a variable it does NOT live in the context of the “block” where it was created (if, loop, etc).
The variable lives in the execution context where is was created
Execution context was a new term for me
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Variable created in the global scope
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Variable from the global scope is used
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Variable from the global scope was updated by
doSomething()
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Variable created in the global scope
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Another variable created in the scope of the doSomething()
function scope
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
The function scope variable was changed
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
The global scope variable was unchanged
var x = 1; function doSomething() { var x = 1; for (i = 1; i < 10; i++) { x += i; } console.log( "Function Scope Variable: " + x); } doSomething(); console.log( "Global Scope Scope Variable: " + x);
Function ScopeJavaScript has “function scope” or “execution context”
When a variable is created, it is created in that scope
The execution context where it was created
The function in which it was created
var x = 1; function doSomething() { for (i = 1; i < 10; i++) { x += i; } } doSomething(); console.log(x);
Variable Hoisting
“JavaScript is the world’s most misunderstood programming
language” !
- Douglas Crockford
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Any reasonable person would look at
this and say…
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
OK… I’m creating a variable called foo
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
And a function called bar()
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Then I’m calling bar()
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
bar() checks to see if foo is defined
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
If foo isn’t defined, then it gets defined with a value of 10
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Then foo gets logged out
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple exampleWell, we know foo is defined, with a
value of 1.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
So this should log a 1, right?
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
Wait… what?
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
Consider this simple example
So what happened?
What we just saw is confusing
Why is the value 10 and not 1?
The answer is a combination of
Function Scope
And variable hoisting
So what is variable hoisting?Function and Variable declarations get “hoisted” to the top of the executable context
Functions first
Then variables
So the JavaScript engine is rewriting our code
Let’s see how
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our codebar() is a function, so it gets hoisted first to
the top of the execution context
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
In the case, it is the global context
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
Next our variables get hoisted.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
Next our variables get hoisted.
Wait… did he says “variableS”? There’s one variable, it’s foo,
right?
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
So our foo variable from the global scope got hoisted,
though not very far.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
It is now at the top of the global execution context,
below any function from the same context.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
But what’s this? Our foo variable in the function also got
hoisted to the top of its execution context.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
So we (or at least, I) thought that the if statement was
checking to see if the global variable existed.
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
But after JavaScript’s rewrite we see it is actually checking to see if this variable is undefined.
!Is it?
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
A variable that has not been assigned a value is
of type undefined. !
-MDN
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
So foo is undefined! It exists, but has not been given a value
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
So foo receives a value of 10 because it is previously
undefined
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
This foo remains unchanged in the global scope. If we were to
log again here, we’d see a 1
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Variable Hoisting
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } bar();
JavaScript rewriting our code
function bar() { if (foo == undefined) { var foo = 10; } console.log(foo); } !var foo = 1; bar();
function bar() { var foo; if (foo == undefined) { foo = 10; } console.log(foo); } !var foo; foo = 1; bar();
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
We’ll make a small change to this code
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
We’ll make a small change to this code
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Did you see it?
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Right there. I took out the var
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
So now what happens?
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Exactly what we expected to happen
the first time!
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Huh?
So why did this happen?
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It gets more confusing
var foo = 1; function bar() { if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
var?So all we did was remove var from the variable assignment
Why does that matter?
Again, this will be familiar to CFML developers
The use of var will cause the creation of the variable in the local scope (the execution context)
Failure to use var will result in the JS engine searching through the scope chain for the variable
If it doesn’t find the variable by the time it reaches the global scope, it will create it there
var
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Let’s look at this again
var
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Let’s look at this againHere we might think that the variable will only be created if the if statement evaluates to
true
var
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Let’s look at this again
var foo = 1; function bar() { var foo; if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
But after that variable is hoisted we can see that it will
exist (though it will be undefined) regardless of the if
statement
var
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Let’s look at this again
var foo = 1; function bar() { var foo; if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
It doesn’t matter that the variable already exists here, because this is in a different
scope
var
var foo = 1; function bar() { if (foo == undefined) { var foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
Let’s look at this again
var foo = 1; function bar() { var foo; if (foo == undefined) { foo = 10; } console.log( "Function Scope Variable: " + foo); } bar(); console.log( "Global Scope Variable: " + foo);
No var
var foo = 1; function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
One more time
No var
var foo = 1; function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
One more timeWhen var is not used in the assignment, the JavaScript engine will search for the
variable instead of creating it
No var
var foo = 1; function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
One more time
First it will look in the function context
No var
var foo = 1; function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
One more time
Then it will look in the next scope in the chain, in this case,
it is the global scope and it will find it.
No var
var foo = 1; function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
One more time
function bar() { foo = 10; } bar(); console.log( "Global Scope Variable: " + foo);
It it doesn’t find it in the global scope, it will create it there.
PROTOTYPAL INHERITANCEObjects from Objects
JavaScript PrototypesObjects inherit from objects. What could be more object oriented than that? - Douglas Crockford
In JavaScript objects can be created from other objects
This can be accomplished in several ways
Many consider it very elegant
Classical Inheritance
Classical InheritanceSuper-Class
Classical Inheritance
Sub-Class
Classical Inheritance
Classical Inheritance
Prototypal InheritanceCreating objects that inherit from other objects
Can only be done with two object creation methods
Constructor Functions
Object.create()
Either one is acceptable, but Object.create is recommended by many experts
Object.create() is not supported by all browsers, but that is easily fixed with Webshim Lib or other polyfills
Prototypal Inheritance
Prototypal InheritancePrototypes are how one object inherit
from another object
Prototypal Inheritance
The inheritance “feels” like classical
OO inheritance when you use it
Prototypal InheritanceBut internally, it is
very different
Prototypal InheritanceEvery object has a
prototype, an object that it inherits from
Prototypal Inheritance
The prototype of an object is actually a property of that
object
Prototypal Inheritance
Unless you explicitly create one without.
Prototypal Inheritance
Even then, it still has one, it is null
Prototypal InheritanceEvery object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
Prototypal InheritanceEvery object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
Every object has a __proto__ property
In modern browsers
Prototypal Inheritance
__proto__
__proto__ should NEVER be used in production (it is deprecated)
__proto__ is a great learning tool though
We can use __proto__ to look at an object’s prototype in the console
You can also access an object’s prototype using Object.getPrototypeOf(object) (using Webshim Lib to support older browsers)
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Simplified example
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Create an object from which we will inherit
properties and methods
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Create a new object that inherits from Car (more on this in a bit)
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Assign a new property to the new object
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Call an inherited method, just to see if it
works
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Examine the new object
Prototypal Inheritancevar Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Prototypal Inheritance
Prototypal InheritanceThe result
Prototypal InheritanceThe result
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Our inherited method ran
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Car is, indeed, the prototype of chevette
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
The new object
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
The new motor property of the
object
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
But wait… why doesn’t our object have a wheelCount
property or a go() method?
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
There they are, in the objects __proto__
property
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
But wait… the motor there is null. Can we access the wheelCount? How does
JavaScript know which motor to use?
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Prototypal InheritanceWhen you request a property from an object:
JavaScript checks for that property in the object
If it does not exist, it checks the object’s prototype (__proto__)
If it does not exist, it checks the object’s prototype’s prototype
It continues until it reaches the top level object
This is referred to as the Prototype chain
If a property exists in more than one object in the prototype chain, the first one JS comes across is the one it will use
Prototypal Inheritance
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
So if anything requests the motor property from
our chevette
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
It will find this one first in the chain
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Not this one
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
If chevette didn’t have a motor property, it
would find the one in the prototype
Prototypal Inheritance
var Car = { wheelCount: 4, motor: null, go: function() { console.log( "Vrooooom!!!" ) }}; var chevette = Object.create( Car ); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( Car.isPrototypeOf( chevette ) ); console.log( chevette );
Functions as First Class Objects
In JavaScript, Functions are first-class objects
They can have properties and methods of their own
They can be passed as arguments
They can be returned from functions
They can be properties of other objects
Function PrototypesThis is where things get confusing
As we know, all objects have a prototype
That prototype is store internally in __proto__
Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’
The function prototype is NOT the function’s prototype (confused yet?)
The function object still has a __proto__ that contains its prototype
Function PrototypesThis is where things get confusing
As we know, all objects have a prototype
That prototype is store internally in __proto__
Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’
The function prototype is NOT the function’s prototype (confused yet?)
The function object still has a __proto__ that contains its prototype
The function prototype is the object that will become the __proto__ property of
any new object created from that function if that function is used as a
constructor function
Function PrototypesThis is where things get confusing
As we know, all objects have a prototype
That prototype is store internally in __proto__
Function Objects also have a prototype property, which we’ll refer to as the ‘Function Prototype’
The function prototype is NOT the function’s prototype (confused yet?)
The function object still has a __proto__ that contains its prototype
Constructor Functions
Are just regular functions
When combined with the new keyword they behave differently
When used with new the function becomes a factory and creates a brand new object
this becomes bound to the new object being created
this is then automatically return by the constructor
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
Just a regular function
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
We then modify the function’s prototype to
add inheritable properties and methods
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
When we use the new keyword to create the
object…
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
Our regular function becomes a factory
function. !
Returns this automatically
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
Here is where the difference lies
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
The new object does not have Car() as its
prototype
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
It has Car()’s prototype as its prototype
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
So chevette.__proto__ == Car.prototype
Constructor Functionsfunction Car() {} Car.prototype.wheelCount = 4; Car.prototype.motor = null; Car.prototype.go = function() { console.log( 'Vroooom!!!!' ); } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette ); !
__proto__ and prototypeEvery object has a __proto__
__proto__ is a property
__proto__ references the object that is being inherited from
Only Function objects have a prototype property (in addition to __proto__)
A Function’s prototype references the object that will become the __proto__ property of new objects created from this function
if used as a constructor
Constructor Functions
Constructor FunctionsBehaves like our
Object.create() object
Constructor Functions
It has a __proto__ like our Object.create() object
Constructor FunctionsBut now we have this constructor property
Constructor Functions
And in there is where we find the prototype object from which we
are inheriting
Constructor Functions
So why all this prototype stuff?
Constructor Functions
You said that the constructor automatically returns this, why
not just use that?
Constructor Functions
Let’s try it
Constructor Functions
this
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
Just a regular function
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
We then modify the function’s this object to
add properties and methods
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
Remember, when we use new, this is bound
to the new object
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
So hey! Look! Our new object will have the
properties and methods, right?
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
The answer is YES. But they won’t be inherited
this
function Car() { this.wheelCount = 4; this.motor = null; this.go = function () { console.log( 'Vrooommmm!!!' ); } } var chevette = new Car(); chevette.motor = { cylinder: 4 }; chevette.go(); console.log( chevette instanceof Car ); console.log( chevette );
Prototypal Inheritance
Prototypal InheritanceWorks similarly to our other examples
Prototypal Inheritance
But, if we inspect the object we see…
Prototypal Inheritance
The object has its own copy of the properties
and methods
Prototypal Inheritance
It still has Car as its __proto__
Prototypal Inheritance
And it would still inherit the properties and methods of Car’s
prototype
Prototypal Inheritance
But, in this case, Car has no new properties and
methods
Prototypal Inheritance
What we’ve created are instance variables
Prototypal Inheritance
Why not use this for everything?
When you use this new objects do not inherit those properties and methods
They get their own copies
If you change the this scope properties or methods in the prototype object the existing objects will not inherit the changes
The best option is to combine prototypal inheritance with instance variables to get what we want
Prototypal InheritanceSo let’s think about how Car should work
We’ll create a new object that uses inherited and instance properties and methods to meet our needs
Car spec:
Each instance of Car should have its own name, wheelCount, color, and motor
All instances of Car should have the same methods for go(), addFuel(), brake(), and about()
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Our Car constructor
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Of course, our constructor is only a
constructor if we remember to use new.
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Add our methods to the Car constructor’s
prototype
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
This method will be inherited from the
prototype
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
But when it access the this scope it will be getting instance variables
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
We’ll create some new Cars
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
And then do some stuff with them
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Prototypal Inheritance
Prototypal InheritanceAll of our inherited methods worked
correctly
Prototypal Inheritance
And our instance variables are unique to
each instance
Prototypal Inheritance
Back to Object.create()
Back to Object.create()
We look at prototypal inheritance with Object.create()
Back to Object.create()
We look at prototypal inheritance with Object.create()
But we didn’t look at instance variables
Back to Object.create()
We look at prototypal inheritance with Object.create()
But we didn’t look at instance variables
Let’s see how our Car example might look with instance variables
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Simple object with methods to be inherited
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Use Object.create to create new objects that
inherit from Car
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
One way of getting instance variables
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Is with this crap
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
These are called property descriptors
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
If you don’t explicitly specify writable, enumerable, or
configurable, they won’t be.
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
So in this example, only color can be changed after the object is constructed
var Car = { go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car, { name : { value: 'Chevette' }, wheelCount: { value: 4 }, color: { value : 'Black', writable: true }, motor: { value : { cylinders: 4 } } }), Object.create(Car, { name : { value: 'F-150' }, wheelCount: { value: 4 }, color: { value : 'Red', writable: true }, motor: { value : { cylinders: 8 } } }), Object.create(Car, { name : { value: 'Ram 3500' }, wheelCount: { value: 6 }, color: { value : 'Green', writable: true }, motor: { value : { cylinders: 10 } } })]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Back to Object.create()
Back to Object.create()
Other than the properties being non-writable, non-configurable, and non-enumerable (except for color) this
works the same as the other examples
Back to Object.create()
But it sucks
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
I think this is a bit easier to look at
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
We create an init() method for all
objects to inherit
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
This works just like our constructor
before
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
But we must explicitly return this
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Soooooo much better than those
property descriptors
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Back to Object.create()
Back to Object.create()
Still working
But wait… there’s more
But wait… there’s more
We can use the same functions we were using before for constructors with Object.create()
But wait… there’s more
We can use the same functions we were using before for constructors with Object.create()
The new object will still inherit from the function prototype
But wait… there’s more
We can use the same functions we were using before for constructors with Object.create()
The new object will still inherit from the function prototype
But the constructor function never actually fires, so we can’t use it from constructing the object with instance variables
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
We can use a function
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
And modify its prototype
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
Then use Object.create()
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
Note we are passing in Car’s prototype, not Car
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
Car’s prototype is where the methods we
want to inherit are
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
Unfortunately, the constructor never runs, these variables are not
added as instance variables
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype), Object.create(Car.prototype), Object.create(Car.prototype) ]; console.log(cars);
Back to Object.create()
Back to Object.create()
Still inheriting the prototype’s methods
Back to Object.create()
But no properties
Back to Object.create()
function Car() {}Car.prototype.init = function (name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; return this; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype).init('Chevette', 4, 'Black', 4), Object.create(Car.prototype).init('F-150', 4, 'Red', 8), Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
function Car() {}Car.prototype.init = function (name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; return this; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype).init('Chevette', 4, 'Black', 4), Object.create(Car.prototype).init('F-150', 4, 'Red', 8), Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
We could use property descriptors again… but
who’d want to?
function Car() {}Car.prototype.init = function (name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; return this; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype).init('Chevette', 4, 'Black', 4), Object.create(Car.prototype).init('F-150', 4, 'Red', 8), Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
We can use an init() method again
function Car() {}Car.prototype.init = function (name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; return this; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype).init('Chevette', 4, 'Black', 4), Object.create(Car.prototype).init('F-150', 4, 'Red', 8), Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Then call it like we did before after passing the function prototype into
Object.create()
function Car() {}Car.prototype.init = function (name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; return this; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ Object.create(Car.prototype).init('Chevette', 4, 'Black', 4), Object.create(Car.prototype).init('F-150', 4, 'Red', 8), Object.create(Car.prototype).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
So???So which one should I use?!?!?!
I bet you were hoping for an answer
A lot of experts will tell you to use Object.create(). But which way should you use Object.create()?
Some will tell you that new is evil, others will tell you the truth. new is not evil
Pick one way and stick with it
My preference is for Object.create(SimpleObject).init() or new ConstructorFunction()
var Car = { init : function (name, wheelCount, color, cylinders) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : cylinders }; return this; }, go : function () { console.log( 'Vrooommmm!!!' ); }, addFuel : function () { console.log( 'Fuel Added' ); }, brake : function () { console.log( 'Braking' ); }, about : function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } } var cars = [ Object.create(Car).init('Chevette', 4, 'Black', 4), Object.create(Car).init('F-150', 4, 'Red', 8), Object.create(Car).init('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
Object.create(SimpleObject).init()
function Car(name, wheelCount, color, motorSize) { this.name = name; this.wheelCount = wheelCount; this.color = color; this.motor = { cylinders : motorSize }; } Car.prototype.go = function () { console.log( 'Vrooommmm!!!' ); }; Car.prototype.addFuel = function () { console.log( 'Fuel Added' ); }; Car.prototype.brake = function () { console.log( 'Braking' ); }; Car.prototype.about = function() { return 'The ' + this.name + ' has a ' + this.motor.cylinders + ' cylinder motor and ' + this.wheelCount + ' wheels. ' + 'This one is ' + this.color; } var cars = [ new Car('Chevette', 4, 'Black', 4), new Car('F-150', 4, 'Red', 8), new Car('Ram 3500', 6, 'Green', 10) ]; for (var car in cars) { console.log(cars[car].about()); cars[car].addFuel(); cars[car].go(); cars[car].brake(); }
new ConstructorFunction()
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
The makeAdder() function will create and a return a
new function
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Normally we would expect that when this function
finishes running…
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
… that its scope would no longer exist, including the
howMuch argument
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
When we call makeAdder()
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
howMuch is equal to 5
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
The function then returns another function (but does not
execute it)
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
So how then, does howMuch still exist when …
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
We call the new function
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Because the returned function is a closure
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Not only does it have access to its own scope,
where addTo exists
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
It has access to the scope that it was in when it was
created
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Where howMuch exists and is equal to 5
Closure Examplefunction makeAdder(howMuch) { return function (addTo) { return addTo + howMuch; } } //Make a 5 addervar add5 = makeAdder(5); //Make a 10 addervar add10 = makeAdder(10); console.log( add5(10) ); // 15console.log( add10(20) ); //30
Closures
In basic terms, a Closure is a function that maintains the context in which is was created in addition to its own
I am not going to delve deeply into closures, Adam will do that later
The changing this scopeA function that is the property of another object is called a “Method” of that object
When a method is called as a property of an Object, this refers back to the object
The object assigned to this changes depending on where and how the function is called
NOT by where or how it is defined
If you don’t call a function correctly, it could break
This is a source of confusion for many developers (me included)
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Create a function that will return the value of this.name
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Ensure name exists in all available scopes
Ensure name exists in all available scopes
Ensure name exists in all available scopes
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Call about() on testObj
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Add about() reference to a
global variable, call it again
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Add about() reference to testObj2, call it again
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
All three about()s reference the same function
Changing this scopevar name = "Global"; var testObj = { name : "Test Object 1", about : function() { return this.name; } } var testObj2 = { name : "Test Object 2"} console.log( testObj.about() ); var outerAbout = testObj.about; console.log( outerAbout() ); testObj2.about = outerAbout; console.log( testObj2.about() );
Confusing
So what if we want to control the context?
We can define to which object this is bound
We can do this using call() and apply()
Call vs. Apply
Each takes the function context as the first argument
That is the object that will become this
call() takes each additional argument as parameters to the function
apply() takes only one extra argument which is array of values that will be used as parameters to the function
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Modified about() to take an argument
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Call about() normally, will be bound to testObj
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Call about() about from the global scope
using call()
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Passing in testObj will cause this to be bound
to testObj
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
We pass in additional arguments, they will be passed on to about()
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Call about() from testObj2 using apply()
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Passing in testObj will cause this to be bound
to testObj
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
We pass in additional arguments as an array of arguments, they will be passed on to about()
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Defining this var name = "Global"; testObj = { name : "Test Object 1", about : function(additionalString) { return this.name + ' ' + additionalString; } } testObj2 = { name : "Test Object 2" } console.log( testObj.about("is awesome") ); var outerAbout = testObj.about; console.log( outerAbout.call(testObj, "Is Awesome") ); testObj2.about = outerAbout; console.log( testObj2.about.apply(testObj, ["is awesome"]) );
Top Related