what is 'this' key word means in the javascript scenario?

Question

I am new to javascript, I don't quite understand this.element = element; this.priority = priority; this means, is this means we have a element object. and this is point to the this element object, and this.element means element.elment? also what is this.enqueue = function(element, priority) this.enqueue means here? can someone gives me a heads up?

function PriorityQueue() {
  var items = [];

  function QueueElement(element, priority) {
    this.element = element;
    this.priority = priority;
  }
  this.enqueue = function(element, priority) {
    var queueElement = new QueueElement(element, priority);
    if (this.isEmpty()) {
      items.push(queueElement);
    } else {
      var added = false;
      for (var i = 0; i < items.length; i++) {
        if (queueElement.priority < items[i].priority) {
          items.splice(i, 0, queueElement);
          added = true;
          break;
        }
      }
      if (!added) {
        items.push(queueElement);
      }
    }
  };

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — Julian Kleine, Jan 22 '21 at 15:32
If `PriorityQueue` is ever called more than once, you've an anti-pattern at hands. — Teemu, Jan 22 '21 at 15:38
The `this` keyword [works in many ways](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work). In your specific case, it is used in the context of the [`new` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) to add properties to the created object. — TiiJ7, Jan 22 '21 at 15:44

score 1 · Answer 1 · answered Jan 22 '21 at 15:32

From MDN docs

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).

It's best if you read the documentation here

Imran Rafiq Rather · Answer 2 · 2021-01-22T15:49:13.277

You have created an ES5 Constructor Functions. Using Constructor Function we used to create objects in ES5, (Now we also have classes from ES6 onwards). this within the constructor functions points to the objects that are created from them.

Please go through this MDN DOCS Constructor Function

You basically have Constructor Function within another Constructor Function.

Outer function PriorityQueue is Constructor function.

function PriorityQueue() {...}

Within this function it has its variables and functions but also another constructor function QueueElement(element, priority){...}

For the PriorityQueue once the object is created for it:

this.enqueue = function(element, priority) {..}

clearly signifies that this.enqueue method is pointing to objects of PriorityQueue.

Coming to QueueElement Constructor Function:

  function QueueElement(element, priority) {
    this.element = element;
    this.priority = priority;
  }


var queueElement = new QueueElement(element, priority);

So, queueElement is an object variable which is used to access your variables element and priority in the object queueElement.

And Based on the condition:

       if (queueElement.priority < items[i].priority) {
          items.splice(i, 0, queueElement);
          added = true;
          break;
        }

You are making use of priority variable of object queueElement to perform your logic as per your requirement.

score 0 · Answer 3 · answered Jan 22 '21 at 15:40

Is the complete code a javascrip class?

As you can read on w3schools, you can use this to access class or objects atributtes. On this case, both obj atributte and function parameter have the same name ;)

const obj = {
  name: "Some",
  age: 30,
  setName: function (name) {
    this.name = name
  }
}

console.log(obj.name, obj.age)

obj.setName("Great work")

console.log(obj.name, obj.age)

score 0 · Answer 4 · answered Jan 22 '21 at 15:46

this and Functions

Functions, in JavaScript, are essentially objects. Like objects they can be assigned to variables, passed to other functions and returned from functions. And much like objects, they have their own properties. One of these properties is this.

The value that this stores is the current execution context of the JavaScript program. Thus, when used inside a function this‘s value will change depending on how that function is defined, how it is invoked and the default execution context.

Before we delve further into how this behaves in functions, let us look at how it behaves outside them:

For example, if you opened up your browser console and typed the following lines into it, and press return/enter: console.log(this)

You would see the Window object being logged into the console.This is because the global object, in a browser run-time such as Chrome’s run-time, is the Window object.

In short, the value that this stores is the current execution context of the JavaScript program.

Here is an example of this:

<button onclick="alert(this.innerHTML)">Alert the innerHTML of this button</button>

what is 'this' key word means in the javascript scenario?

4 Answers4