Constructor Functions and Prototypes in JavaScript

	/*** OOPs with JavaScript -
	1. Constructor functions and new operator
	2. Prototypes
	3. Prototype Inheritance on built in objects
	***/
	// Arrow function (no this keyword) won't work to generate the object, it should be function
	const Employee = function(firstName, lastName) { // this is a constructor function
	console.log(this); // by default {}
	// Add propeties for the default object {}, these an associated with a specific instance of the object.
	//Instance properties
	this.firstName = firstName;
	this.lastName = lastName;
	// Dangerous to use inside the function constructor
	//this.getFullName = function() {
	//console.log(`${this.firstName'} ${this.lastName}`);
	//}
	}
	const srinu = new Employee('Srinu', 'SFDC');
	// 1. New object {} is created
	// 2. function will be called and set this as {}
	// 3. Object {} will be linked to prototype
	// 4. function automatically returns this i.e {} if properties are not pouplated.
	console.log(srinu);
	// Creating multiple instances for the Employee (each instance is an object)
	const khem = new Employee('Khem', 'B');
	const miguel = new Employee('Miguel', 'M');
	const gauri = 'Gurai C';
	console.log(khem, miguel);
	console.log(khem instanceof Employee);
	console.log(gauri instanceof Employee);
	//-- Prototypes - To add functions to the object generated by a constructor function -----------
	Employee.prototype.getFullName = function() {
	console.log(`${this.firstName} ${this.lastName}`);
	};
	console.log(Employee.prototype);
	// Above function added to proto type, it is accessbile due to the prototype inheritance
	srinu.getFullName();
	khem.getFullName();
	console.log(srinu.__proto__); //__proto__ is not prototype of srinu, __proto__ is prototype of employee
	console.log(srinu.__proto__ === Employee.prototype); // true
	console.log(Employee.prototype.isPrototypeOf(srinu));
	console.log(Employee.prototype.isPrototypeOf(khem));
	console.log(Employee.prototype.isPrototypeOf(Employee));
	// Adding properties to the prototype
	Employee.prototype.city = 'San Fransisco';
	// Accessing protoypes
	console.log(srinu, khem);
	console.log(srinu.city, khem.city);
	console.log(srinu.hasOwnProperty('firstName'));
	console.log(srinu.hasOwnProperty('city')); // It is from the constructor function object prototype
	//-- Prototype Inheritance on built in objects ---
	console.log(srinu.__proto__);
	// Object proto type , top of the proto chain
	console.log(srinu.__proto__.__proto__);
	console.dir(Employee.prototype.constructor);
	// Array prototype
	const arr = [1, 3, 4, 1, 6]; // is equivalent to new Array();
	console.log(arr.__proto__);
	console.log(arr.__proto__ === Array.prototype);
	console.log(arr.__proto__.__proto__);
	// Not recommended to add custom methods to array
	Array.prototype.getUnique = function() {
	return [...new Set(this)]
	}
	console.log(arr.getUnique());
	const body = document.querySelector('body'); // console.dire(body)
	console.dir(n1 => n1 = 10);

view raw Constructor Functions and Prototypes in JavaScript hosted with ❤ by GitHub