The object variable is not recognized by the Javascript method

Question

The object variable is not recognized by the Javascript method

var Geometry = function(shapeType)
{
    this.shapeType = shapeType;

    addEventListener("resize", this.adjust);
}

Geometry.prototype.adjust = function()
{
    alert(this.shapeType);
}

.

var figure = new Geometry('rectangle');

After resizing, I expect to see an alert with the word rectangle, but it currently shows undefined

javascript methods javascript-objects dom-events

Answer 1

Answer №1

It is important to pass the scope in order to utilize this within the resize event.

var Figure = function(shape) {
  this.shape = shape;
  addEventListener("resize", this.adjust.bind(this));
}

Figure.prototype.adjust = function() {
  alert(this.shape);
}

var obj = new Figure('square');

Answer 2

It is important to pass the scope in order to utilize this within the resize event.

var Figure = function(shape) {
  this.shape = shape;
  addEventListener("resize", this.adjust.bind(this));
}

Figure.prototype.adjust = function() {
  alert(this.shape);
}

var obj = new Figure('square');

Answer 3

Answer №2

To achieve the desired outcome of an alert displaying 'rectangle', make sure to utilize variable.align(). This method is necessary when generating a new object.

Answer 4

To achieve the desired outcome of an alert displaying 'rectangle', make sure to utilize variable.align(). This method is necessary when generating a new object.

Answer 5

Answer №3

The value of the keyword this is determined by how a function is called. It cannot be directly assigned during execution, and it may vary each time the function is invoked. In ES5, the bind method was introduced to explicitly set the value of a function's this irrespective of its invocation context [MDN]

Function.prototype.bind() creates a new function that binds its this keyword to a specified value when called.

var Shape = function(type) {
  this.type = type;
  addEventListener("resize", function() {
    this.align();
  }.bind(this));
  //OR addEventListener("resize", this.align.bind(this));  
}

Shape.prototype.align = function() {
  alert(this.type);
}


var variable = new Shape('rectangle');

Answer 6

The value of the keyword this is determined by how a function is called. It cannot be directly assigned during execution, and it may vary each time the function is invoked. In ES5, the bind method was introduced to explicitly set the value of a function's this irrespective of its invocation context [MDN]

Function.prototype.bind() creates a new function that binds its this keyword to a specified value when called.

var Shape = function(type) {
  this.type = type;
  addEventListener("resize", function() {
    this.align();
  }.bind(this));
  //OR addEventListener("resize", this.align.bind(this));  
}

Shape.prototype.align = function() {
  alert(this.type);
}


var variable = new Shape('rectangle');

The object variable is not recognized by the Javascript method

Answer №1

Answer №2

Answer №3

Similar questions

Vue: The function "priceFilter" is not defined in this context

Tips for maintaining video playback in HTML5 when the video element is clicked

React Component not retaining its value

To achieve this, my goal is to have the reels start playing on a separate page when a user clicks on the designated image. I am currently working on a project that involves this

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Leveraging GSAP and Vue by utilizing props to dynamically calculate a maxWidth

Tips for utilizing field mapping for a nested item in TypeScript

Using a combination of radio buttons and JavaScript to adjust the color of a div element

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

When running the `npm run dev` command, Tailwind does not seem to function

Verify whether a web application is equipped with React, Angular, or Vue

Showing data in json format using Angular

Angular: handling asynchronous errors when no promise is utilized within a subscription

Ways to update the contents of an individual div within an ng-repeat loop

Show fixed div at specific height

Sorting elements in jQuery UI by connecting them together

An issue with Azure App Service causing extra slashes in URLs

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

The Increment of DOM Event Detail Stays Unchanged When Angular Click Event is Triggered

Populating a dropdown with a list by utilizing the append grid library