Javascript - This

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard > Javascript - This

1 - About

The this keyword represents a pointer to the scope (as an object). Generally the local one but it may be changed.

See also: Object - This

this points to a scope (object) that depends on how the function was called (not always to the function itself).

In JavaScript, class methods are not bound by default. If you forget to bind a method and pass it, it will get the value undefined when the function is actually called.

It is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, you should bind that method.

Advertising

3 - Example

3.1 - printThis

obj = {
  printThis: function (){
      console.log(this);
   },
  prop1: 2 
}
 
console.log("'printThis' is a property function that lives inside the object 'obj', the keyword 'this' as the scope of the function is then the object 'obj'");
console.log("'printThis' will then print the object 'obj' when asking to print 'this'");
obj.printThis()

4 - Management

4.1 - Initialization

4.1.1 - Binding to global object

Binding to the global object is a problematic enough that ES5’s strict mode changes the default binding of this to undefined

A binding to the global scope with this will get the value:

Example:

function hello() {
    "use strict";
    return "hello, " + this.name;
}
try {
    hello(); 
} catch(e) {
  console.log(e.message);
}

4.1.2 - Event status

this is:

Advertising

4.1.3 - Direct Assignment is not possible

this can not be assigned directly. The below code is illegal.

try {
    eval('this = 2'); // eval is just there to be able to catch the referenceError 
} catch (e) {
   console.log(e.message); 
}

4.1.4 - Assignment with call and bind

this has int.

var double = function(b) {
    return this * 2;
}
console.log(double.call(3));
console.log(double.bind(4)())

Once an function has been bind. Call will have no effect.

var boundFn = function () {
  return this.x;
}.bind( {x: 10} );
 
console.log ( 'boundFn: ' + boundFn() ); // 10
console.log ( 'boundFn + call x=20, still 10 : ' + boundFn.call( {x: 20} ) ); // still 10

4.1.5 - this as integer

this has int.

var double = function(b) {
    return this * 2;
}
console.log(double.call(3));

4.2 - Webtool (Chrome)

Advertising

5 - Example

5.1 - What is ''this'' bound ?

The call expression determines the binding of this, also known as the call’s receiver.

function foo() { 
    console.log( this.bar ); 
} 
var bar = "globalValue"; 
var obj1 = { 
    bar: "obj1Value", 
    foo: foo
};
var obj2 = { 
    bar: "obj2Value" 
}; 
 
foo(); // "globalValue" - foo was called in the global scope - this = global scope (or window in a browser)
obj1.foo(); // "obj1"  - foo was called in obj1 - this = obj1
foo.call( obj2 ); // "obj2" - foo was called with this = obj2 (the call function)
foo.bind( {bar: "bindValue" } )() // "bindValue" - this was bind to the parameter object
new foo(); // undefined - new sets this to a brand new empty object.

where:

Generally:

5.2 - Example 2

var fn = function (one, two) {
    if ("toString" in this) {
        thisvalue = this.toString
    } else {
        thisvalue = "undefined"
    }
    if (one != undefined) {
        onevalue = one.toString
    } else {
        onevalue = "undefined"
    }
    if (two != undefined) {
        twovalue = two.toString
    } else {
        twovalue = "undefined"
    }
    console.log("*This* has the value '"+thisvalue+"', First argument has the value '"+onevalue+"', Second argument has the value '"+twovalue+"'\n\n");
};
 
this.toString = "Global";
 
var foo={ toString: "foo", fn : fn};
var bar={ toString: "bar" };
var darn={ toString: "darn" };
var rat={ toString: "rat" };
 
 
// Call of fn with differents context
console.log("foo.fn(bar,darn) gives:");
foo.fn(bar,darn);
console.log("fn(bar,darn) gives;");
fn(bar,darn)
console.log("fn.call(foo,bar,darn) gives;");
fn.call(foo,bar,darn)
console.log("foo.fn.call(rat,bar,darn) gives;");
foo.fn.call(rat,bar,darn)
console.log("setTimeout(fn, 1000) gives;");
setTimeout(fn, 1000);
console.log("setTimeout(foo.fn, 1000) gives;");
setTimeout(foo.fn, 1000);
console.log("setTimeout(function() { foo.fn() }, 1000) gives;");
setTimeout(function() { foo.fn() }, 1000);

6 - Documentation / Reference

web/javascript/es/this/this.txt · Last modified: 2019/02/16 17:40 by gerardnico