JavaScript: Understanding the Weird Parts in 35ish minutes - Part 4/6

Published on February 23, 2020

Credits

Anthony Alicea, follow him on Twitter

Prerequisite

Section 4 - Object-Oriented Javascript and Prototypal Inheritance

Lesson 53- Conceptual Aside (Classical vs Prototypal Inheritance)

Dealing with the creation of objects

#BIGWORD Inheritance - One object gets access to the properties and methods of another object

Classical Inheritance
- Verbose (Very large)
- Keywords like a friend, protected, private, interface, etc
Prototypal Inheritance
- Simple
- Flexible
- Extensible
- Easy to understand

Lesson 54 - Understanding the Prototype

Let's say we have an object “obj” and we know objects can have properties here we have “prop1” we can access it as obj.prop1 using the dot operator. We also know js add hidden properties and methods. All objects have proto{} (prototype) property. The property is simply a reference to another object call it proto{}.

If this object proto{} has another property ie prop2. When we call obj.prop2 the dot operator looks for prop2 referenced on obj itself, it doesn’t find it so it next goes to the prototype ie object proto{} and looks for property name prop2 and if it finds it, it returns that.

It looks like prop2 is on our object “obj” but actually it’s on our object prototype.

Similarly that proto{} object can also point to another proto{} object and so on and so forth.

Each object can have its own prototype and maybe this proto{} of proto{} have another property prop3

These prop2 and prop3 look like on our main object but they are actually on the prototype chain.

If we have another object “obj2” it can point to same object as its prototype proto{}. Objects can share the same proto{} (prototype). So obj2.prop2 will return same property as obj.prop2.

Example 1:

var person = {
    firstname: ‘Default’,
    lastname: ‘Default’,
    getFullName: function(){
        return this.firstname + “ ” + this.lastname;
  }
};

var john = {
    firstname : ‘John’,
    lastname : ‘Doe’
}

//Don’t do this EVER, for demo purpose only!!
john.__proto__ = person; //john now inherits from person
console.log(john.getFullName())// John Doe
console.log(john.firstname); //John

Lesson 55 - Everything is an Object (or a primitive)

Example 1: ``` var a = { }; var b = function() { }; var c = []; //Check following in console a.proto // Object b.proto // function Empty(){} c.proto // []

//Check base prototype of every var is object a.proto.proto //Object b.proto.proto //Object c.proto.__proto // Object ```

Lesson 56 - Reflection and Extend

#BIGWORD Reflection: An object can look at itself, listing and changing its properties and methods. It can be used to create a very useful pattern extend.

Example 1: ``` var person = { firstname: ‘Default’, lastname: ‘Default’, getFullName: function(){ return this.firstname + “ ” + this.lastname; } };

var john = { firstname : ‘John’, lastname : ‘Doe’ }

//don’t do this EVER, for demo purpose only!!! john.proto = person;

//For-in to loop over every property in an object for(var prop in john){ console.log(prop + “ : ” + john[prop]); }

//OUTPUT Getting all properties of itself and inherited firstname : ‘John’ lastname : ‘Doe’ getFullName: function(){ return this.firstname + “ ” + this.lastname; } ```

Example 2: //Check what properties are owned by the object itself for(var prop in john){ if(john.hasOwnProperty(prop)){ console.log(prop + “ : ” + john[prop]); } } //OUTPUT Getting all properties of itself firstname : ‘John’ lastname : ‘Doe’

Example 3: ``` var jane = { address : ‘111 Main St.’, getFormalFullName: function(){ return this.lastname + “ ,” + this.firstname; } }

var jim = { getFirstName : function(){ return this.firstname; } } //underscorejs function _.extend(john,jane,jim); ``` ---

If you want a gist of the actual document, subscribe to the newsletter.

---

Bookmark

Unlike life, keyboards do have shortcuts, press COMMAND+D to make this an easily accessible resource by bookmarking it.