JavaScript Prototype, This, and New

#this

##Determine the rules that define this.

Functions and objects are the yin and yang of JavaScript, or the masculine and feminine. Functions do things; objects store things.

Nesting objects in objects is easy. Objects store things, including other objects. Properties can be objects, and vice versa. We can access a property of an object nested in an object using dot notation:

object.object.property

That could also be written as:

object.property.property

because the middle item is both an object and a property.

A second configuration is a function inside an object. This is called a method. This is easy too, because objects are good at storing things. You use dot notation to access the function, just like any other property of the object:

object.method(parameter)

A third configuration is a function inside a function, also known as a higher-order function. This is trickier because functions aren't made to store things. You have to pass input as parameters down through the functions, then return output from the inner function to the outer function, and finally return output out of the outer function. This can be confusing and difficult, but it's a single process (passing input and output).

The fourth configuration is an object inside a function. Functions don't store things so you can't just put an object in function the way you put an object inside an object, or a function inside an object. Function do things, they don't store things. An object in a function only exists while the function is running. The object vanishes when the function finishes running, which makes such an object nearly useless for storing things. The one situation in which this is useful is for a function that creates objects. This is called a constructor function. Constructor functions are designated with an initial capital letter.

The object in a constructor function is an anonymous object. The anonymous object isn't the object that the constructor function creates; the constructor function creates named objects that continue to exist after the function stops running. The anonymous object is the prototype of the named objects that the constructor function creates.

There's no point in naming an object that is about to vanish. If the object had a name it wouldn't vanish and would exist outside the function.

Because the anonymous object doesn't have a name you can't write:

function.object.property

Or if you have a function stored in an object that's in a function, you can't write:

function.object.method(parameter)

The anonymous object has two special names: prototype and this.

To create an anonymous object you name the function it's inside. As noted above, the convention is to capitalize the function name.

prototype is the name of the anonymous object, but prototype is always concatenated between its constructor function and a method, or another function that is a property of the anonymous object:

Function.prototype.method

This is why its called a prototype chain: prototype is always chained between two functions.

The prototype chain continues outward to access properties of more objects and functions, e.g., object/Function.prototype.method. Eventually the prototype chain reaches the global object or environment (typically the window), where you can access global properties.

this is the name of the anonymous object when it's not concatenated to its constructor function and one of its methods. this is never chained to a method (there is no this chain). Instead, this always concatenates to a property that holds a value (never a method).

this.property

When this is used inside a function, this is the name of the anonymous object that the constructor function's anonymous object.

On a sidenote, this can be used outside of functions. In this case it is the name of the global object or environment, usually the window.

There's a third keyword that goes with prototype and this: new. new creates a new object that is an instantiation of the constructor function. The new objects are not anonymous, i.e., they have names. The new, named objects inherit the properties of the anonymous or prototype object. Even after the named, child object is created, when more properties are added to the anonymous parent object, the child object inherits the new properties.

That suggests that this runs the constructor function, bringing the anonymous object back into existence long enough to add properties.

Just as there are three keywords (prototype, this, and new) there are three constructions to use these keywords:

function Name(param1, param2) {
  this.param1 = param1;
  this.param2 = param2;
  this.prop3 = false;
  this.prop4 = array;
  this.prop5 = function() {
    ...
  }
}

Name.prototype.method = function() {
  this.property = value;
}

name = new Name(param1, param2);

Note that the common element of these three constructions is Name, or the capitalized constructor function.

#Literal Creation of Objects

There's another way to make new objects. Compared to a constructor function, you add two lines, and use the function name instead of this:

function Name(param1, param2) {
  **var object = {}**
  **name**.param1 = param1;
  **name**.param2 = param2;
  **name**.prop3 = false;
  **name**.prop4 = array;
  **name**.prop5 = function() {
  **return object;**
  }
}

*4. new indicates a constructor to make objects. Constructors can make new objects that are instances of a prototype function, without two lines in the prototype function:

Also you change object.name = name to this.name = name_.

Also with a constructor you can put methods outside the prototype function by using this to reference the prototype function.

*5. this is useful to access properties of an object within a function.

Understand how to use modules.exports in your code Understand how to use require() for npm node modules local modules Articulate why TDD is useful Understand TDD workflow (red, green, refactor) Understand how to install and run Jasmine tests Understand how to use jasmine utilities (it, describe, toEqual, not.toEqual, etc) Learn how to use the new keyword to create instances of objects from constructor functions Know how to articulate the prototype chain Know the difference between a prototype object proto and the prototype property on constructor functions Essential Questions What's the difference between require('./foo') and require('foo')? What does the require()function return? What is module.exports? Why is it useful? What is a constructor function? How does the new operator work? What is a "prototype"? What is the prototype property? How does JavaScript know where to find methods on objects?