Java scriptconfusingbits

JAVASCRIPT: THE CONFUSING BITS
JSON 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
JavaScript 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 Scope
JavaScript 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 Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
Variable created in
the global scope

Function Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
Variable from the
global scope is used

Function Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
Variable from the global
scope was updated by
doSomething()

var x = 1; 
 
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 Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);

var x = 1; 
 
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
 
} 
 
doSomething(); 
 
Function Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
Variable created in
the global scope

var x = 1; 
 
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
 
} 
 
doSomething(); 
 
Function Scope
var x = 1; 
 
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; 
 
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
 
} 
 
doSomething(); 
 
Function Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
The function scope
variable was changed

var x = 1; 
 
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
 
} 
 
doSomething(); 
 
Function Scope
var x = 1; 
 
for (i = 1; i < 10; i++) { 
x += i; 
} 
} 
 
doSomething(); 
 
console.log(x);
The global scope
variable was
unchanged

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() { 
var foo = 10; 
} 
 
} 
 
bar();
Any reasonable
person would look at
this and say…

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
OK… I’m creating a
variable called foo

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
And a function called
bar()

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
Then I’m calling bar()

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
bar() checks to see if
foo is deﬁned

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
If foo isn’t deﬁned,
then it gets deﬁned
with a value of 10

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
Then foo gets logged
out

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
Consider this simple exampleWell, we know foo
is deﬁned, with a
value of 1.

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
So this should log a 1, right?

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
Wait… what?

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() { 
var foo = 10; 
} 
 
} 
 
bar();
JavaScript rewriting our code

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
JavaScript rewriting our codebar() is a function, so
it gets hoisted ﬁrst to
the top of the
execution context

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
In the case, it is the
global context

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
Next our variables
get hoisted.

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
if (foo == undefined) {
foo = 10; 
} 
 
} 
!
var foo;
foo = 1; 
 
bar();

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
var foo;
foo = 1; 
 
bar();
So foo receives a value of 10
because it is previously
undefined

Variable Hoisting
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
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() { 
var foo = 10; 
} 
 
} 
 
bar();
function bar() { 
var foo = 10; 
} 
 
} 
!
var foo = 1; 
 
 
bar();
function bar() {
var foo;
 
foo = 10; 
} 
 
} 
!
var foo;
foo = 1; 
 
bar();
var foo = 1; 
 
function bar() { 
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() { 
var foo = 10; 
} 
 
} 
 
bar(); 
It gets more confusing

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
We’ll make a small
change to this code

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
We’ll make a small
change to this code
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 
Did you see it?

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 
Right there. I took
out the var

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 
So now what
happens?

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 
Exactly what we
expected to happen
the ﬁrst time!

var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() { 
foo = 10; 
} 
 
} 
 
bar(); 
Huh?

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() { 
var foo = 10; 
} 
 
} 
 
bar(); 
Let’s look at this again

var
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
Here we might think that the
variable will only be created if
the if statement evaluates to
true

var
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() {
var foo; 
foo = 10; 
} 
 
} 
 
bar(); 
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() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() {
var foo; 
foo = 10; 
} 
 
} 
 
bar(); 
It doesn’t matter that the
variable already exists here,
because this is in a different
scope

var
var foo = 1; 
 
function bar() { 
var foo = 10; 
} 
 
} 
 
bar(); 
var foo = 1; 
 
function bar() {
var foo; 
foo = 10; 
} 
 
} 
 
bar(); 

No var
var foo = 1; 
 
function bar() { 
 
foo = 10; 
 
} 
 
bar(); 
One more time

No var
var foo = 1; 
 
function bar() { 
 
foo = 10; 
 
} 
 
bar(); 
One more time
When 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(); 
One more time
First it will look in the
function context

No var
var foo = 1; 
 
function bar() { 
 
foo = 10; 
 
} 
 
bar(); 
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 ﬁnd it.

No var
var foo = 1; 
 
function bar() { 
 
foo = 10; 
 
} 
 
bar(); 
One more time
function bar() { 
 
foo = 10; 
 
} 
 
bar(); 
It it doesn’t ﬁnd it in the global
scope, it will create it there.

PROTOTYPAL INHERITANCE
Objects from Objects

JavaScript Prototypes
Objects 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
Super-Class

Classical Inheritance
Sub-Class

Prototypal Inheritance
Creating 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

Prototypes are how
one object inherit
from another object

The inheritance
“feels” like classical
OO inheritance
when you use it

But internally, it is
very different

Prototypal InheritanceEvery object has a
prototype, an object
that it inherits from

The prototype of
an object is actually
a property of that
object

Unless you explicitly
create one without.

Even then, it still has
one, it is null

__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

__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

__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)

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Simpliﬁed example

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Create an object from
which we will inherit
properties and
methods

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Create a new object
that inherits from Car
(more on this in a bit)

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Assign a new property
to the new object

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Call an inherited
method, just to see if it
works

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
 
chevette.go(); 
Examine the new
object

The result

The result
var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
Our inherited
method ran

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
Car is, indeed, the
prototype of chevette

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
The new object

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
The new motor
property of the
object

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
But wait… why doesn’t our
object have a wheelCount
property or a go() method?

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
There they are, in the
objects __proto__
property

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
But wait… the motor there is
null. Can we access the
wheelCount? How does
JavaScript know which motor
to use?

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 

When 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

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
So if anything requests
the motor property from
our chevette

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
It will ﬁnd this one ﬁrst
in the chain

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
Not this one

var Car = { 
wheelCount: 4, 
motor: null, 
go: function() { 
} 
}; 
 
 
chevette.go();
 
If chevette didn’t have
a motor property, it
would ﬁnd the one in
the prototype

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 Prototypes
This 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 Prototypes
This 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

Are just regular functions
When combined with the new keyword they behave diﬀerently
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

function Car() { 
 
} 
 
Car.prototype.wheelCount = 4; 
Car.prototype.motor = null; 
 
Car.prototype.go = function() { 
console.log( 'Vroooom!!!!' ); 
} 
 
var chevette = new Car(); 
 
 
chevette.go(); 
console.log( chevette instanceof Car ); 
console.log( chevette ); 
!

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
Just a regular
function

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
We then modify the
function’s prototype to
add inheritable
properties and methods

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
When we use the new
keyword to create the
object…

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
Our regular function
becomes a factory
function.

!
Returns this
automatically

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
Here is where the
difference lies

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
The new object does
not have Car() as its
prototype

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
It has Car()’s prototype
as its prototype

function Car() { 
 
} 
 
 
} 
 
 
 
chevette.go(); 
!
So chevette.__proto__ == Car.prototype

__proto__ and prototype
Every 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

Behaves like our
Object.create() object

It has a __proto__ like our
Object.create() object

But now we have this
constructor property

And in there is where we ﬁnd the
prototype object from which we
are inheriting

So why all this prototype stuff?

You said that the constructor
automatically returns this, why
not just use that?

Let’s try it

this
function Car() { 
this.wheelCount = 4; 
this.motor = null; 
 
this.go = function () { 
console.log( 'Vrooommmm!!!' ); 
} 
 
} 
 
 
 
 
chevette.go(); 

this
function Car() { 
 
} 
 
} 
 
 
 
 
chevette.go(); 
Just a regular
function

this
function Car() { 
 
} 
 
} 
 
 
 
 
chevette.go(); 
We then modify the
function’s this object to
add properties and
methods

this
function Car() { 
 
} 
 
} 
 
 
 
 
chevette.go(); 
Remember, when we
use new, this is bound
to the new object

this
function Car() { 
 
} 
 
} 
 
 
 
 
chevette.go(); 
So hey! Look! Our new
object will have the
properties and methods,
right?

this
function Car() { 
 
} 
 
} 
 
 
 
 
chevette.go(); 
The answer isYES. But
they won’t be inherited

Works similarly to
our other examples

But, if we inspect the
object we see…

The object has its own
copy of the properties
and methods

It still has Car as its
__proto__

And it would still
inherit the properties
and methods of Car’s
prototype

But, in this case, Car has
no new properties and
methods

What we’ve created are
instance variables

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

So 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()

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
Our Car constructor

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
Of course, our
constructor is only a
constructor if we
remember to use new.

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
Add our methods to
the Car constructor’s
prototype

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
This method will be
inherited from the
prototype

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
But when it access
the this scope it will be
getting instance variables

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
We’ll create some new
Cars

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
And then do some stuff
with them

All of our inherited
methods worked
correctly

And our instance
variables are unique to
each instance

Back to Object.create()
We look at prototypal inheritance with Object.create()

But we didn’t look at instance variables

But we didn’t look at instance variables
Let’s see how our Car example might look with instance
variables

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
Simple object with
methods to be inherited

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
Use Object.create to
create new objects that
inherit from Car

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
One way of getting
instance variables

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
Is with this crap

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
These are called
property descriptors

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
If you don’t explicitly specify
writable, enumerable, or
conﬁgurable, they won’t be.

var Car = { 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
}), 
name : { value: 'F-150' }, 
}), 
}) 
]; 
 
}
So in this example, only
color can be changed after
the object is constructed

Other than the properties being non-
writable, non-conﬁgurable, and non-
enumerable (except for color) this
works the same as the other examples

But it sucks

var Car = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
I think this is a bit
easier to look at

var Car = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
We create an init()
method for all
objects to inherit

var Car = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
This works just like
our constructor
before

var Car = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
But we must
explicitly return this

var Car = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
Soooooo much
better than those
property descriptors

Still working

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

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

} 
 
}; 
 
}; 
 
}; 
 
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) 
]; 
 
console.log(cars);

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
We can use a
function

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
And modify its
prototype

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
Then use
Object.create()

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
Note we are passing in
Car’s prototype, not Car

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
Car’s prototype is
where the methods we
want to inherit are

} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
console.log(cars);
Unfortunately, the
constructor never runs,
these variables are not
added as instance variables

Still inheriting the
prototype’s methods

But no properties

function Car() {} 
 
Car.prototype.init = function (name, wheelCount, color, motorSize) { 
 
return this; 
} 
 
}; 
 
}; 
 
}; 
 
} 
 
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) 
]; 
 
}

 
 
return this; 
} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
}
We could use property
descriptors again… but
who’d want to?

 
 
return this; 
} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
}
We can use an init()
method again

 
 
return this; 
} 
 
}; 
 
}; 
 
}; 
 
} 
 
var cars = [ 
]; 
 
}
Then call it like we did
before after passing the
function prototype into
Object.create()

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 = { 
 
return this; 
}, 
}, 
}, 
}, 
} 
} 
 
var cars = [ 
]; 
 
}
Object.create(SimpleObject).init()

} 
 
}; 
 
}; 
 
}; 
 
return 'The ' +
} 
 
var cars = [ 
new Car('F-150', 4, 'Red', 8), 
new Car('Ram 3500', 6, 'Green', 10) 
]; 
 
 
cars[car].go(); 
}
new ConstructorFunction()

Closure Example
function makeAdder(howMuch) { 
return function (addTo) { 
return addTo + howMuch; 
} 
} 
 
//Make a 5 adder 
var add5 = makeAdder(5); 
 
//Make a 10 adder 
 
console.log( add5(10) ); // 15 
console.log( add10(20) ); //30

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
The makeAdder() function
will create and a return a
new function

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
Normally we would expect
that when this function
ﬁnishes running…

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
… that its scope would no
longer exist, including the
howMuch argument

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
When we call makeAdder()

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
howMuch is equal to 5

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
The function then returns
another function (but does not
execute it)

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
So how then, does howMuch
still exist when …

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
We call the new function

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
Because the returned
function is a closure

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
Not only does it have
access to its own scope,
where addTo exists

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
It has access to the scope
that it was in when it was
created

Closure Example
} 
} 
 
//Make a 5 adder 
 
 
Where howMuch exists and is
equal to 5

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 scope
A 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 scope
var name = "Global"; 
 
var testObj = { 
name : "Test Object 1", 
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 scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
Create a function that will return
the value of this.name

Changing this scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
Ensure name exists in
all available scopes

Changing this scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
Call about() on
testObj

Changing this scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
Add about() reference to a
global variable, call it again

Changing this scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
Add about() reference to
testObj2, call it again

Changing this scope
 
var testObj = { 
} 
} 
 
var testObj2 = { 
} 
 
 
 
All three about()s reference
the same function

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
 
testObj = { 
about : function(additionalString) { 
return this.name + ' ' + additionalString; 
} 
} 
 
testObj2 = { 
} 
 
console.log( testObj.about("is awesome") ); 
 
 
console.log( outerAbout.call(testObj, "Is Awesome") ); 
 
 
console.log( testObj2.about.apply(testObj, ["is awesome"]) );

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
Modiﬁed about() to
take an argument

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
Call about()
normally, will be
bound to testObj

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
Call about() about
from the global scope
using call()

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
Passing in testObj will
cause this to be bound
to testObj

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
We pass in additional
arguments, they will be
passed on to about()

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
Call about() from
testObj2 using apply()

Defining this
 
testObj = { 
} 
} 
 
testObj2 = { 
} 
 
 
 
 
 
We pass in additional
arguments as an array of
arguments, they will be
passed on to about()

Thank You
Questions?
!
Jason Dean
@jasonpdean
http://www.12robots.com

Java scriptconfusingbits

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java scriptconfusingbits (20)

More from ColdFusionConference (20)

Recently uploaded (20)

Java scriptconfusingbits