This document discusses JavaScript's prototype-based inheritance and the concept of constructor functions which create reusable object interfaces. It explains primitive and object types in JavaScript, as well as how methods and properties can be inherited using prototypes. Additionally, it touches on issues related to context within functions and best practices for creating and using constructor functions effectively.

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