Function-and-prototype defined classes in JavaScript

Function-and-Prototype Defined
Classes in JavaScript
Hong Langford
June 24, 2017

Overview
• Objects and prototypes
• Student-Grade example
• this keyword
• Constructor function
• How does the new operator work in JavaScript
• Inheritance with the prototype chain
• The instanceof operator in JavaScript
• References

Objects and Prototypes
• Objects are JavaScript’s fundamental data
structure. Intuitively, an object represents a
table relating strings to values. But when you
dig deeper, there is a fair amount of
machinery that goes into objects.

• Like many object-oriented languages,
JavaScript provides support for
implementation inheritance: the reuse of code
or data through a dynamic delegation
mechanism. But unlike many conventional
languages, JavaScript’s inheritance mechanism
is based on prototypes rather than classes. For
many programmers, JavaScript is the
first object-oriented language they encounter
without classes.

• JavaScript classes introduced in ECMAScript
2015 (ES6) are primarily syntactical sugar over
JavaScript's existing prototype-based
inheritance. The class syntax is not introducing
a new object-oriented inheritance model to
JavaScript. JavaScript classes provide a much
simpler and clearer syntax to create objects
and deal with inheritance for programmers
who are used to classes.

• In many languages, every object is an instance
of an associated class, which provides code
shared between all its instances. JavaScript,
by contrast, has no built-in notion of classes.
Instead, objects inherit from other objects.
Every object is associated with some other
object, known as its prototype. Working with
prototypes can be different from classes,
although many concepts from traditional
object-oriented languages still carry over.

Student-Grade Example
function Student(x) {
this.name = x;
this.grade = [];
}
Student.prototype = {
addGrade: function(x) {
this.grade.push(x);
}
};
var Tom = new Student("Tom");
Tom.addGrade(82);
Tom.addGrade(75);
Tom.addGrade(70);

var Sarah = new Student("Sarah");
Sarah.addGrade(83);
Sarah.addGrade(88);
Sarah.addGrade(91);
var Vu = new Student("Vu");
Vu.addGrade(85);
Vu.addGrade(79);
Vu.addGrade(84);
console.log(Tom, Sarah, Vu);

this keyword
• A function's this keyword behaves a little
differently in JavaScript compared to other
languages. In most cases, the value of this is
determined by how a function is called. It may
be different each time the function is called.

Constructor Function
• Constructor function
– A "constructor" in JavaScript is "just" a function
that happens to be called with the new operator.

How does the new operator work in
JavaScript?
• The new operator uses the
internal [[Construct]] method, and it basically
does the following:
– Initializes a new object
– Sets the internal [[Prototype]] of this object, pointing
to the constructor function prototype property.
– If the constructor function's prototype property is
not an object (but a primitive value, such as a
Number, String, Boolean, Undefined or
Null), Object.prototype is used instead.

– After creating the object, it calls the function,
providing the object as its this value.
– If the return value of the called function, is a
primitive, the object created internally is returned.
– Otherwise, if an object is returned, the object
created internally is lost.

• { name: 'Tom', grade: [ 82, 75, 70 ] } { name:
'Sarah', grade: [ 83, 88, 91 ] } { name: 'Vu',
grade: [ 85, 79, 84 ] }

Inheritance with the Prototype Chain
• When it comes to inheritance, JavaScript only has
one construct: objects. Each object has a private
property (referred to as [[Prototype]] ) which
holds a link to another object called
its prototype. That prototype object has a
prototype of its own, and so on until an object is
reached with null as its prototype. By
definition, null has no prototype, and acts as the
final link in this prototype chain.

• Nearly all objects in JavaScript are instances
of Object constructor which sits on the top of
a prototype chain. And the prototype of
Object’s prototype is not pointing anywhere
but just null .

The instanceof operator in JavaScript
• The instanceof operator tests presence
of constructor.prototype in object's prototype
chain.

References
1. David Herman, Effective JavaScript: 68 Specific
Ways to Harness the Power of JavaScript
(Effective Software Development
Series), Addison-Wesley Professional, 1 edition
(December 6, 2012).
2. https://stackoverflow.com/questions/6750880/
how-does-the-new-operator-work-in-javascript
3. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference

Function-and-prototype defined classes in JavaScript

More Related Content

What's hot

Similar to Function-and-prototype defined classes in JavaScript

Recently uploaded

Function-and-prototype defined classes in JavaScript

Editor's Notes