Skip to content

15_call-apply-bind.md

Latest commit

 

History

History
258 lines (198 loc) · 4.27 KB

15_call-apply-bind.md

File metadata and controls

258 lines (198 loc) · 4.27 KB

call, apply and bind

  • In Javascript, this value is unstable. It depends on how this calls. Also it's different behavior in non-static mode and static mode.
  • call(), apply() and bind() use to stabilize this value in a function.

Function properties

  • Function.name
  • Function.length
  • Function.prototype.toString()

name

function test(){
    console.log(this);
}
console.log(test.name);//test

length

function test(param1, param2){
    console.log(this);
}
console.log(test.length);//2

Add a property

function asim(param1, param2){
    console.log(this);
}
asim.moo = 1;
console.log(asim.name);

Function Method

Function.toString()

function asim(param1, param2){
    console.log(this);
}
console.log(asim.toString());
//function asim(param1, param2){
//     console.log(this);
// }

Function Methods - call, apply and bind

call()

function asim(){
    console.log(this);
}
asim.call(); //Window object
asim();     // Window object
"use strict";
function asim(){
    console.log(this);
}
asim.call(); // undefined
"use strict";
function asim(){
    console.log(this);
}
asim.call({}); // Object{}
"use strict";
function asim(){
    console.log(this);
}
asim.call(1); //1
"use strict";

var asim = {
    checkThis: function(){
        console.log(this); //asim object

        function checkOther(){
            console.log(this); //undefined
        }
        checkOther();
    }
}
asim.checkThis();
"use strict";

var asim = {
    checkThis: function(){
        console.log(this); //asim object

        function checkOther(){
            console.log(this); //asim object
        }
        checkOther.call(this);
    }
}
asim.checkThis();
"use strict";

function a(b,c,d){
    console.log(this);  //1
    console.log(b);     //2
    console.log(c);     //3
    console.log(d);     //4
}
a.call(1,2,3,4);

apply()

"use strict";

function a(b,c,d){
    console.log(this);  //1
    console.log(b);     //2
    console.log(c);     //3
    console.log(d);     //4
}

a.apply(1,[2,3,4]);

Why might you use call why I use apply? Normally you would use call unless the function takes a variable number of parameters.

function sum(){
    var total = 0;
    for(var i=0; i<arguments.length; i++){
        total += arguments[i];

    }
    return total;
}
var x = sum(1,2,3);
console.log(x);//6
function sum(){
    var total = 0;
    for(var i=0; i<arguments.length; i++){
        total += arguments[i];

    }
    return total;
}
var x = sum.call(null, 1,2,3);
console.log(x);//6
function sum(){
    var total = 0;
    for(var i=0; i<arguments.length; i++){
        total += arguments[i];

    }
    return total;
}
var things = [1,2,3,4,53,2,4,5,6,1];
var x = sum.apply(null, things);
console.log(x);//81

bind()

  • bind must use the function expression
var a = function(){
    console.log(this);
}.bind(1);

a();//1
a();//1
a();//1
var a = function(){
    console.log(this);
}.bind(1);

var asim = {
    func: a 
}

asim.func(); //1

Example - bind() doesn't work the declaring a function. it only works with function expression.

function a(){
    console.log(this);
}.bind(1); // Syntax Error

"use strict";

var asim = {
    checkThis: function(){
        console.log(this); //asim object

        var checkOther = function(){
            console.log(this); // asim object! - not "undefined"
        }.bind(this); 
        
        checkOther();
    }
}
asim.checkThis();

References: