Object-Oriented JavaScript

Question 1

creating an object

Answer 1

2 ways

1. Object literal
   
   • var a = {}
2. Object( ) constructor
   
   • var a = new Object()

Question 2

Object constructor⁴

What is it?

Answer 2

• A built-in function constructor
• Is used automatically as a constructor whenever a new object is created
• Object.prototype is the base object
• Also includes general-purpose, “static” methods (which aren’t in prototype property)
  
  • Object.create()
  • Object.keys()
  • Object.setPrototypeOf()

Question 3

Object constructor

Syntax

Answer 3

Syntax

• var a = new Object(val) //or

var a = Object(val)

• new keyword can be skipped because this constructor checks for that

3 situations

1. If value is nothing, undefined or null, creates a new empty object
   
   • equivalent to object literal
2. If value is another primative (number, string), will “objectify” (return object equivalent)
3. If value is an object (or function or array), just copies reference over to new object
   
   • Does not duplicate object

Question 4

__proto__⁸

[[Prototype]]

Answer 4

• a reference to an object’s parent
• a reference to the object that that object was cloned from
• __proto__ is just a normal object
• all objects (including functions) have __proto__ property
• but primitives do not have a prototype
• __proto__ is technically a psuedo-property which exposes the [[Prototype]] internal property (hidden), which is hidden
• all object literals inherit from/cloned from the “base object” by default
• all functions inherit from the “base function object”
  
  • that in turn inherits from the base object
• all arrays inherit from the “base array object”
  
  • that inherits from the base object

Question 5

prototype

Answer 5

• special property created automatically in all functions (but not normal objects)
• used primarily by new operators with function constructors
• it becomes the [[Prototype]] (__proto__) of any object created using that function using the new operator
• prototype is, by default, a normal, empty object
  
  • it’s __proto__ is the base object
  • it’s constructor is pre-set to the function itself
• commonly used to store methods for all instances created with that function constructor
• For example:

someFunc.prototype // empty object

someFunc.prototype.prop = ‘eggs’

someFunc.prototype.method = function() {}

*You add methods (or attributes) as you see fit

Question 6

constructor property^{<span>5</span>}

Answer 6

• reference to the function that object was constructed with
• all objects (including functions) automatically have a constructor property somewhere in prototype chain
• when you create a function, its creates a property called ‘.prototype’ which has a constructor property that points to the function itself
• for objects created using new keyword, constructor property points to the function constructor that was used
• for normal objects, constructor property points to the Object() constructor

Question 7

Object.prototype

Answer 7

• the base object
• used by the Object function constructor during instantiation of new objects
• becomes the prototype of every object in JS
• has not prototype itself
  
  • Object.prototype.__proto__ is null
• always the bottom of the prototype chain

Question 8

Array constructor

Answer 8

• A built-in function constructor
• Also includes general-purpose functions (which aren’t in prototype property)
  
  • isArray()
• Creating an array using Array() is equivalent to creating an array with []
• But Array() can be used to quickly create an array of a certain size
  
  • ex: Array(5) ⇒ return an array of length

Question 9

Changing Prototype Manually

Answer 9

2 Options

1. manually set __proto__
2. use Object.setPrototypeOf(obj1, obj2)

Question 10

Class/Instance Patterns

in JavaScript

Answer 10

• numerous ways to implement class/instance patterns

5 most common are:

1. Psuedo-classical Pattern
2. Prototypal Pattern
3. Functional/Factory Pattern
4. Funtional-Shared Pattern
5. ES6 Classes

Note: The use of Object.create is sometimes called “Prototypal Inheretance” but this probably more accurarely described as “Prototypal Instantiation” since it’s less about creating a child class from a parent class, and more about creating a new object based off of another object (that we treat as a class)

Question 11

Inheritance

JavaScript

Answer 11

5 approaches

1. Functional inheritance
   
   1. You create a superclass factory and a subclass factory
   2. The subclass factory creates an instance with the superclass and adds methods and properties to it
2. Psuedo-classical inheritance
3. ES6 Classes
4. *Composition
   
   1. Object.assign

Question 12

Psuedo-classical Instantiation

What is it?

Answer 12

• sometimes called psuedo-classical inheritance
• Consists of 3 parts
  
  1. regular function acts as constructor
  2. adding properties/methods to the prototype
  3. instantiation using the new keyword

Syntax

• function Person(arg1) {
  this. arg1 = arg1

}

Person.prototype.method1 = functioin( ) { }

var dude = new Person()

Question 13

Psuedo-classical Instantiation

Steps

Answer 13

Steps

1. Write constructor function (just a normal function)
2. Add additional attributes/methods to the prototype property of the function
3. Use new keyword to instantiate object
4. The new keyword:
   1. Creates a new, empty object
   2. Invokes the function using that object
   3. Empty object becomes this binding
   4. Using empty object, function ‘intializes’ values based on arguments and body of function
   5. Finally, new operator returns updated object
   6. Unless function returns an object (or function); then new operator returns that instead (this is uncommon)

Question 14

ES6 Classes

Answer 14

• in JavaScript, class is syntactic sugar
• they are functions, but cannot be invoked without new keyword (throws error)
• they are not hoisted

2 approaches

1. class declarations
   
   • cannot be anonymous
2. class expressions
   
   • can be named or anonymous
   • if named, can reference name inside body (but not outside)

Consists of

1. constructor method
2. regular methods
   
   • must be a method definition
   • are added to the class.prototype
   • added to instance.__proto__
3. static methods

Question 15

ES6 Classes

constructor function

Answer 15

• a special inner function of the class
• runs automatically when instance is created
• uses special keyword constructor
• constructor function is optional, but there cannot be more than one
  
  • if so, error will occur
• constructor is primarily used to bind parameters to this

Question 16

ES6 Classes

static method

Answer 16

• static methods are available without instantiating
• can be used by class object, but cannot be used by instances
• must be formatted as a method definition
• use keyword static before method name
• get added as a propery to the class function object

Question 17

Factory Pattern

Answer 17

• Create a function that creates clones of new objects

Steps

1. Creates an empty object inside a function
2. Adds properties/methods to that object
3. And return the object

Question 18

Prototypal Pattern

Answer 18

• Implemented with Object.create
• Syntax
• var newObj = Object.create(oldObj)

newObj.prop1 = ‘hello’

newObj.method1 = someFunc

Steps

1. newObj.__proto__ points to the oldObj
2. newObj itself is empty
3. You can override/augment by adding additional methods and properties

Question 19

Psuedoclassical Inheritance

Answer 19

• a way to implement “inheritance” in JS using prototypes

Steps

1. Create a “super class” as normal
2. Create a “sub class”
3. In subclass constructor, invoke super class using call
   
   • Superclass.call(this, arg1, arg2)
4. Instantiate a superclass object on subclass constructor prototype
   
   • Subclass.prototype = new Superclass() or
   • Subclass.prototype = Object.create(Superclass);
5. Overwrite constructor function of subclass back to itself
   
   • Subclass.prototype.constructor = Subclass

Question 20

polyfill

Answer 20

• code that adds a feature that a browser may lack
• code checks whether feature is available
• and implements that feature if it isn’t there

Question 21

Module Pattern

Answer 21

• Technique for adding hidden (private) properties/methods to JavaScript objects

Steps

1. Create an IIFE
2. Add regular functions and variables to the inside of the function
3. Create an object, obj, inside IIFE
4. Create methods/properties that access functions and variables inside scope of IIFE
5. The methods and props attached to object are “publc”
6. Make IIFE return obj
7. Those “publc” methods can continune to access “private” functions and variables in IIFE using closure

Question 22

Singleton Pattern

Answer 22

• an object which only gets instantiated once
• usually implemented as a global object
• can be implemented in a variety of ways
• often includes some conditional that returns a copy of the existing instance if there is one
• often done to namespace code
• ex:
  
  • jQuery object
  • config settings

Question 23

idempotence

Answer 23

*