Creating a Fresh Instance in JavaScript: Different Methods

As per the information provided in this MSDN article - specifically focusing on

Constructor Functions but No Classes
, (and after consulting the MDN JS reference) I attempted to create an object using the following code:

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

// EXAMPLE 1
var dog = new Dog("Spot");
console.log("Dog using new:");
console.log(dog); // Instance of Dog object is displayed

// EXAMPLE 2
var dog = {};
dog = Dog.call(dog,"Rowdie");
console.log("Dog using call:");
console.log(dog); // Unexpectedly returns Undefined.. why is that?

Despite the fact that the first example (the conventional method for creating a new object) yields the desired instance, the second example produces undefined - am I missing something here?

For testing purposes, you can refer to the JSFiddle link: http://jsfiddle.net/wk8JD/1/

Answer №1

Modify it to this:

Dog.call(dog,"Rowdie");

When a function is called with new, the function implicitly returns this. This means that the function acts as if it had a return this; statement at the end. According to the MDN documentation:

The object returned by the constructor function becomes the result of the entire new expression. If the constructor function does not explicitly return an object, the object created in step 1 will be used instead. (Normally constructors do not return a value, but they have the option to do so if they wish to override the standard object creation process.)

However, when a function is called "normally" (without new), it will return undefined if there is no return statement.

(It should be noted that in the article, they also do not assign the return value)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript never forgets to validate the user input

Forgive me for my lack of experience, but I am new to this and seeking guidance. I am struggling to find a straightforward example on how to validate HTML input using JavaScript. Currently, I am working on a search function and need help in implementing ...

Setting up multiple versions of npm application

Can I have multiple versions of npm installed for different projects on Windows 10, or are npm installations always global? I attempted to install different versions using https://github.com/marcelklehr/nodist, but it only affected the node version and no ...

Reactjs: Using setState to toggle checkbox selection

Currently dipping my toes into Reactjs, I decided to try my hand at a small project following the documentation. However, I've hit a roadblock. When the checkbox is checked, the state changes, but figuring out how to change it back when unchecked has ...

Update the text on the form submit button after it has been submitted

Is there a way to change the text on a submit button after it has been clicked? I have a form with a button and I want to switch the text from "click" to "Next" once the form has been submitted. <form> <div class="form-grou ...

Enumerating items in a JSON dataset

I am facing an issue with my JSON data structure: var data = { "conv0": { "id":"d647ed7a5f254462af0a7dc05c75817e", "channelId":"emulator", "user": { "id":"2c1c7fa3", "name":"User1" }, "co ...

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

Access the JSON data stored in the File Directory by reading and utilizing it for your project

Can someone help me figure out how to retrieve data from the xmltojson.json file and assign it to a variable using JavaScript? const jsonfile = require('jsonfile') const file = 'xmltojson.json' jsonfile.readFile(file, function (err, obj ...

How come the eval() function is returning an undefined property value?

How can I retrieve the value of a property within an array of objects, where the array itself is a property of another object - specifically this.form.data.output[0].output_total? The array name, index, and property name are passed as parameters and stored ...

The JavaScript function exclusively reveals the final element, which is Three.js

I'm currently working on a fence generator function using Three.js, but for some reason, my function is only returning the last fence created. It's really puzzling to me... function createFence(nb){ var i; var position = -5; var loadingMan ...

Is it more beneficial to categorize REST-based modules/controllers by resource or by specific action/feature?

I'm facing a scenario that goes like this: Endpoint 1: Retrieve all books in the United States owned by John with a GET Request to /country/us/person/john/books Endpoint 2: Get all books owned by John in every country with a GET Request to /person/j ...

Handling onChange events for several typescript <Select> elements

As a non-TS developer, I'm delving into the realm of multiple selects and dropdown menus with Material-UI's select component. Progressing from a basic setup, I successfully implemented a single select but now face a challenge in adding another dr ...

Encountering a Problem with ContentEditable in AngularJS

Here is the code snippet I am working with: <!doctype html> <html ng-app="flyerGen"> <head> <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script> <script> angular.module('flyerGen', []).direct ...

Angularfire2: Access Denied Error When User Logs Out

When utilizing the following method: login() { this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then(() => { this.router.navigate(['']); }); } An error occurs during logout: zone.js:915 Unca ...

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

Error in typescript: The property 'exact' is not found in the type 'IntrinsicAttributes & RouteProps'

While trying to set up private routing in Typescript, I encountered the following error. Can anyone provide assistance? Type '{ exact: true; render: (routerProps: RouterProps) => Element; }' is not compatible with type 'IntrinsicAttribu ...

Create a JavaScript variable every few seconds and generate a JSON array of the variable whenever it is updated

My variable, which consists of random numbers generated by mathrandom every second, such as "14323121", needs to be saved to an array for the latest 10 updates. function EveryOneSec() { var numbers = Math.random(); // I want to create an array from th ...

Is there a better solution than using a hacky Timeout for waiting on the DOM to be ready in a directive's link function?

Inside one of my custom directives, I have an ng-repeat in the template. myApp.directive("test", function () { return { restrict: 'C', scope: { bindVar: '=' }, template: '<div>\ <div cla ...

Retain the input values even after the page is refreshed

I have developed a simple form validation page in ReactJS. The input fields are validated using regex patterns. One issue I encountered is that if I enter data in the input fields and refresh the page before completing the form, the input fields are clear ...

Next JS is trying to access a JSON file that does not exist

After setting up a route "/es/servicios" and configuring it in next.config.js: module.exports = { async redirects() { return [ { source: '/', destination: '/es', ...

The intersectObjects function is failing to retrieve the object from the OBJMTLLoader

Within my scene, I've introduced a new object along with several other cubes. To detect collisions, I'm utilizing the following code snippet that fires a Ray: var ray = new THREE.Raycaster(camera.position, vec); var intersects = ray.intersectObj ...