Apply/Call method in Javascript: What is the first arguments “this”?

Question

I am confused about using apply or call method correctly. I know that apply is passing an array to the function and call is passing strings to a function. For example the code below, what does "this"really have to do with the code? if it has nothing to do with this code, then can anyone give me an example when "this" is implementing appropriately?

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(this, myArray);

Answer 1

It's the context for the function. If you have this.something inside the function, it will access that particular property from that context object.

    

    function foo(bar) {
        this.bar = bar;
    }
    
    foo.apply(this, ['Hello']);    //calling foo using window as context (this = window in global context in browser)
    console.log(this.bar);         //as you can see window.bar is the same as this.bar
    console.log(window.bar);
    
    var ctx = {};    //create a new context
    
    foo.apply(ctx, ['Good night']);
    console.log(ctx.bar);        //ctx now has bar property that is injected from foo function

Open up your dev console to see result.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Answer 2

this is the scope of the Apply/Call function. An example is:

function test() {
    alert(this.a);
}

(function () {
    this.a = "test";
    test();//test

    var self = this;

    (function () {
        this.a = "Foo";
        test();//Foo
        test.apply(self, []);//test
    }());

}());

Answer 3

The first argument will be the this in your function.

ie:

var p = {"name":"someone"};
function myFunction(a, b) {
     console.log(this);
     return a*b;
}
var myArray = [10,2];
myFunction.apply(p, myArray); //log output shows {"name":"someone"}