Classes and objects

Constructor function

Persist data with the this keyword.
No explicit return value.
Can have parameters.


function SoftwareDeveloper(name) {
  this.favoriteLanguage = 'JavaScript';
  this.name = name;
}

Creating a new object

Use the new operator.


let developer = new SoftwareDeveloper('David');

When the new operator is not used, no object is created.
- The function is invoked like a regular function.
- Since there is no return value, the variable will be assigned to undefined.

The `instanceof` operator

This operator confirms whether an object is created by a specific constructor function.
This operator actually tests whether the constructor appears in the prototype chain of an object.


object instanceof ClassName;
// return a boolean
 
typeof object
// "object"

`this` in objects

A value for this is set when a method is invoked on an object, and that value refers to that object.
Four ways to call functions
- Calling a constructor function with the new keyword sets this to a newly-created object.
- Calling a method sets this to the object that owns the method.
- Calling a function on its own (i.e. invoking a regular function) sets this to window.
- Calling a function with call or apply allow customization of this.

`call()`

Set this to custom objects.


// this variable is set to thisObject in the invocation
function.call(thisObject, arguments)

Invoke functions attached to objects (i.e. methods).


const mockingbird = {
  title: 'To Kill a Mockingbird',
  describe: function () {
    console.log(`${this.title} is a classic novel`);
  }
};
 
const pride = {
  title: 'Pride and Prejudice'
};
 
mockingbird.describe.call(pride);
// 'Pride and Prejudice is a classic novel'

`apply()`

Pass in arguments in an array.
Useful when the number of arguments is unknown.


function.apply(thisObject, [arguments])

`bind()`

When methods are passed in as a callback, this reference may be lost.


function invokeTwice(cb) {
   cb();
   cb();
}
 
const dog = {
  age: 5,
  growOneYear: function () {
    this.age += 1;
  }
};
 
// growOneYear is passed in as a function, so
// this inside growOneYear is set to windows,
// and the age is not updated
invokeTwice(dog.growOneYear);
 
dog.age;
// 5

Use anonymous closure to close over the dog object.


invokeTwice(function () {
  // growOneYear is directly call onto the dog object
  dog.growOneYear();
});
 
dog.age;
// 7

bind() method provides an less verbose alternative approach.
It is called onto a function and returns a copy of that function with a specified this value.


const growOneYearMethod = dog.growOneYear.bind(dog);
invokeTwice(growOneYearMethod);
dog.age;
// 7

`prototype`

Each function has a prototype property. prototype is an object.
An object created by the new operator of a constructor function is linked to its constructor’s prototype.
This link allows the object to access the prototype’s properties and methods as if it were its own.
Whether accessing a property or invoking a method, the JavaScript interpreter looks for them along the prototype chain in this order:
- The object’s own properties.
- The object’s constructor’s prototype.
- At the very end of the chain is the Object() object, or the top-level parent.
- If the property still cannot be found, the property is undefined.
By adding methods to the prototype, memory is saved as more objects are instantiated.


function Dalmatian (name) {
  this.name = name;
}
 
// register a method on the prototype
Dalmatian.prototype.bark = function() {
  console.log(`${this.name} barks!`);
};

When new methods are added to prototype, existing objects can access the new methods as well.
When proprotype is replaced, objects created before the replacement are still linked to the old prototype. Objects created after the replacement are linked to the new prototype.


function Cat() {
  this.color = 'white';
}
 
let cat1 = new Cat();
cat1.color;
// white
cat1.meow();
// exception
 
Cat.prototype = {
  isHungry: false,
  meow: function () {
    return 'Meow!';
  }
};
// new properties and methods are not available
// for existing objects
cat1.isHungry;
// undefined
cat1.meow();
// exception
 
let cat2 = new Cat();
cat2.color;
// white
cat2.meow();
// Meow!
cat2.isHungry;
// false

Relevant Methods

hasOwnProperty()
- hasOwnProperty() allows user to find the origin of a particular property.
- This method takes in a string of the property name, and returns a boolean indicating whether or not the property belongs to the object itself (i.e. that property was not inherited).
isPrototypeOf()
This method checks whether or not an object exists in another object’s prototype chain.
It can be used to confirm if a particular object serves as the prototype of another object.
Object.getPrototypeOf()
This method retrieves the prototype of a given object.
constructor
- A property that returns a reference to the constructor function that creates the object.
- Objects created with literal notation are constructed with the Object() constructor function.

`_proto_`

An object is secretly linked to its constructor function’s prototype object through that instance’s __proto__ property.


object.__proto__ === object.constructor.prototype;
// true

It is highly discouraged to reassign the __proto__ property, or even use it in any written code.
- There are compatibility issues across browsers.
- Since the JavaScript engine searches and accesses properties along the prototype chain, mutating an object’s prototype can lead to performance issues.

Inheritance

Inheritance in JavaScript is all about setting up the prototype chain.
- Users should not use __proto__ to manage inheritance.
- Users should not inherit only the prototype, because this doesn’t set up the prototype chain, and any changes made to a child object will also be reflected in a parent object.


// inappropriate
Child.prototype = Parent.prototype

Use Object.create() to manage inheritance without altering the prototype.
This method takes in a single object as an argument, and returns a new object with its __proto__ property set to the argument passed into it.
Objects created with this method extend from the passed in argument.


const mammal = {
  vertebrate: true,
  earBones: 3
};
// rabbit extends mammal
const rabbit = Object.create(mammal);
console.log(rabbit.__proto__ === mammal);
// true

Create inheritance


function Animal (name) {
  this.name = name;
}
 
Animal.prototype.walk = function () {
  console.log(`${this.name} walks!`);
};
 
function Cat (name) {
  // call super constructor; use call
  // instead of new operator so that
  // no Animal object is created
  Animal.call(this, name);
  this.lives = 9;
}
 
Cat.prototype.constructor === Cat
// true
 
// link Cat.prototype.__proto__ to Animal.prototype
Cat.prototype = Object.create(Animal.prototype);
 
// now Cat prototype's constructor is set to Animal
// https://stackoverflow.com/a/20830553
Cat.prototype.constructor
// Animal
 
// so its constructor needs to be changed back
Cat.prototype.constructor = Cat;
 
// add a method only shared by Cat objects
Cat.prototype.meow = function () {
  console.log('Meow!');
};
 
const bambi = new Cat('Bambi');
bambi.meow();
bambi.walk();
bambi.name;

Classes and objects

Constructor function

Creating a new object

The instanceof operator

this in objects

call()

apply()

bind()

prototype

Relevant Methods

_proto_

Inheritance

The `instanceof` operator

`this` in objects

`call()`

`apply()`

`bind()`

`prototype`

`_proto_`