Object-Oriented JavaScript — Prototype Catches

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at object properties.

Enumerating Properties

We can enumerate properties of an object with the for…in loop.

For example, if we have:

const obj = {
  a: 1,
  b: 2
};

We can write:

const obj = {
  a: 1,
  b: 2
};

for (const key in obj) {
  console.log(key, obj[key]);
}

Then we get:

a 1
b 2

The key has the key and obj[key] has the value.

Not all properties are enumerable, we can set the ebumerable property descriptor to make a property not enumerable.

We can check with the propertyIsEnumerable() method to check if a property is enumerable.

We can do the check with:

console.log(obj.propertyIsEnumerable('a'))

then we should get true since object properties are enumerable unless it’s specified otherwise.

Using isPrototypeOf() Method

Objects also has the isPrototypeOf method that tells whether the specific object is used as a prototype of another object.

For instance, if we have:

const monkey = {
  hair: true,
  feeds: 'bananas',
  breathes: 'air'
};

function Person(name) {
  this.name = name;
}

Person.prototype = monkey;

const james = new Person('james');
console.log(monkey.isPrototypeOf(jane));

Then the console log should log true since we set monkey to the prototype of the Person constructor.

proto Property

Since ES6, the __proto__ property is a standard property to let us set the prototype of an object.

It can also be used as a getter to get the property.

For instance, we can write:

const monkey = {
  hair: true,
  feeds: 'bananas',
  breathes: 'air'
};

function Person(name) {
  this.name = name;
}

Person.prototype = monkey;

const james = new Person('james');
console.log(james.__proto__ === monkey);

Then we get true since we have the prototype of the james object is monkey as we set with:

Person.prototype = monkey;

We can get the same result with:

james.constructor.prototype

We can also set the prototype of an object with it, so we can write:

const monkey = {
  hair: true,
  feeds: 'bananas',
  breathes: 'air'
};

const person = {
  name: 'bob',
  __proto__: monkey
}

Then we’ll get the prototype with the __proto__ property or we can use Object.getPrototypeOf() to check:

Object.getPrototypeOf(person)

then we get the monkey object.

Augmenting Built-in Objects

We can add functionality to built-in objects.

We can use polyfills to add standard functionalities to objects that aren’t available in some environments.

Issues with Prototype

We should know that the prototype chain is live.

It’ll change when we change the proottype object.

The prototype.constructur property isn’t available.

We can set the constructor top whatever we want.

If we change the prototype, then we have to change the constructor.

For instance, we can write:

function Dog() {}

Dog.prototype = {
  paws: 4,
  hair: true
};

const dog = new Dog();
console.log(dog.constructor === Dog);

then we get false .

We’ve to set the constructor to the Dog to make it true so it reports correctly:

Dog.prototype.constructor = Dog;

Now:

console.log(dog.constructor === Dog);

logs true like we expect.

Conclusion

We’ve to be careful when working with prototypes.

We can set it and we may sometimes get results we may not expect.