Javascript Object Oriented Programming - Revision history

AliIybar at 08:27, 14 February 2021

2021-02-14T08:27:27Z

AliIybar at 14:30, 29 August 2018

2018-08-29T14:30:35Z

AliIybar at 08:36, 28 August 2018

2018-08-28T08:36:01Z

AliIybar: Created page with "Category:Javascript Category:OOP == 4 Pillars of OOP == * Encapsulation * Abstraction * Inheritance * Polymorphism

 // The simples..."

2018-08-28T08:32:02Z

Created page with "Category:Javascript Category:OOP == 4 Pillars of OOP == * Encapsulation * Abstraction * Inheritance * Polymorphism <pre class="brush:js;"> // The simples..."

New page

[[Category:Javascript]]
[[Category:OOP]]

== 4 Pillars of OOP ==
* [[Encapsulation]]
* [[Abstract]]ion
* Inheritance
* [[Polymorphism]]

<pre class="brush:js;">
// The simplest way to create an object is using an object literal
const circle = {
radius: 1,
draw: function() {}
};

// To create multiple objects with the same structure and behaviuor (methods), use a factory or a constructor.

// Factory function
function createCircle(radius) {
return {
radius,
draw: function() {}
}
}

// Constructor function
function Circle(radius) {
this.radius = radius;
this.draw = function() {}
}

// Every object has a "constructor" property which returns the function that was used to construct or create that object.
const x = {};
x.constructor; // returns Object()

// In JavaScript, functions are objects. They have properties and methods.
Circle.name;
Circle.length;
Circle.constructor; // returns Function()
Circle.call({}, 1); // to call the Circle function
Circle.apply({}, [1]);

// Value types are copied by their value, reference types are copied by their reference.
// Value types in JavaScript are: String, Number, Boolean, Symbol, undefined and null
// Reference types are: Object, Function and Array

// JavaScript objects are dynamic. You can add/remove properties:
circle.location = {};
circle['location'] = {};

delete circle.location;

// To enumerate the members in an object:
for (let key in circle) console.log(key, circle[key]);

Object.keys(circle);

// To see if an object has a given property
if ('location' in circle)

// Abstraction means hiding the complexity/details and showing only the essentials.
// We can hide the details by using private members. Replace "this" with "let".

function Circle(radius) {
// Public member
this.radius = radius;

// Private member
let defaultLocation = {};
}

// To define a getter/setter, use Object.defineProperty():

Object.defineProperty(this, 'defaultLocation', {
get: function() { return defaultLocation; },
set: function(value) { defaultLocation = value; }
});
</pre>

← Older revision		Revision as of 08:27, 14 February 2021
Line 147:		Line 147:
	for (let key in obj) {}		for (let key in obj) {}
	</pre>		</pre>
		+
		+	=== Cloning an Object ===
		+	circle to another
		+	for (let key in circle)
		+	another[key] = circle[key];
		+	or to clone one or more object to another
		+	const another = Object.assign({}, circle)
		+	to add other properties during cloning
		+	const another = Object.assign({color:"yellow"}, circle)
		+	with spread operator
		+	const another = {...circle}

@@ Line 1: / Line 1: @@
 [[Category:Javascript]]
 [[Category:OOP]]
 == 4 Pillars of OOP ==
@@ Line 89: / Line 91: @@
      set: function(value) { defaultLocation = value; }
 });
 </pre>

@@ Line 8: / Line 8: @@
 * [[Polymorphism]]
 <pre class="brush:js;">
 const circle = {
     radius: 1,
     draw: function() {}
 };
+</pre>
-// To create multiple objects with the same structure and behaviuor (methods), use a factory or a constructor.
+To create multiple objects with the same structure and behaviuor (methods), use a factory or a constructor.
+==== Factory function ====
-// Factory function
+<pre class="brush:js;">
 function createCircle(radius) {
     return {
@@ Line 24: / Line 25: @@
+    }
+}
+</pre>
-// Constructor function
+==== Constructor function  ====
 function Circle(radius) {
      this.radius = radius;
      this.draw = function() {}
+}
+</pre>
-// Every object has a "constructor" property which returns the function that was used to construct or create that object.
+Every object has a "constructor" property which returns the function that was used to construct or create that object.
 const x = {};
 x.constructor; // returns Object()
+</pre>
-// In JavaScript, functions are objects. They have properties and methods.
+In JavaScript, functions are objects. They have properties and methods.
 Circle.name;
 Circle.length;
@@ Line 41: / Line 45: @@
 Circle.call({}, 1); // to call the Circle function
 Circle.apply({}, [1]);
-// Value types are copied by their value, reference types are copied by their reference.
+'''Value types''' in JavaScript are: String, Number, Boolean, Symbol, undefined and null
-// Value types in JavaScript are: String, Number, Boolean, Symbol, undefined and null
-// Reference types are: Object, Function and Array
+'''Reference types''' are: Object, Function and Array
-// JavaScript objects are dynamic. You can add/remove properties:
 circle.location = {};
 circle['location'] = {};
 delete circle.location;
+</pre>
-// To enumerate the members in an object:
+To enumerate the members in an object:
 for (let key in circle) console.log(key, circle[key]);
 Object.keys(circle);
+</pre>
-// To see if an object has a given property
+To see if an object has a given property
 if ('location' in circle)
+</pre>
-// Abstraction means hiding the complexity/details and showing only the essentials.
-// We can hide the details by using private members. Replace "this" with "let".
 function Circle(radius) {
     // Public member
@@ Line 70: / Line 82: @@
     let defaultLocation = {};
+}
+</pre>
-// To define a getter/setter, use Object.defineProperty():
+To define a getter/setter, use Object.defineProperty():
+<pre class="brush:js;">
 Object.defineProperty(this, 'defaultLocation', {
      get: function() { return defaultLocation; },