Object-oriented Programming in JS Flashcards
What are the 4 pillars of OOP
Encapsulation
Abstraction
Polymorphism
Inheritance
what is Encapsulation?
group related variable and functions together and reuse
What is Abstraction?
hide details and complexity and only show essentials
What is Inheritance?
eliminate redundant code
What is Polymorphism?
allows code to change
what is a function in an object called?
method.
the constructor property that references ______
the function that was used to create the object
let x = 10
function increase(x){
x++;
}
increase(x);
console.log(x);//
10
let obj = {value: 10}
function increase(obj){
obj.value++;
}
increase(obj);
console.log(obj.value);//
11
The method to get the keys of an object
Object.keys(object);
function Circle (radius, color){
this.radius = radius
// this.color = color;
}
HIDE COLOR FROM THE OUTSIDE
// let color = color;
What is temporal: SCOPE or CLOSURE?
scope
A getter is a ___?
a function that is used to read a property
Make the following falsy
if (value.x || value.y){
// code
}
(!value.x || !value.y){
Another simple explanation for prototype explanation. A prototype is a __________
parent
Every object (except the root object) has a prototype (parent). To get the prototype of an object: //
Object.getPrototypeOf(obj);
Every object in Javascript has a prototype or parent except the _________
root object.
Objects created by a given constructor will have the same _______
prototype
________ created by a given constructor will have the same prototype
Objects
let person = {name: "steve'};
get prototype or personobject.getPrototypeOf(person);
to make an element of an object read only:
writeable: FALSE
The static method ____________ defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
Object.defineProperty()
to make an element of an object not show up in object.key :
enumerable: FALSE
to ensure you can not delete a property of an object:
configureable: FALSE
6 element of
Object.defineProperty()
Get Set Writable Configurable Enumerable Value
To get the attributes of a property in an object use the method ______ ?
Object.getOwnPropertyDescriptor()
What uses a return statement,
GET or SET?
GET
Make an object property read only
writable: false
// To get the own/instance properties:
Object.keys(obj);
// To get all the properties (own + prototype):
for (let key in obj) {}
const x = {};
const y = {};
Object.getPrototypeOf(x) === Object.getPrototypeOf(y); //returns true
Object.prototype === Object.getPrototypeOf({})
TRUE
Array.prototype === Object.getPrototypeOf([])
TRUE
proper way to get a prototype of an object is buy using )))
Object.getPrototypeOf( )
the object method ____ is the same as __proto___
Object.getPrototypeOf()
object.prototype is equal too _____
obj.__proto__
The 2 types of members of objects
- instance members
2. prototype members
What will return (instance + prototype) in a objects:
for(let key in obj) console.log(key);
object.keys(obj)
for in loop returns (instance + prototype)
______ expresses a lack of identification, indicating that a variable points to no object.
Null
The only way to create a new JavaScript Date object is to use the _____ operator:
new
make a new date
let x = new date ();
const seconds = (endTime.getTime() -startTime.getTime()); returned 13160
FIX code above to get 13.160
(endTime.getTime() -startTime.getTime() / 1000);
every object has a constructor property that
returns the function that was used to construct the object
new Circle.prototype.constructor(1) // this can be written with a shorter way
new Circle(1)
// this can be written with a longer way new Circle(1)
new Circle.prototype.constructor(1)
When you reset the prototype of an object you should also ________
reset the constructor
Circle.\_\_\_\_\_\_\_\_\_\_\_ = Circle; Circle.prototype = Object.create(Shape.prototype);
RESET CIRCLE CONSTRUCTOR
prototype.constructor
The________ keyword is used in class declarations or class expressions to create a class which is a child of another class
extends
The________ keyword is used to access and call functions on an object’s parent.
super
object.assign()
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
________ method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
The Object.assign()
// Call the super constructor named “Shape”
function Rectangle(color) {
// insert code here
}
Shape.call(this, color);
3 names for the parent class:
parent
super
base
3 names for the child class:
Child
derived
sub
proper way to getting a prototype of an object is by _____
Object.prototypeOf()
function Circle(radius){
this.radius = radius;
}
const newCircle = new Circle(1); console.log(Object.getPrototypeOf(newCircle));
> constructor: ____
__proto__:______
f Circle(radius)
Object
let obj = { }:
Object.prototype
is equal too _______
obj.__proto__
let obj = { }:
obj.__proto__
is equal too _______
Object.prototype
Shape.prototype.duplicate = function(){
console.log(‘duplicate’); }
Circle.prototype.draw = function(){
console.log(‘draw’); }
WHAT POINTS CIRCLE BASE TO SHAPE BASE?
- Circle.prototype = Object.create(Object.prototype);
- Circle.prototype = Object.create(Shape.prototype);
- Circle.prototype = Object.create(Shape.prototype);
the other is the default
Shape.prototype.duplicate = function(){
console.log(‘duplicate’); }
Circle.prototype.draw = function(){
console.log(‘draw’); }
- Circle.prototype = Object.create(Shape.prototype);
PRIOR TO CHANGE WHAT DID THE Circle.prototype point to?
- Circle.prototype = Object.create(Object.prototype);
function Shape(){ }
function Circle(radius){
this.radius = radius; }
Shape.prototype.duplicate = function(){
console.log(‘duplicate’); }
Circle.prototype.draw = function(){
console.log(‘draw’); }
+++++++++++++++++++++++++++++
POINT circle.prototype to shape using Object.create
Circle.prototype = Object.create(Shape.prototype);
function Shape(){ }
function Circle(radius){
this.radius = radius; }
Shape.prototype.duplicate = function(){
console.log(‘duplicate’); }
Circle.prototype.draw = function(){
console.log(‘draw’); }
+++++++++++++++++++++++++++++
POINT circle.prototype.constructor to shape
Circle.prototype.constructor = Circle;
const canEat = {
eat: function(){
this.hunger--;
console.log('eating');
}
}
USE OBJECT.ASSIGN to make a new object and assign canEat
Object.assign({},canEat);
const p = new Rectangle(); // –> returns
class Rectangle {}
ReferenceError
An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError:
Class declarations are or are not hoisted
NOT hoisted to the top.
class Circle {
constructor (radius){
this.radius = radius;
}
draw() {
}
}
//Draw is an INSTANCE METHOD OR STATIC METHOD
INSTANCE METHOD
its available on an instance of an class which is an object
INSTANCE METHOD
its available on an instance of an class which is an object
Static methods are _____
available on the class itself
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); console.log(c); // returns?
Circle{draw: ƒ}
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); console.log(Circle); // returns?
ƒ (){
this.draw = function() {
console.log(this);
}
}const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); c.draw(); // returns
Circle{draw: ƒ}
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); c.draw();
// c.draw(); this is called _____?
Method call
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); const draw = c.draw;
draw(); // returns?
window object
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); const draw = c.draw;
draw(); // this is called ?
function call
How to enable strict mode
at top of program write ‘use strict’;
‘use strict’;
const Circle = function (){
this.draw = function() {
console.log(this);
}
};
const c = new Circle(); const draw = c.draw;
draw(); // returns and why
undefined
in strict mode JS engine more sensitive
class Circle {
draw() {
console.log(this);
}
}
let c = new Circle;
c.draw(); //Circle{}
class Circle {
draw() {
console.log(this);
}
}
let c = new Circle;
const draw = c.draw;
draw();undefined
by default classes are in strict mode
Symbol() === Symbol()
True / False
false
every time you call the function you get a unique identifier
class Circle {
constructor(raduis) {
3 ways to set this to radius
}
}this.raduis = raduis;
this[‘radius’] = radius;
this[_radius] = raduis;
Use ______ to implement private properties and methods in Classes
symbols
Static method doesn’t use _______
this to access properties
The _______ object is a collection of key/value pairs in which the keys are weakly referenced. The keys must be objects and the values can be arbitrary values.
WeakMap
______ of WeakMaps are of the type Object only. Primitive data types as keys are not allowed
Keys
Keys of WeakMaps are of the type Object only. _______ data types as keys are not allowed
Primitive
splitting code into different files is called ______
module
to implement a private property on a class use the method ____
weakMap()
ES6 modules:
the two keywords for ES6 that will allow multiple files
import
export
what is a transliper
combo of translator and compiler
function Circle(radius){
this.radius = radius
this.draw = function(){
console.log('draw');
}
};
const c = new Circle(1); WRITE ABOVE WITH CALL METHOD
Circle.call( { } , 1 );
The new object is being created and the 1 is the argument for the radius
what are the 3 reference types?
Object
Array
Function
what are the 6 value types?
number string boolean undefined null symbol
let x = 10; let y = x x = 20 x ? y? why?
10
20
x and y value types and are independent
2 reasons to use Bracket Notation.
circle.location = {x:1};
circle['location'] = {x:1};
- dynamically access property name
- using property names that are not valid identifiers.
example ‘center-location’ cant be accessed via dot notation.`
to check existence of property or method in object use the
In operator
what will show prototype properties in an object?
For…in loop
Object.keys() method
For…in loop
best OOP practice in JS, when you reset the prototype of an object you need to also reset the _______
constructor
in class syntax the methods are stored_____
class Circle {
constructor(radius){
// here
}
// or here
}
}
the body of the class, not in the constructor
The “TYPEOF” the circle class is a _____?
function Circle(radius){
this.radius = radius;
this.draw = function(){
console.log('draw');
}
}
function
Function ______ are not hoisted
expressions
Is this hoisted?
class CircleC {
constructor(radius){
this.radius = radius;
}
draw(){
console.log('draw');
}
}
No,
Class expressions and declarations are not hoisted
What is an instance method of CircleC?
class CircleC {
constructor(radius){
this.radius = radius;
}
draw(){
}
}
the draw() method as it’s available on an instance of a class which is a object
What is a method call?
const Circle = function(){
this.draw = function(){console.log(this)}
};
const c = new Circle();
draw(); // ?
c.draw(); // ?
c.draw()
What is a function call?
const Circle = function(){
this.draw = function(){console.log(this)}
};
const c = new Circle();
draw(); // ?
c.draw(); // ?
draw()
const Circle = function(){
this.draw = function(){console.log(this)}
};
const c = new Circle();
++++++++++++++++
draw();
when you call a function (function call) call “this” in an object will point to ___
the window object
const Circle = function(){
this.draw = function(){console.log(this)}
};
const c = new Circle();
++++++++++++++++
c.draw();
when you call a method call “this” in an object will point to ___
the object
what changes the behavior of “this”
strict mode
‘use strict’
with class inheritance we use the ______ keyword
extend
class Shape {
constructor(color){
this.color = color;
}
move(){
console.log('move');
}
}
class Circle(){
constructor(){
//this add error what keyword to fix?
}
draw(){
console.log('draw');
}
}
super
