Giving Object Context to Function Calls

JavaScript has a dynamic object named this. By default, this equals to the global object container, so if we have a global variable named x, then this.x === x. The code below will display the value of x, which is 10.

let x = 10;
let print_x = function () {
    console.log(this.x);
};

print_x();

Accessing this.x in a method means accessing attribute x of the object containing this method. We can use this feature by assigning a JavaScript function to an object attribute. The code below will display a value of 20.

let print_x = function () {
    console.log(this.x);
};

let y = {
    'x': 20,
    print_x: print_x
};

y.print_x();

You can see that the value of this in the print_x() function has changed depending on where it was assigned from. The code below will display a value of 30.

let z = {
    'x': 30,
    print_x: print_x
};

z.print_x();

If desired, so that the value of this does not change whenever print_x() function is reassigned, other techniques are required.

See the bind() function below:

Function.prototype.bind = function () (
    let fn = this,
        args = Array.prototype.slice.call(arguments),
        object = args.shift();

    return function () (
        return fn.apply(object, args.concat (Array.prototype.slice.call(arguments)));
    );
);

Now the code below will still display the value of 20 despite what being called is z.print_x:

let y = {
    'x': 20
};

print_x = print_x.bind(y);

let z = {
    'x': 30,
    print_x: print_x
};

z.print_x();

Ciprian on Friday, January 12, 2018 in Methods, Events and Scopes | Last modified on Tuesday, May 10, 2022

Related Posts