Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript: Understanding the Weird Parts in 35ish minutes - Part 4/6
Credits
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);

Subscribe

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.