Object Inherited Property

In JavaScript, objects can inherit properties and methods from another object, creating a prototype chain. This means when a property is accessed on an object, JavaScript first looks for it on the object itself (known as own properties). If not found, it checks the object's prototype and continues up the prototype chain until the property is found or the chain ends at null.

Custom toString method
[object Object]

Prototype and Prototype Chain

Every object in JavaScript has an internal link called [[Prototype]], which refers to its prototype object. The prototype can also have its own prototype, creating a chain known as the prototype chain.

1
3
undefined

• cObj.a: Found in the parent object.
• cObj.c: Found as an own property.
• cObj.d: Not found in the object or its prototype chain.

How Inherited Properties Work

When accessing a property on an object

• JavaScript first checks the object itself for the property.
• If not found, it checks the prototype object.
• This process continues up the prototype chain until
  • The property is found, or
  • The chain ends at null.

10
20

Property Shadowing

If an object has its own property with the same name as an inherited property, the own property takes precedence. This is called property shadowing.

10
42

Dynamic Nature of Inheritance

JavaScript's prototype chain is dynamic, meaning you can modify the prototype of an object after it has been created, and the changes are reflected in all objects inheriting from it.

Added later

Checking for Inherited Properties

To determine whether a property is an own property or an inherited property, you can use:

• hasOwnProperty(): Checks if the property exists directly on the object.
• Object.hasOwn(): A newer and safer method to check for own properties.

true
false
true
false

Using Prototypes for Methods

Inherited properties can also include methods, allowing you to define reusable functionality across objects.

Hello, Parent

End of the Prototype Chain

The prototype chain ends when a prototype is null. For example, Object.prototype is the default prototype for all objects and has null as its prototype.

null
undefined

Practical Use Case

Object inheritance is commonly used in JavaScript to create hierarchies, where shared functionality is defined on a prototype and inherited by multiple objects.

Dog makes a sound.
Cat makes a sound.

Performance Considerations

Accessing properties high in the prototype chain or properties that don’t exist can impact performance.

Use hasOwnProperty() to avoid iterating over inherited properties when needed.