JavaScript inheritance through prototypes and the properties of objects

Question

JavaScript inheritance through prototypes and the properties of objects

I am currently exploring the concept of prototyped inheritance in JavaScript for a function. This process is well documented in Wikipedia's javascript article. It functions smoothly when dealing with simple JavaScript types:

function Person() {
    this.age = 0;
    this.location = {
        x: 0,
        y: 0,
        absolute: false
    };
};

function Employee() {};

Employee.prototype = new Person();
Employee.prototype.celebrate = function () {
    this.age++;
}

var pete = new Employee();
pete.age = 5;
pete.celebrate();
var bob = new Employee();
bob.celebrate();
console.log("bob is " + bob.age + " pete is " + pete.age);

By setting

Employee.prototype = new Person();

, all properties and methods of Person are inherited by Employee, which is a crucial aspect of inheritance.

As expected, the output is: bob is 1 pete is 6

Now, I am experimenting with altering pete's location (after celebrating):

pete.celebrate();
pete.location.absolute=true;

When checking bob's location.absolute, it displays: true. This result is unexpected as I did not modify bob's location and anticipated it to retain the initial value defined in Person, causing issues in my implementation.

Initially, I believed the output should be false. I understand that I may need to clone the location object from the original Person, but I am uncertain about where and how to execute this action. Are there any alternative techniques for handling inheritance effectively?

javascript inheritance

Answer 1

Answer №1

Creating a new instance of Employee will result in all properties being copied from Person. This forms a shallow copy, causing pete and bob to share the same location object. Unfortunately, finding a satisfactory solution for this issue is challenging. You might consider utilizing a framework or resorting to a workaround like the one shown below:

function Employee() { Person.apply(this); };

This code snippet invokes the Person constructor within the context of the current object.

To delve deeper into this topic, you can refer to the MDC for additional information: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

Answer 2

Creating a new instance of Employee will result in all properties being copied from Person. This forms a shallow copy, causing pete and bob to share the same location object. Unfortunately, finding a satisfactory solution for this issue is challenging. You might consider utilizing a framework or resorting to a workaround like the one shown below:

function Employee() { Person.apply(this); };

This code snippet invokes the Person constructor within the context of the current object.

To delve deeper into this topic, you can refer to the MDC for additional information: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

Answer 3

Answer №2

Avoid executing the Person constructor during inheritance because an Employee should not include a .location property as it is not part of the Person.prototype.

function generateObject( func ){
    function obj(){}
    obj.prototype = func.prototype;
    return new obj;
}

Employee.prototype = generateObject( Person );

This method of inheritance ensures no unexpected behaviors (like executing constructors).

You should only invoke the parent constructor within the child constructor:

function Employee() {
Person.apply( this, arguments );
}

Answer 4

Avoid executing the Person constructor during inheritance because an Employee should not include a .location property as it is not part of the Person.prototype.

function generateObject( func ){
    function obj(){}
    obj.prototype = func.prototype;
    return new obj;
}

Employee.prototype = generateObject( Person );

This method of inheritance ensures no unexpected behaviors (like executing constructors).

You should only invoke the parent constructor within the child constructor:

function Employee() {
Person.apply( this, arguments );
}

Answer 5

Answer №3

Encountering a similar problem led me to devise a solution involving the creation of a distinct constructor for the internal object.

function engine(cc, fuel) {
       this.cc = cc; 
       this.fuel = fuel
}

function car(type, model, cc, fuel) {
       this.type = type; 
       this.model = model;
       this.engine = new engine(cc, fuel);
}


var mycar = new car("sedan", "toyota corolla", 1500, "gas");
console.log(mycar.type);
//sedan
console.log(mycar.engine.cc);
//1500

If I had any methods on the prototypes of 'engine' or 'car' constructors, they would still be available. However, I am not deriving the "car" class from the "engine" class in OOP sense. It was simply unnecessary as the "engine" serves as a component of "car".

When it comes to inheritance, I now lean towards utilizing the newer features introduced in ECMAScript 5 such as Object.create and Object.defineProperties. These methods are compatible even with IE9. Prior to that, I followed the 'apply()' method as recommended by Kosta.

Answer 6

Encountering a similar problem led me to devise a solution involving the creation of a distinct constructor for the internal object.

function engine(cc, fuel) {
       this.cc = cc; 
       this.fuel = fuel
}

function car(type, model, cc, fuel) {
       this.type = type; 
       this.model = model;
       this.engine = new engine(cc, fuel);
}


var mycar = new car("sedan", "toyota corolla", 1500, "gas");
console.log(mycar.type);
//sedan
console.log(mycar.engine.cc);
//1500

If I had any methods on the prototypes of 'engine' or 'car' constructors, they would still be available. However, I am not deriving the "car" class from the "engine" class in OOP sense. It was simply unnecessary as the "engine" serves as a component of "car".

When it comes to inheritance, I now lean towards utilizing the newer features introduced in ECMAScript 5 such as Object.create and Object.defineProperties. These methods are compatible even with IE9. Prior to that, I followed the 'apply()' method as recommended by Kosta.

JavaScript inheritance through prototypes and the properties of objects

Answer №1

Answer №2

Answer №3

Similar questions

Sending arrays in JSON format using Node.js Express (res.json)

The array contains no elements, yet it is not empty, and when stringified with JSON.stringify, it results

Grab the code snippet from JSFiddle

Optimal approach for handling large JSON files

Unlock the full potential of integrating external APIs with Next.js

What makes the creation of Javascript objects so flexible and dynamic?

What is the best way to display a placeholder instead of the state's value when a page loads?

How to detect changes in Angular 2 using a separate service

CakePHP and Legacy Ajax Script Integration

Utilizing AJAX POST requests from JavaScript to a Rails 4 controller while implementing Strong Parameters

Implementing class toggling in AngularJS with ng-class

Implementing a progress loader in percentage by simultaneously running an asynchronous setTimeout counter alongside a Promise.all() operation

Firebase onSnapshot error when retrieving data from Snapchot

What is the best way to eliminate the nesting in this ternary operation?

What could be causing my YouTube code to malfunction with certain playlists?

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Warning: data and salt parameters are necessary, please provide them

Having difficulty in displaying database values in HTML modal using PHP

Update of component triggered only upon double click

Storing the Outcome of a mongodb Search in a Variable