CODEWITHSUNDEEP
javascript
Joe Consterdine
Joe Consterdine

Reputation: 1053

What is this called in an Object literal?

so my question is when using an object literal inside a method I see people doing 'this.something = ...'

And then referencing it throughout their object. What's the name for this?

For e.g. Here in the example below if you look in the 'CacheDom' method 'this.button = document.getElementById('submit')' gives us a reference we can use later.

I understand the basics of the 'this' keyword and inside an object it will reference to that object, but I found it strange to be able to store elements etc and reference them later.

Essentially what is the official term for this?

Thanks

https://jsfiddle.net/rvs6ymqj/

HTML

<body>
  <button id="submit" type="submit">Submit</button>
</body>

JS

var obj = {
  init: function() {
    this.cacheDom();
    this.bindEvents();
  },

  cacheDom: function() {
    this.button = document.getElementById('submit');
  },

  bindEvents: function() {
    this.button.addEventListener("click", function() {
      console.log("we clicked the button");
    })
  }
}

obj.init();

Upvotes: 0

Views: 108

Answers (2)

ProGrammar
ProGrammar

Reputation: 294

In Object-Oriented Programming, "this" refers to the object you are inside. You aren't storing properties in "this". It is a way to differentiate between global variables/constructor parameters and instance variables of the same name. I don't think there's a specific name for the concept of "this" but this phrase sums it up nicely:

'this' is usually an immutable reference or pointer which refers to the current object

https://en.wikipedia.org/wiki/This_(computer_programming)

Javascript-Specific Explanation:

JavaScript

When used outside any function, in global space, this refers to the enclosing object, which in this case is the enclosing browser window, the window object. When used in a function defined in the global space, what the keyword this refers to depends on how the function is called. When such a function is called directly (e.g. f(x)), this will refer back to the global space in which the function is defined, and in which other global functions and variables may exist as well (or in strict mode, it is undefined). If a global function containing this is called as part of the event handler of an element in the document object, however, this will refer to the calling HTML element. When a method is called using the new keyword (e.g. var c = new Thing()) then within Thing this refers to the Thing object itself. When a function is attached as a property of an object and called as a method of that object (e.g. obj.f(x)), this will refer to the object that the function is contained within. It is even possible to manually specify this when calling a function, by using the .call() or .apply() methods of the function object. For example, the method call obj.f(x) could also be written as obj.f.call(obj, x). To work around the different meaning of this in nested functions such as DOM event handlers, it is a common idiom in JavaScript to save the this reference of the calling object in a variable (commonly called that or self), and then use the variable to refer to the calling object in nested functions.

Upvotes: 0

Joshua Engel
Joshua Engel

Reputation: 513

It varies from language to language. In Javascript, it's called a property. In Java, they're fields. C++ also calls them fields, though they may also be called data members.

JS is notably different from the other two in that Java and C++ force you to declare your fields, while JS members are defined on the fly. Really, JS objects are just maps from keys to values: the properties are the keys.

Upvotes: 0

Related Questions