Byte-Sized-Chunks: Dynamic Prototypes in Javascript
3.9 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,399 students enrolled

Byte-Sized-Chunks: Dynamic Prototypes in Javascript

Master Javascript's way of doing inheritance - via Dynamic Prototypes!
3.9 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,399 students enrolled
Created by Loony Corn
Last updated 3/2016
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 42 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Master inheritance in Javascript
  • Understand what dynamic prototyping is, and its benefits and pitfalls
  • Understand the use-cases for prototyping and inheritance
Course content
Expand 24 lectures 02:46:15
+ A Different Take on Objects
24 lectures 02:46:16
Javascript objects are very different from C++ and Java objects! It's quite a paradigm change if you've programmed in other languages before.
Preview 10:58
JSON can be used as a textual representation of a JS object. You can construct an object using JSON notation.
Example 15: Creating an object using JSON
Object constructors are just functions with two specific differences. The use of the magical keyword "this" within the constructor and the use of the magical keyword "new" to create an object from the constructor
Example 16: Creating an object using a constructor
You can add properties to an object after it's been constructed on the fly! Pretty mind-bending for programmers from other object oriented languages.
Example 17: Adding properties to objects dynamically

You can also remove properties from objects after they have been constructed. Again not allowed in traditional object oriented languages!

Example 18: Removing properties from objects dynamically
Functions are first class citizens in Javascript which means that object properties can be function as well.
Example 19: Object properties can be functions
Object properties defined in constructors can be functions as well! Again because functions are first class citizens.
Example 20: Object constructors can have property functions

Properties of objects can be accessed using the dot "." notation as well as the square brackets "[]" notation. They are essentially the same.

Example 21: Two ways of accessing object properties
A special for loop exists to loop over object properties. Every object supports this thanks to the base Object class!
Example 22: Iterating over all properties in an object
Bad things happen when you call an object constructor without the new keyword.
Example 23: Calling a constructor without new
The typeof operator tells you whether a variable is a number, string, object or undefined. It cannot differentiate between different types of objects though.
Example 24: Understanding the typeof operator
Use the instanceof operator to figure out what constructor was used to create an object. This only recognizes where the object came from, it does not know what changes were made to the object after it was constructed.
Example 25: Paternity tests using instanceof
Properties are public by default, however it's often useful to have private properties. These are not natively supported in JS but we can fake them.
Example 26: Faking public and private properties
Javascript supports inheritance, but it does so in a very different way - using prototypes. The key is the prototype property that all object constructors possess. How can a function have a property? Why, because functions are objects of course!
Introduction to prototypes
Let's plunge into our first example of prototypical inheritance, and understand the prototype keyword.
Example 46: Prototypical Inheritance In Action
An object's prototype can change on the fly - this is called Dynamic Prototyping, and this can lead to some pretty surprising effects in Javascript
Example 47: Dynamic Prototyping
A chain of inheritance can be implemented via prototypes - the Javascript interpreter will walk up the hierarchy until it can resolve a property.
Example 48: Inheritance hierarchy using chained prototypes
You can use the prototype keyword to override a property of all objects! Its a lot more powerful than simply overriding a property on a single object.
Example 49: Overriding properties using prototypes
Javascript has a prototype Object, from which all objects derive. In this sense its exactly like Java (of course the mechanism of inheritance is very different in Javascript)
Example 50: The base object as the ultimate prototype
Did you know that its possible to override properties even of built-in object types, such as strings? Do so with care!
Example 51: Overriding properties of built-in objects
JSON is a simple way to create an object from a string. Its full power lies in its simplicity, and in the fact that server-side code, which maybe in Java or C++, can communicate with a client in Javascript. This is huge.
Introduction To JSON
JSON can be used to create virtually anything - strings, numbers, booleans, empty objects, arrays.
Example 57: Simple JSON Use Cases
JSON can be used to create arbitrarily complex objects - see how.
Example 58: Creating meaningful objects with JSON
  • Any modern browser and a simple text editor are all that will be needed for the code examples
  • Some prior programming experience will definitely help!

Note: This course is a subset of our much longer course 'Learn By Example: HTML, CSS and Javascript' so please don't sign up for both:-)

Javascript objects, prototypes and JSON - that's what this course is about.

This is not a course on Javascript frameworks - its about solid, fundamental Javascript. You'll be surprised by how much more you can get done on your web pages once you learn these technologies the right way.

What do we mean by that?

  • Relatively few folks formally learn HTML, CSS or Javascript, because its quite easy to get stuff done in these technologies in a "quick-and-dirty way".
  • That "quick-and-dirty" way of learning and doing leads to problems over time, because Javascript and CSS are actually quite complex, so it is easy to do things the wrong way
  • This course will help, because it is entirely built atop examples. Each is self-contained, has its source code attached, and gets across a simple, specific use-case. Each example is simple, but not simplistic.

What's Included:

  • Prototypes are Javascript's way of doing inheritance, and its very different from the C++/Java way of doing it.
  • JSON is not conceptually difficult to use, but it is incredibly important, and you should understand why - because its the glue between backends written in Java or other traditional languages, and front-ends written in Javascript
  • The Document-Object-Model is what ties Javascript back to HTML and CSS. Together with JSON, the DOM ties it all together from server to skin.
Who this course is for:
  • Nope! Please don't enroll for this class if you have already enrolled for our 13-hour course 'Foundations of HTML, CSS and Javascript' course
  • Yep! Folks who are seeking to learn Javascript the right way - including folks who may done some Javascript programming, but are not quite confident using advanced features such as dynamic prototyping
  • Nope! This class is not right for you if you are looking to learn Javascript frameworks such as JQuery, Angular or Node.js