JavaScript: Creating a Function that Returns an Object with an Undefined `this.variable`

Question

JavaScript: Creating a Function that Returns an Object with an Undefined `this.variable`

While using javascript, I encountered an issue with instance variables. Declaring a variable as "this.variable" works fine until my function returns an object. However, if the function returns a String or Number, there are no issues. But when it returns an object, the instance variable becomes "undefined". Can anyone help me with this problem? (Check out a sample at http://jsfiddle.net/woko/vE4rq/2/ tested on recent versions of firefox & chrome)

function Funct() {
    this.varfunc = "this is an instance";
    return false;
}

var f = new Funct();
console.log(f.varfunc);

function FunctReturnobj() {
    this.varfunc = "this is an instance + returning an object";
    return {};
}

var fr = new FunctReturnobj();
console.log(fr.varfunc)

javascript function this instance-variables

Answer 1

Answer №1

this within a function's scope refers to the DOMWindow.

this within an object's scope is actually referring to the object itself.

Answer 2

this within a function's scope refers to the DOMWindow.

this within an object's scope is actually referring to the object itself.

Answer 3

Answer №2

Utilizing constructors incorrectly can lead to unexpected results. Constructors should not have a return value. You can define methods for your object using the prototype property or within the constructor itself, as shown below:

function Constructor(value) {
  this.variable = value;
}

var obj = new Constructor('test');
obj.variable; // -> Returns 'test';

Similarly, you can create object methods like this:

function Constructor(value) {
  this.variable = value;

  this.say = function(something) {
    return "I say: " + something;
  };
}

Alternatively, you can use the prototype method:

function Constructor(value) {
  this.variable = value;
}

Constructor.prototype.say = function(something) {
  return "I say: " + something;
};

This is just a simple example, but it illustrates the concept effectively :)

Answer 4

Utilizing constructors incorrectly can lead to unexpected results. Constructors should not have a return value. You can define methods for your object using the prototype property or within the constructor itself, as shown below:

function Constructor(value) {
  this.variable = value;
}

var obj = new Constructor('test');
obj.variable; // -> Returns 'test';

Similarly, you can create object methods like this:

function Constructor(value) {
  this.variable = value;

  this.say = function(something) {
    return "I say: " + something;
  };
}

Alternatively, you can use the prototype method:

function Constructor(value) {
  this.variable = value;
}

Constructor.prototype.say = function(something) {
  return "I say: " + something;
};

This is just a simple example, but it illustrates the concept effectively :)

Answer 5

Answer №3

Using the new operator results in a new object being created and the function applied to it - within the function scope, this refers to that specific object.

If the function is called without using new, or if there is a return statement present, it will not act as a "constructor". In such cases, this will point to the execution context, typically the window object.

Answer 6

Using the new operator results in a new object being created and the function applied to it - within the function scope, this refers to that specific object.

If the function is called without using new, or if there is a return statement present, it will not act as a "constructor". In such cases, this will point to the execution context, typically the window object.

JavaScript: Creating a Function that Returns an Object with an Undefined `this.variable`

Answer №1

Answer №2

Answer №3

Similar questions

How to achieve an endless cycle using Promise recursion in a NodeJS environment

What is the best method for setting a session cookie securely while also using CSRF tokens?

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

Retrieving the maximum values from JSON data using D3

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Understanding the reason why "undefined" is occurring in Javascript

Incorporating '@vite-pwa/nuxt' into a nuxt 3 project leads to hydration issues

Reset input fields while retaining placeholder text

What are some strategies for handling data after it has been retrieved using Axios?

Attempting to verify JavaScript input by utilizing OnClick and a custom function. Regardless of the content inputted, the system consistently confirms that the format is accurate

Is it possible to reset the existing localStorage value if we access the same URL on a separate window?

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Having Trouble with Click Function: Loading Pages into Div using Jquery/Ajax

terminate a node-cron task or abort a node-scheduler job

Storing div content in database directly

Concealing URL parameters in ui-sref (using ui.router)

Tips on adding a base64 encoded image string to a JSON object using JavaScript

Find the current location of the scroll bar on the view port

"The authentication scheme is unrecognized" - this is the message produced by Node-LinkedIn module

Encountering an "Angularjs 1.2.x Injector:modulerrr" error, even after successfully incorporating ngRoute