OOP in JavaScript
Last updated
Was this helpful?
Last updated
Was this helpful?
//object literals
const circle = {
radius: 1,
location: {
x: 1,
y: 1
}
draw: function(){
console.log('draw');
}
};
circle.draw();
//Factory function
function createCircle(radius) {
return {
radius,
location: {
x: 1,
y: 1
}
draw: function() {
console.log('draw');
}
};
const circle = createCircle(1);
circle.draw();
//Constructor Function
function Circle(radius) {
this.radius = radius;
this.draw = function() {
console.log('draw');
}
}
const another = new Circle(1);
//new: create an empty object
//set this point to the object
//return the object from this function
//Constructor property
const Circle1 = new Function('radius'`
this.radius = radius;
this.draw = function() {
console.log('draw');
}
`);
const circel = new Circle1(1);
//Functions are objects
Circle.call({}, 1);
//same as const another = new Circle(1);
Circle.apply({}, [1,2,3]);
//Value vs Reference Types
//Primitives are copied by their value
//(value types) number, string, boolean, symbol, undefined, null
//Objects are copied by their reference
//(reference types) object, function, array
//1
//primitives
let x = 10;
let y = x;
x = 20; //y is still 10 (independent of each other)
//objects
let x = {value: 10};
let y = x;
x.value = 20; //y=20 address/reference is copied
//2
//Primitives
let number = 10;
function increase(number) {
number++; //11
}
increase(number);
console.log(number); //number=10
//objects
let obj = {value: 10};
function increase(obj) {
obj.value++; //11
}
increase(obj);
console.log(obj); //value: 11
//adding or removing properties
circle.location = {x: 1};
//same
circle['location'] = {x; 1};
//alternative
const propertyName = 'location';
circle[propertyName] = {x: 1};
delete circle.location;
delete circle[location];
//enumerating properties
for (let key in circle) {
if (typeof circle[key] !== 'function')
console.log(key, circle[key]);
}
Object.keys(circle);
const keys = Object.keys(circle);
console.log(keys);
//check existance of a property or a method in an object
if ('raius' in circle)
console.log('Circle has a redius.')
//Abstraction
//hide the details and show the essentials
function Circle(radius) {
this.radius = radius;
this.defaultLocation = {x:0, y:0};
this.computeOptimumLocation = function(factor) {
//...
}
this.draw = function() {
this.computeOptimumLocation();
console.log('draw');
}
}
const circle = new Circle(10);
circle.computeOptimumLocation(0.1);
circle.draw();
//Private properties and methods
function Circle(radius) {
let color = 'red'; //local variable in the function
this.radius = radius;
let defaultLocation = {x:0, y:0};
let computeOptimumLocation = function(factor) {
//...
}
this.draw = function() {
let x, y;
computeOptimumLocation(0.1);
//defaultLocation
//this.radius
console.log('draw');
}
}
const circle = new Circle(10);
circle.draw();
//Getters and Setters
function Circle(radius) {
this.radius = radius;
let defaultLocation = {x:0, y:0};
this.getDefaultLocation = function() {
return defaultLocation;
}
this.draw = function() {
console.log('draw');
}
}
const circle = new Circle(10);
circle.getDefaultLocation();
circle.draw();
//////////
function Circle(radius) {
this.radius = radius;
let defaultLocation = {x:0, y:0};
this.getDefaultLocation = function() {
return defaultLocation;
}
this.draw = function() {
console.log('draw');
}
Object.defineProperty(this, 'defaultLocation', {
get: function() {
return defaultLocation;
},
set: function(value) {
if (!value.x || !value.y)
throw new Error('Invalid location.')
defaultLocation = value;
}
});
}
const circle = new Circle(10);
circle.defaultLocation = 1;
circle.draw();
//Exercise
function Stopwatch() {
let startTime, endTime, running, duration = 0;
this.start = function() {
if (running == 1)
throw new Error('Stopwatch has already started.')
running = 1;
startTime = new Date();
};
this.stop = function() {
if (running == 0)
throw new Error('Stopwatch is not started.')
running = 0;
endTime = new Data();
const seconds = (endTime.getTime() - startTime.getTime()) / 1000;
duration += seconds;
};
this.reset = function() {
startTime = null;
endTime = null;
running = 0;
duration = 0;
};
Object.defineProperty(this, 'duration', {
get: function() {return duration;}
});
}
const sw = new Stopwatch();