DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Prototype and Prototype Chaining With Object Oriented JavaScript

Prototype and Prototype Chaining With Object Oriented JavaScript

Ever wonder where all those pre-defined Javascript methods come from and what they're for? In this post we take a look at prototype and prototype chaining.

Pushpendu Purkait user avatar by
Pushpendu Purkait
·
Jan. 13, 17 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
16.48K Views

Join the DZone community and get the full member experience.

Join For Free

We have always seen that every object in JavaScript has some pre-defined methods. To know about the, we have to find answers to these questions:

What is a prototype?
What is prototype chaining?
What does hasOwnProperty do?
What is __proto__?

We'll look into it and come to know where all these methods come from. Nearly all objects in JavaScript are instances of Object. That means all the objects in JavaScript inherit the properties and methods from Object.prototype. This is called Prototype chaining. This is a very powerful and potentially dangerous mechanism to override or extend object behavior.

Objects created using the new keyword inherit from a prototype called Object.prototype.

For example: If a date object [new Date()] is created with the new keyword, then it inherits the Date.prototype.

We have Date, Array, Function, RegExp in the list for the same. All these objects inherit from the Object.prototype.

We should never alter or change the predefined methods or properties of a prototype, It may cause inappropriate failure, which may be difficult to debug.

To check whether the object has a property or not, we use hasOwnProperty() method. For example if we have the age property in any object, we can check it with the help of the hasOwnProperty() method. We will come to know more about it in this blog.

Let’s take a look at a quick example of prototype chaining.

In this example, we will create a class and add a prototype object in the same. After instantiation of the object, we will be able to use the prototype of the class. This is simply object prototype chaining.

> function Person(firstName, lastName, age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

//Person class created

Person.prototype.getFullName = function(){
  return this.firstName + ” ” + this.lastName;
}

// we have added getFullName method in Person’s prototype.
> var person = new Person(“pushpendu”, “purkait”, 25);
// It will create an instance of the Person class

> person.hasOwnProperty(“firstName”);  // true
> person.hasOwnProperty(“getFullName”);  // false

> person.getFullName(); // pushpendu purkait


In the above code, we used hasOwnProperty() method to check whether we have getFullName method as a property of the object. It returned false, that means there is no such property. But, when we used getFullName method, it returned the actual full name but the property was not there.

How can that be possible?

To know more we have to dig in. As the getFullName() method was not there in the object but still we were able to use it. We should not forget that we added the method in class Person’s prototype. The method went to the object through prototype chaining. It means the class had the method in its prototype, which went to its instance (person object) through prototype chaining. To prove that we will check it in the object.

Whenever we create an instance of any class, the prototype of the class is created in object as well. We have to check it in  __proto__  property. This property contains the prototype of its class. For example: Person’s getFullName() method will be created in object’s __proto__ property.

Let’s take a look into the code:

person.__proto__.hasOwnProperty(‘getFullName’);  //true


As we can, see __proto__ has the getFullName() method, which is taken from class Person.

We can see more methods and properties like
__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__, constructor etc. which are there because of prototype chaining.

I hope you enjoyed and learned something new from this post.

Object (computer science) Prototype JavaScript Property (programming)

Published at DZone with permission of Pushpendu Purkait, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • To Shift Right, You Need Observability
  • NextJS Vs React: Key Differences, Advantages and Limitations
  • Correlation Between Fast TTM and Containers
  • Common Types Of Network Security Vulnerabilities In 2022

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo