Object-Oriented Programming

Objects#

Objects allows us to store functions with their associated data.

Object Literal way#

const user1 = {
name: "Dan",
score: "100",
increment: function() {
user1.score++;
}
//Can easily add more functionality
decrement: function() {
user1.score--;
}
}

Dot Notation#

const user2 = {};
user2.name = "Dog"
user2.score = 5;
user2.increment = function () {user2.score++;};

Object.create -- Bad Approach#

const user3 = Object.create(null)
user3.name = "Dog2"
user3.score = 9;
user3.increment = function() {user3.score++;};

Generating Objects using functions#

  • Defining functions inside of a object creator would lead to extreme unoptimizations as each instantiation would contain the functions.
  • Prototype chain is a better way of doing this. If you want to add an increment function to every instance of user.

Object.create -- Better Approach#

function userCreator (name, score {
const newUser = Object.create(userFunctionScore);
newUser.name = name;
newUser.score = score;
return newUser;
}
const userFunctionStore = {
increment: function() {this.score++;},
login: function() {console.log("You're loggedin");}
}
const user1 = userCreator("Phil", 4);
const user2 = userCreator("Dog", 5);
user1.increment();
  • As soon as you declare new user with Object.create, it returns an empty object but with hidden properties which referrence to any function that's been passed in the Object.create paramaters.
  • If JS does not find the property in an object it goes and look up in the __proto__ hidden property.

The new & this keywords -- Functions & Objects#

  • new keyword automates creating the user object and returning the user object. So we don't need to do Object.create or return
  • Function defined with the function keyword are a function-object combo and can act as an object. If you use dot notation ,you can access its object bits. It does not overwrite or lose access to the function bits.
  • functions contain the prototype property which itself is an object to replace our __proto__ in objects
  • The new keyword does the following:
    • Bind this: { } to any objecy
    • Calls the __proto__ binding on the objec
    • returns the object
Edit this page