this

  • Revision slug: JavaScript/Reference/Operators/this
  • Revision title: this
  • Revision id: 27157
  • Created:
  • Creator: dbruant
  • Is current revision? No
  • Comment 5 words added

Revision Content

Global context

In the global context, in strict mode or not, this refers to the global object.

// In a web browser, the window object is also the global object:
this === window; // true
this.document === document; // true

this.a = 37;
window.a; // 37

Function context

The this value depends on how the function is being used.

Simple call

function f1(){
  return this;
}

f1() === window; // global object


function f2(){
  "use strict"; // see strict mode
  return this;
}

f2() === undefined;

As an object method

In this case, this is bound to the object the method is called on.

function azerty(){
  return this.prop;
}

var o = {f: azerty, prop: 37};
o.f(); // f's 'this' is bound to o. '37' is returned

o.b = {g: azerty};
o.b.g(); // o.b doesn't have a 'prop' property. 'undefined' is returned

... on the prototype chain

As a constructor

When a function is used as a constructor (with the new keyword), this is bound to a fresh object.

/* 
** Commented code is implicitely added to the function when called by the engine as a constructor 
*/
function MyConstructor(){
  // var this = Object.create(MyConstructor.prototype); // In user code, setting 'this' always throws a ReferenceError
  ... actual function body code ...
  ... can set properties to 'this' ...
  // if what is returned by the function body is an object, return it.
  // return the object in 'this' otherwise
}

// ... //

function C(){
  this.a = 37;
}

var o = new C();
o.a; // 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
C2.a; // 38. because what is returned is an object. In this case, 'this' is just useless.

call and apply

In the case where you have a function using the this keyword in its body and you want to set the value yourself, you can do it by using call or apply

function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1+3+5+7 = 16
add.apply(o, [10, 20]); // 1+3+10+20 = 34

Bound functions

ECMAScript 5 introduced Function.prototype.bind. Calling f.bind(someObject) creates a new function with the same body and scope than f but which this is bound to the first argument of bind regardless of how the function is being used.

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty

As a getter or setter

Functions used as getter or setter have their this bound to the object from which the property is being set or gotten.

function modulus(){
  return Math.sqrt(this.re*this.re + this.im*this.im);
}

var o = {
  re:1,
  im:-1,
  get phase(){
    var a = Math.atan(this.im/this.re);
    if(this.re < 0 && this.im >= 0)
        return a+Math.PI;
    if(this.re < 0 && this.im < 0)
        return a-Math.PI;
    return a;
  }
};

Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true});

console.log(o.phase, o.modulus); // -0.78, 1.4142

As a DOM event handler

When a function is used as an event handler, this is bound to the element the event fired from.

Using Function.prototype.bind to bind this to an object

{{ js_minversion_header("1.8.5") }}

JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.

{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux/L\'op\u00e9rateur_this", "ja": "ja/JavaScript/Reference/Operators/Special_Operators/this_Operator", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_this" } ) }}

Revision Source

<h2>Global context</h2>
<p>In the global context, in strict mode or not, <code>this</code> refers to the global object.</p>
<pre class="brush: js">// In a web browser, the window object is also the global object:
this === window; // true
this.document === document; // true

this.a = 37;
window.a; // 37
</pre>
<h2>Function context</h2>
<p>The <code>this</code> value depends on how the function is being used.</p>
<h3>Simple call</h3>
<pre class="brush: js">function f1(){
  return this;
}

f1() === window; // global object


function f2(){
  "use strict"; // see strict mode
  return this;
}

f2() === undefined;
</pre>
<h3>As an object method</h3>
<p>In this case, <code>this</code> is bound to the object the method is called on.</p>
<pre class="brush: js">function azerty(){
  return this.prop;
}

var o = {f: azerty, prop: 37};
o.f(); // f's 'this' is bound to o. '37' is returned

o.b = {g: azerty};
o.b.g(); // o.b doesn't have a 'prop' property. 'undefined' is returned
</pre> <h4>... on the prototype chain</h4><h3>As a constructor</h3>
<p>When a function is used as a constructor (with the <code>new</code> keyword), this is bound to a fresh object.</p>
<pre class="brush: js">/* 
** Commented code is implicitely added to the function when called by the engine as a constructor 
*/
function MyConstructor(){
  // var this = Object.create(MyConstructor.prototype); // In user code, setting 'this' always throws a ReferenceError
  ... actual function body code ...
  ... can set properties to 'this' ...
  // if what is returned by the function body is an object, return it.
  // return the object in 'this' otherwise
}

// ... //

function C(){
  this.a = 37;
}

var o = new C();
o.a; // 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
C2.a; // 38. because what is returned is an object. In this case, 'this' is just useless.
</pre>
<h3><code>call</code> and <code>apply</code></h3>
<p>In the case where you have a function using the <code>this</code> keyword in its body and you want to set the value yourself, you can do it by using <code>call</code> or <code>apply</code></p>
<pre class="brush: js">function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1+3+5+7 = 16
add.apply(o, [10, 20]); // 1+3+10+20 = 34
</pre> <h3>Bound functions</h3>
<p>ECMAScript 5 introduced <code><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope than <code>f</code> but which <code>this</code> is bound to the first argument of <code>bind</code> regardless of how the function is being used.</p>
<pre class="brush: js">function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
</pre> <h3>As a getter or setter</h3>
<p>Functions used as getter or setter have their <code>this</code> bound to the object from which the property is being set or gotten.</p>
<pre class="brush: js">function modulus(){
  return Math.sqrt(this.re*this.re + this.im*this.im);
}

var o = {
  re:1,
  im:-1,
  get phase(){
    var a = Math.atan(this.im/this.re);
    if(this.re &lt; 0 &amp;&amp; this.im &gt;= 0)
        return a+Math.PI;
    if(this.re &lt; 0 &amp;&amp; this.im &lt; 0)
        return a-Math.PI;
    return a;
  }
};

Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true});

console.log(o.phase, o.modulus); // -0.78, 1.4142
</pre><h3>As a DOM event handler</h3>
<p>When a function is used as an event handler, <code>this</code> is bound to the element the event fired from.</p>
<h4>Using Function.prototype.bind to bind this to an object</h4>
<p>{{ js_minversion_header("1.8.5") }}</p>
<p>JavaScript 1.8.5 introduces the <code><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.</p>
<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux/L\'op\u00e9rateur_this", "ja": "ja/JavaScript/Reference/Operators/Special_Operators/this_Operator", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_specjalne/Operator_this" } ) }}</p>
Revert to this revision