Cacher is the code snippet organizer for pro developers

Prototype

Every function in JavaScript has a prototype property that references an object.

Object.create()

Object.create allows you to create an object which will delegate to another object on failed lookups

Object.create allows you to create an object and whenever there’s a failed property lookup on that object, it can consult another object to see if that other object has the property.

1. Whenever there’s a failed property lookup on child, JavaScript will delegate that lookup to the parent object. What that means is that even though child doesn’t have a heritage property, parent does so when you log child.heritage you’ll get the parent’s heritage which was Irish.

const parent = {
  name: 'Stacey',
  age: 35,
  heritage: 'Irish'
}

const child = Object.create(parent)
child.name = 'Ryan'
child.age = 7

console.log(child.name) // Ryan
console.log(child.age) // 7
console.log(child.heritage) // Irish

Prototypal Instantiation

Without creating the object with Object.create, we wouldn’t be able to delegate to the function’s prototype on failed lookups. Without the return statement, we wouldn’t ever get back the created object.

function Animal (name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy

  return animal
}

new keyword - Pseudoclassical Instantiation

when you invoke a function using the new keyword, those two lines are done for you implicitly (“under the hood”) and the object that is created is called this.

function Animal (name, energy) {
  // const this = Object.create(Animal.prototype)

  this.name = name
  this.energy = energy

  // return this
}

const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

prototype vs proto

1. Two prototypes in Javascript

   1. prototype

      1. Special property assigned to any function you make in JS
      2. This prototype is the same object that is pointed to by the [[Prototype]] of the newly created object from that function (using new keyword)

   2. [[Prototype]]

      1. This property is a reference to the prototype of the function from which the object was made

Both are instance of the Object Constructor. Both inherently get a reference of prototype of Object, which is pointed to by __proto__ of newly created object

var obj = {}
var obj2 = new Object()

If we look at the prototype of Object constructor function, it looks the same as the __proto__ of obj. In fact, they are two pointers referring to the same object.

obj.__proto__ === Object.prototype // true

Every prototype of a function has an inherent property called constructor which is a pointer to the function itself. In the case of Object function, the prototype has constructor which points back to Object.

Object.prototype.constructor === Object //true

__proto__ of Object looks same as prototype of Function. When I check the equality of both, they turn out to be the same objects.

Object has a __proto__, which means that Object was made from some other constructor which has a prototype. As Object is a function object, it was made using Function constructor

Object.__proto__ === Function.prototype //true

The __proto__ of Function and prototype of Function are in fact two pointers referring to the same object.

Function.prototype === Function.__proto__ \\// true

As mentioned earlier, the constructor of any prototype should point to the function that owns that prototype. The constructor of prototype of Function points back to Function itself

Function.prototype.constructor === Function \\//true

Object instanceof Function
Object.__proto__.constructor === Function

Object instanceof Object
Object.__proto__.__proto__.constructor === Object

Function instanceof Function
Function.__proto__.constructor === Function

Function instanceof Object
Function.__proto__.__proto__.constructor === Object

1. __proto__

   1. Is the actual object that is used in the lookup chain to resolve methods.
   2. It is a property that all objects have.
   3. This is the property which is used by the JavaScript engine for inheritance

2. prototype

   1. prototype is a property belonging only to functions.
   2. It is used to build __proto__ when the function happens to be used as a constructor with the new keyword