Take a dive into JavaScript prototypes from the perspective of constructor functions. Originally given at Charlotte JS on June 18, 2015.

1. JS Level Up: Prototypes Take your JavaScript to the next level

2. JavaScript has a very
simple type system
http://bit.ly/1QZ4QVX

3. JavaScript has a very
simple type system
http://bit.ly/1QZ4QVX
1. Primitive Types
2. Object Types

4. Primitive Types
http://bit.ly/1QZ4QVX
1. String
2. Number
3. Boolean
4. Undefined
5. Null

5. Object Types
http://bit.ly/1QZ4QVX
1. Object
2. Array
3. Function

6. * Some like to say everything is an object
Everything in JavaScript can act like an object

7. Every object in JavaScript links to a prototype object
console.log( “”.__proto__ === String.prototype ); // true!
That, if you’re wondering, is
pronounced “dunder proto"

8. Constructor Functions leverage this link
to create reusable interfaces (not UI)

9. Constructor Functions
• Constructor functions are used
to create new objects.
• Very useful when creating
multiple instances of a
particular object
var list = new Array( 1, 2, 3 );
list.push( 4 );
// list === [ 1, 2, 3, 4 ]

10. var list = new Array( 1, 2, 3 );
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
Where did
that push
method
come from?

11. var list = new Array( 1, 2, 3 );
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
Where did
that push
method
come from?
It’s inherited from Array.prototype!

12. var list = new Array( 1, 2,
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
new Array( 1, 2, 3 )

13. var list = new Array( 1, 2,
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
new Array( 1, 2, 3 )
A function is a block of code that is defined
once but can be invoked any number of times.

14. var list = new Array( 1, 2,
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
new Array( 1, 2, 3 )
Each function has a special this
keyword, the functions invocation context

15. var list = new Array( 1, 2,
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
new Array( 1, 2, 3 )
Functions used to initialize a new
object are called Constructor Functions

16. var list = new Array( 1, 2,
list.push( 4 );
// list === [ 1, 2, 3, 4 ]
new Array( 1, 2, 3 )
All functions - because they are objects - have
a prototype property that is a link to the prototype object

17. So let’s look at an example
function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon

18. Constructor Functions
function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
• Common convention is to
uppercase the first character of
the function name of a
constructor function
• The context of this within the
constructor function is the
newly created object
• No return statement required

19. Constructor Functions
function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
• We can add custom
functionality to the prototype
object of our function
• This added functionality is
inherited by each instance of
our constructor we create
• The context of methods added
to the prototype object are the
created instance itself

20. Constructor Functions
function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
• A new object instance is
created by invoking a
constructor function with the
new operator
• Here, we create vernon and
assign is the specified values
as its properties
• So, the value of vernon.name
would be “Vernon”
• We can now create as many
“Person’s” as we want, and
they will all be able to sayHi!

21. Constructor Functions
function Person ( name ) {
this.name = name; // this === window
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
• Invoking a constructor function
without the new operator has
unintended side effects
• The context of the newly
created object in the case of a
missing new, is window

22. Constructor Functions
function Person ( name ) {
if ( !( this instanceof Person ) ) {
return new Person( name );
}
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
• We can protect ourselves from
these side effects by using the
instanceof operator
• instanceof tests whether an
object has the prototype
property of a constructor in its
prototype chain
• Here, we test the context of
our constructor and return the
proper invocation if needed

23. function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log( “Hi! I’m “, this.name );
}
var vernon = new Person( “Vernon” );
vernon.sayHi(); // Hi! I’m Vernon
Person.prototype.sayBye = function () {
console.log( “Bye!” );
}
vernon.sayBye(); // Bye!

24. function Person ( name ) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log(
}
var vernon = new Person(
vernon.sayHi(); // Hi! I’m Vernon
Person
console
}
vernon
Prototypal Inheritance

25. Prototypal Inheritance
• All inheritance in JavaScript is
through the prototype object
• Object.prototype does not
inherit any properties
• All built-in constructors inherit
from Object.prototype
• Best understood by looking at
an example
http://bit.ly/1MNdeGU

26. Creates a new object with the specified prototype object and properties
Prototypal Inheritance | Object.create()
var obj = {}; // Inherits from Object.prototype
obj.foo = "bar"; // has an own property of foo
var obj2 = Object.create( obj ); // Inherits from obj and Object.prototype
obj2.bar = "baz"; // has an own property of bar
var obj3 = Object.create( obj2 ); // Inherits from obj, obj2 and Object.prototype
obj3.baz = "thud"; // has an own property of baz
console.log( obj3.foo ); // bar
console.log( obj3.bar ); // baz
console.log( obj3.hasOwnProperty( “foo” ) ); // false

27. var obj = {}; // Inherits from Object.prototype
obj.foo = "bar"; // has an own property of foo
var obj2 = Object.create
obj2.bar = "baz"; // has an own property of bar
var obj3 = Object.create
obj3.baz = "thud"; // has an own property of baz
console.log( obj3.foo ); // bar
console.log( obj3.bar ); // baz
console.log( obj3.hasOwnProperty(
This inheritance lookup is
done against the prototype chain
Prototypal Inheritance

28. var obj = {}; // Inherits from Object.prototype
obj.foo = "bar"; // has an own property of foo
var obj2 = Object.create
obj2.bar = "baz"; // has an own property of bar
var obj3 = Object.create
obj3.baz = "thud"; // has an own property of baz
console.log( obj3.foo ); // bar
console.log( obj3.bar ); // baz
console.log( obj3.hasOwnProperty(
We can leverage this to
create scalable objects
Prototypal Inheritance

29. var obj = {}; // Inherits from Object.prototype
obj.foo = "bar"; // has an own property of foo
var obj2 = Object.create
obj2.bar = "baz"; // has an own property of bar
var obj3 = Object.create
obj3.baz = "thud"; // has an own property of baz
console.log( obj3.foo ); // bar
console.log( obj3.bar ); // baz
console.log( obj3.hasOwnProperty(
Let’s look at
another example
Prototypal Inheritance

30. var User = function( details ) {
details = details || {};
this.firstname = details.firstname;
this.lastname = details.lastname;
};
Let’s create a User constructor function

31. var User = function( details ) {
details = details || {};
this.firstname = details.firstname;
this.lastname = details.lastname;
};
User.prototype.logName = function() {
console.log( this.firstname + " " + this.lastname );
};
Now, we’ll add a logName method to the prototype

32. var User = function( details ) {
details = details || {};
this.firstname = details.firstname;
this.lastname = details.lastname;
};
User.prototype.logName = function() {
console.log( this.firstname + " " + this.lastname );
};
var john = new User( { firstname: "John", lastname: "Doe" } );
Finally, let’s create an instance of a User

33. var User = function( details ) { … };
User.prototype.logName = function() { … };
var john = new User( { firstname: "John", lastname: "Doe" } );
var Admin = function( details ) {
this.firstname = details.firstname;
this.lastname = details.lastname;
this.fullaccess = true;
};
Now, let’s add an Admin constructor function

34. var User = function( details ) { … };
User.prototype.logName = function() { … };
var john = new User( { firstname: "John", lastname: "Doe" } );
var Admin = function( details ) {
this.firstname = details.firstname;
this.lastname = details.lastname;
this.fullaccess = true;
};
Admin.prototype = new User();
Admin.prototype.constructor = Admin;
We can inherit functionality from our User function

35. var User = function( details ) { … };
User.prototype.logName = function() { … };
var john = new User( { firstname: "John", lastname: "Doe" } );
var Admin = function( details ) {
this.firstname = details.firstname;
this.lastname = details.lastname;
this.fullaccess = true;
};
Admin.prototype = new User();
Admin.prototype.constructor = Admin;
var jane = new Admin( { firstname: "Jane", lastname: "Doe" } );
jane.logName(); // Jane Doe
Our new Admin instance has access to logName

36. Inheritance and
the prototype chain
• ECMAScript 6 introduces a
new set of keywords
implementing “classes” in
JavaScript. It’s important to
note that these classes are still
prototype based.
• Object.create is another
method of inheritance
• Do not extend native
prototypes unless you are back
porting newer features of
JavaScript to older engines
http://bit.ly/1MNdeGU

37. Thanks for listening! @vernonk