End prototypes explained

Author: Genesis Gabiola

04-object-oriented--es5-es6/03-prototypes-explained.js

@@ -0,0 +1,74 @@
+/**
+ * ******************************
+ * Prototypes Explained
+ * ******************************
+ **/
+
+// Object.prototype - Object literals all have this prototype
+// Person.prototype - Constructors have their own prototypes e.g. Persons.prototype but also have Object.prototype. This is known as prototype chain.
+
+/**
+ * ********************
+ * Create a constructor
+ * ********************
+ **/
+
+// Person constructor
+function Person(firstName, lastName, dob) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+  this.birthday = new Date(dob);
+  // this.calculateAge = function() {
+  //   const diff = Date.now() - this.birthday.getTime();
+  //   const ageDate = new Date(diff);
+  //   return Math.abs(ageDate.getUTCFullYear() - 1970);
+  // };
+}
+
+/**
+ * ********************
+ * Create prototype methods
+ * ********************
+ **/
+// Calculate age
+Person.prototype.calculateAge = function() {
+  const diff = Date.now() - this.birthday.getTime();
+  const ageDate = new Date(diff);
+  return Math.abs(ageDate.getUTCFullYear() - 1970);
+};
+
+// Get full name
+Person.prototype.getFullName = function() {
+  return `${this.firstName} ${this.lastName}`;
+};
+
+// Gets married last name
+Person.prototype.getsMarried = function(newLastName) {
+  this.lastName = newLastName;
+};
+
+/**
+ * ********************
+ * Create object using the constructor
+ * ********************
+ **/
+const john = new Person('John', 'Doe', '8-12-90');
+const mary = new Person('Mary', 'Johnson', 'March 20 1978');
+
+console.log(mary);
+// The properties firstname, lastname & dob appear for mary as properties. If we look at the __Proto__ object we can now see the different functions created above in the Person.prototype avaibale to use as seen below.
+
+/**
+ * ********************
+ * Log prototype methods
+ * ********************
+ **/
+// Person.prototype
+console.log(john.calculateAge()); // 27
+console.log(mary.getFullName()); // Mary Johnson
+mary.getsMarried('Smith'); // manipulate the object property to change the last name
+console.log(mary.getFullName()); // Mary Smith
+
+// Object.prototype
+console.log(mary.hasOwnProperty('firstName')); // true
+console.log(mary.hasOwnProperty('getFullName')); // false - this is in the prototype and not a property of its own

04-object-oriented--es5-es6/README.md

@@ -2,6 +2,7 @@
 
 - [Constructors & the 'this' Keyword](#constructors--the-this-keyword)
 - [Built In Constructors](#built-in-constructors)
+- [Prototypes Explained](#prototypes-explained)
 
 
 ## Constructors & the 'this' Keyword
@@ -32,3 +33,14 @@ There are other core objects in JavaScript that have constructors as well; howev
 Primitive types such as `Strings`, `Numbers`, `Booleans` etc. can be created as constructor objects instead of primitives. There are more reason for not using constructors instead of primitives compared to the reason for using it: it slows down execution speed, more code, confusing and issues when using operators to compare values.
 
 **Note**: these core object constructor exist in JavaScript but not something you will use often, learning it only to see what is possible in JavaScript for knowledge.
+
+
+## Prototypes Explained
+
+- Each object in JavaScript has a prototype and a prototype is an object in itself
+- All object inherit their properties and methods from their prototypes
+- When dealing with object literals you are inheriting from a prototype called `Object.prototype`
+- When dealing with objects created from a constructor, it is inheriting from a prototype
+- There is something called the prototype chain where you have the constructor prototype but ypu can also go upto the main `Object.prototype`
+
+The `Object.prototype` has its own default functions that we can call such as `hasOwnProperty()`. This will check if an object has its own property.