Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
## 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
```javascript
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.
```javascript
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`.
```javascript
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
```javascript
Object.__proto__ === Function.prototype //true
```
The `__proto__` of `Function` and `prototype` of `Function` are in fact two pointers referring to the same object.
```javascript
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
```javascript
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__`
2. Is the actual object that is used in the lookup chain to resolve methods.
3. It is a property that all objects have.
4. 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
## 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.
```javascript
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.
```javascript
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`.
```javascript
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)
```
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.