Object-Oriented JavaScript Flashcards
1
Q
creating an object
A
2 ways
- Object literal
- var a = {}
- Object( ) constructor
- var a = new Object()
2
Q
Object constructor4
What is it?
A
- 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()
3
Q
Object constructor
Syntax
A
Syntax
- var a = new Object(val) //or
var a = Object(val)
- new keyword can be skipped because this constructor checks for that
3 situations
- If value is nothing, undefined or null, creates a new empty object
- equivalent to object literal
- If value is another primative (number, string), will “objectify” (return object equivalent)
- If value is an object (or function or array), just copies reference over to new object
- Does not duplicate object
4
Q
__proto__8
[[Prototype]]
A
- 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
5
Q
prototype
A
- 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
6
Q
constructor property<span>5</span>
A
- 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
7
Q
Object.prototype
A
- 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
8
Q
Array constructor
A
- 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
9
Q
Changing Prototype Manually
A
2 Options
- manually set __proto__
- use Object.setPrototypeOf(obj1, obj2)
10
Q
Class/Instance Patterns
in JavaScript
A
- numerous ways to implement class/instance patterns
5 most common are:
- Psuedo-classical Pattern
- Prototypal Pattern
- Functional/Factory Pattern
- Funtional-Shared Pattern
- 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)
11
Q
Inheritance
JavaScript
A
5 approaches
- Functional inheritance
- You create a superclass factory and a subclass factory
- The subclass factory creates an instance with the superclass and adds methods and properties to it
- Psuedo-classical inheritance
- ES6 Classes
- *Composition
- Object.assign
12
Q
Psuedo-classical Instantiation
What is it?
A
- sometimes called psuedo-classical inheritance
- Consists of 3 parts
- regular function acts as constructor
- adding properties/methods to the prototype
- instantiation using the new keyword
Syntax
- function Person(arg1) {
this. arg1 = arg1
}
Person.prototype.method1 = functioin( ) { }
var dude = new Person()
13
Q
Psuedo-classical Instantiation
Steps
A
Steps
- Write constructor function (just a normal function)
- Add additional attributes/methods to the prototype property of the function
- Use new keyword to instantiate object
- The new keyword:
- Creates a new, empty object
- Invokes the function using that object
- Empty object becomes this binding
- Using empty object, function ‘intializes’ values based on arguments and body of function
- Finally, new operator returns updated object
- Unless function returns an object (or function); then new operator returns that instead (this is uncommon)
14
Q
ES6 Classes
A
- in JavaScript, class is syntactic sugar
- they are functions, but cannot be invoked without new keyword (throws error)
- they are not hoisted
2 approaches
- class declarations
- cannot be anonymous
- class expressions
- can be named or anonymous
- if named, can reference name inside body (but not outside)
Consists of
- constructor method
- regular methods
- must be a method definition
- are added to the class.prototype
- added to instance.__proto__
- static methods
15
Q
ES6 Classes
constructor function
A
- 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
