Why is the JavaScript constructor not being executed?

Question

Why is the JavaScript constructor not being executed?

I am currently working on implementing a JavaScript inheritance example that I came across, but I am encountering issues with the child object not constructing as expected. When attempting to create the jill instance in the code snippet below, it does not return a Jill object, leading to difficulties in calling methods from either the child or parent.

var Person = function() {
  this.name = "unnamed";
}
Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
}
var Jill = function() {
  var jill = function() {
    Person.call(this);
    this.name = "Jill";
  };
  jill.prototype = Object.create(Person.prototype);
  jill.prototype.constructor = jill;
  jill.prototype.expressJoy = function() {
    console.log("Huray!");
  };
  return jill;
}
var jill = new Jill();
console.log(jill instanceof Jill); // false
jill.expressJoy(); // error, is not a function
jill.sayName(); // error, seen if comment out previous line

javascript inheritance constructor

Answer 1

Answer №1

If we take a look at your situation, the variable var Jill is functioning more like a regular function rather than a constructor.
Here's how you can modify your code to rectify this:

var Jill = (function() {
    function Jill() {
        Person.call(this);
        this.name = "Jill";
    };
    Jill.prototype = Object.create(Person.prototype);
    Jill.prototype.constructor = Jill;
    Jill.prototype.expressJoy = function() {
        console.log("Huray!");
    };
    return Jill;
})();

var jill = new Jill();
console.log(jill);   // Jill {name: "Jill"}
console.log(jill instanceof Jill); // true
jill.expressJoy(); // Huray!
jill.sayName();    // My name is Jill

Now, after these changes, Jill will work as a proper constructor and create objects as expected. (By the way, it's good practice for constructor names to begin with an uppercase letter).

Answer 2

If we take a look at your situation, the variable var Jill is functioning more like a regular function rather than a constructor.
Here's how you can modify your code to rectify this:

var Jill = (function() {
    function Jill() {
        Person.call(this);
        this.name = "Jill";
    };
    Jill.prototype = Object.create(Person.prototype);
    Jill.prototype.constructor = Jill;
    Jill.prototype.expressJoy = function() {
        console.log("Huray!");
    };
    return Jill;
})();

var jill = new Jill();
console.log(jill);   // Jill {name: "Jill"}
console.log(jill instanceof Jill); // true
jill.expressJoy(); // Huray!
jill.sayName();    // My name is Jill

Now, after these changes, Jill will work as a proper constructor and create objects as expected. (By the way, it's good practice for constructor names to begin with an uppercase letter).

Answer 3

Answer №2

You have made a mistake in initializing the object,

var jack = Jack();
var obj = new jack();

The function Jack is actually returning a function pointer rather than an actual object. In order to fix this, you will need to create an object based on the returned function pointer.

Answer 4

You have made a mistake in initializing the object,

var jack = Jack();
var obj = new jack();

The function Jack is actually returning a function pointer rather than an actual object. In order to fix this, you will need to create an object based on the returned function pointer.

Answer 5

Answer №3

This code has been revised and includes a detailed explanation:

Check out the JSBin Example

// The following is the Person class which serves as a base for all "people"

var Person = function() {
  this.name = "unnamed";
};

// Adding the sayName function to the prototype of Person
Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// Creating the 'Jill' constructor
var Jill = function() {
  Person.call(this); // Linking Person to Jill
  this.name = 'jill';
};

// Updating the prototype delegation for Jill
Jill.prototype = Object.create(Person.prototype);

// Resetting Jill's constructor to point back to Jill
Jill.prototype.constructor = Jill;

// Adding functions to Jill's prototype 
Jill.prototype.expressJoy = function() {
    console.log("Huray!");
  };

// Instantiating a new object named 'obj' from Jill
var obj = new Jill();
console.log(obj instanceof Jill); // Outputs true
obj.expressJoy(); // Outputs "Huray!"
obj.sayName(); // Outputs "My name is jill"

It's important to note that this code combines prototypal and pseudoclassical instantiation patterns - Person follows the latter while Jill utilizes the former.

For more information on JavaScript instantiation patterns, refer to this informative blog post by Ryan Atkinson:

Read the Blog Post

https://i.sstatic.net/jUzkW.jpg

Answer 6

This code has been revised and includes a detailed explanation:

Check out the JSBin Example

// The following is the Person class which serves as a base for all "people"

var Person = function() {
  this.name = "unnamed";
};

// Adding the sayName function to the prototype of Person
Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// Creating the 'Jill' constructor
var Jill = function() {
  Person.call(this); // Linking Person to Jill
  this.name = 'jill';
};

// Updating the prototype delegation for Jill
Jill.prototype = Object.create(Person.prototype);

// Resetting Jill's constructor to point back to Jill
Jill.prototype.constructor = Jill;

// Adding functions to Jill's prototype 
Jill.prototype.expressJoy = function() {
    console.log("Huray!");
  };

// Instantiating a new object named 'obj' from Jill
var obj = new Jill();
console.log(obj instanceof Jill); // Outputs true
obj.expressJoy(); // Outputs "Huray!"
obj.sayName(); // Outputs "My name is jill"

It's important to note that this code combines prototypal and pseudoclassical instantiation patterns - Person follows the latter while Jill utilizes the former.

For more information on JavaScript instantiation patterns, refer to this informative blog post by Ryan Atkinson:

Read the Blog Post

https://i.sstatic.net/jUzkW.jpg

Answer 7

Answer №4

Follow these steps to implement your code:

1) return new jill(); within the inner function, then

2) var jill = Jill(); to invoke the function that generates the new instance.

DEMO

This approach is more straightforward.

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

Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
}

function Jill() {
  Person.call(this);
  this.name = "Jill";
}
Jill.prototype = Object.create(Person.prototype);
Jill.prototype.constructor = Jill;
Jill.prototype.expressJoy = function() {
  console.log("Huray!");
};

var jill = new Jill();

DEMO

Answer 8

Follow these steps to implement your code:

1) return new jill(); within the inner function, then

2) var jill = Jill(); to invoke the function that generates the new instance.

DEMO

This approach is more straightforward.

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

Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
}

function Jill() {
  Person.call(this);
  this.name = "Jill";
}
Jill.prototype = Object.create(Person.prototype);
Jill.prototype.constructor = Jill;
Jill.prototype.expressJoy = function() {
  console.log("Huray!");
};

var jill = new Jill();

DEMO

Answer 9

Answer №5

Here's a functioning code snippet:

function Being() {
  this.type = "unknown";
};
Being.prototype.identifyType = function() {
  console.log("I am a " + this.type);
};

function Sarah() {
    Sarah.prototype.__proto__ = Being.prototype;

    this.type = "human";

    Sarah.prototype.expressExcitement= function() {
        console.log("Yay!");
    };

    return Sarah;
};

var sarah = new Sarah();
console.log(sarah instanceof Sarah); // True
sarah.expressExcitement(); // Yay!
sarah.identifyType(); // I am a human

Answer 10

Here's a functioning code snippet:

function Being() {
  this.type = "unknown";
};
Being.prototype.identifyType = function() {
  console.log("I am a " + this.type);
};

function Sarah() {
    Sarah.prototype.__proto__ = Being.prototype;

    this.type = "human";

    Sarah.prototype.expressExcitement= function() {
        console.log("Yay!");
    };

    return Sarah;
};

var sarah = new Sarah();
console.log(sarah instanceof Sarah); // True
sarah.expressExcitement(); // Yay!
sarah.identifyType(); // I am a human

Why is the JavaScript constructor not being executed?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unexpected output in JavaScript when using regular expressions

Having trouble installing NPM with jQuery? Getting errors about 'Define is undefined'?

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

Error message indicating an issue with defaultProps on a React FunctionComponent in Typescript

Select the anchor attribute value of tabs using jQuery

transferring data from JavaScript to AJAX in MVC4

Ways to embed a series of images within a stationary container

At times, Chrome fails to load CSS files when requested

Methods for adding a new object to an array in Angular: Explained

My Contentful code is not functioning properly in NodeJS

What is the reason behind appending a timestamp to the URL of a JavaScript resource?

A guide on transforming a 3D mesh into a 2D shape using Three.js

Doing calculations in a GridView using JavaScript

The installation of @grpc/grpc-js does not include all necessary dependencies

Retrieve the id of the clicked hyperlink and then send it to JQuery

The ThreeJS model loader encountered an error while attempting to load within a class method

Is it possible to load a JavaScript file from a different domain using a bookmarklet?

A guide on utilizing the javascript function to toggle the checkbox in each row of a gridview

Not including absent keys in JSON comparison

What could be causing Angular 8 form to be submitted multiple times?