What is this in JavaScript?

Like many things, the this keyword in JavaScript is something I learned to work with and around, long before I gained any proper understanding of how it works. Recently I was asked to describe it and found despite my experience I still…

Like many things, the this keyword in JavaScript is something I learned to work with and around, long before I gained any proper understanding of how it works. Recently I was asked to describe it and found despite my experience I still strugled to find simple terms. So I thought I’d write down my best attempt.

There is a special keyword in JavaScript called this. It is a reference to an object. This reference is sometimes called a binding because it ties the value of this to a specific object. What object, and the value of this, depends on how and where the function is called.

The default value of this is the window object in browsers or undefined when in strict mode.

We can explicitly set what this points by executing functions with methods like call, bind and apply.

function myFunction() {
return this;
}

myFunction(); // window
var myBinding = myFunction.bind("hello"); // .bind() returns a new function
myBinding(); // 'hello'
myFunction.call("hello"); // 'hello'
myFunction.apply("hello"); // 'hello'

What confuses me sometimes is JavaScript will implicity bind this if the function is called within a context owning object. This means when a function is a property of a context owning object, the value of this will be the object itself. In the example below the owning object, and therfore value of this is myObject:

function myFunc() {
return this.greeting;
}

var myObject = {
greeting: "hello",
function: myFunc
};

console.log(myObject.function()); // 'hello'

Calling a function with the keyword new will result in a new empty object bound to this.

function myFunc(something) {
this.thing = something;
return this.thing;
}

console.log(new myFunc("something"));

This has been a very short introduction that covers only basic information. If you want to know more I was inspired to attempt my own explaination after reading Willian Martins, Taming this In JavaScript With Bind Operator . I could also not write about this without recommending Kyle Simpson’s explaination in You Don’t Know JavaScript, especially the TLDR.


Print Share Comment Cite Upload Translate
APA
Mike | Sciencx (2024-03-29T09:04:29+00:00) » What is this in JavaScript?. Retrieved from https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/.
MLA
" » What is this in JavaScript?." Mike | Sciencx - Sunday November 11, 2018, https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/
HARVARD
Mike | Sciencx Sunday November 11, 2018 » What is this in JavaScript?., viewed 2024-03-29T09:04:29+00:00,<https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/>
VANCOUVER
Mike | Sciencx - » What is this in JavaScript?. [Internet]. [Accessed 2024-03-29T09:04:29+00:00]. Available from: https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/
CHICAGO
" » What is this in JavaScript?." Mike | Sciencx - Accessed 2024-03-29T09:04:29+00:00. https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/
IEEE
" » What is this in JavaScript?." Mike | Sciencx [Online]. Available: https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/. [Accessed: 2024-03-29T09:04:29+00:00]
rf:citation
» What is this in JavaScript? | Mike | Sciencx | https://www.scien.cx/2018/11/11/what-is-this-in-javascript-2/ | 2024-03-29T09:04:29+00:00
https://github.com/addpipe/simple-recorderjs-demo