Languages
[Edit]
EN

JavaScript - different ways to call function

12 points
Created by:
JustMike
29820

In JavaScript it is possible to call function in different ways.

Quick solutions:

// ONLINE-RUNNER:browser;

'use strict'; // remove it and run to see what happened with this keyword

function print(a, b){
    console.log(this + ' ' + (a + b));
}

print(1, 2);            // undefined 3

print.call(1, 2, 3);    // 1 5
print.apply(1, [2, 3]); // 1 5

var proxy = print.bind(1);

proxy(2, 3);            // 1 5
proxy(4, 5);            // 1 9

Check below more detailed examples:

1. Direct calling method example

This the way we call usually functions.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

Printer.print(1, 2, 3);

2. Function call method example

In this approach it is possible to call function with new context - arguments are placed after context.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

Printer.print.call(Manager, 1, 2, 3);

3. Function apply method example

In this approach it is possible to call function with new context - arguments are passed as array.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

Printer.print.apply(Manager, [1, 2, 3]);

4. Function bind method example

With this approach proxy finction is created with new context.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};


var printProxy = Printer.print.bind(Manager);

printProxy(1, 2, 3);

Other way how to create proxy metrod is:

// ONLINE-RUNNER:browser;

function createProxy(context, action) {
    var proxy = function() {
        return action.apply(context, arguments);
    };
    return proxy;
}

// Usage example:

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

var printProxy = createProxy(Manager, Printer.print);

printProxy(1, 2, 3);
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join