💻
LEANNA
  • "Hello World"
  • Discrete Fast Fourier Transform
  • mac显示隐藏文件
  • 5G冲浪
    • 上网冲浪看到的有用东西
  • Something useful...
    • Websites
  • Computer Graphics
    • Mathematical Morphology
    • GAMES101 Notes
  • OOP
    • OOP in JavaScript
  • Backend - notes
    • Setup database for websites
    • Run A PHP Server On A Mac Using Terminal
    • Run html file on localhost
  • Something useful...
Powered by GitBook
On this page

Was this helpful?

  1. OOP

OOP in JavaScript

https://youtu.be/PFmuCDHHpwk

//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();


PreviousGAMES101 NotesNextSetup database for websites

Last updated 5 years ago

Was this helpful?