apply\call\bind notes

effect

Existing by changing the context of a function at runtime, that is, changing the this point inside the function

difference

The parameters are different

call()
语法：（thisobj[, arg1[,arg2[,[,…argN]]]]）
fun.call(obj, arg1, arg2);

apply()
语法:(thisobj[, arr])
fun.call(obj, arr);

bind()
语法：（thisobj[, arg1[,arg2[,[,…argN]]]]）
fun.bind(obj, arg1,arg2);

//示例代码
banana = {
    color: "yellow"
}

var apple = {
    color:'apple',
    say: function(str1, str2){
	console.log(this.color, str1, str2)
    }
}
var  temp = apple.say.bind({color:'bind'});
var temp2 = apple.say.bind({color:'bind'}, 'c1', 'c2');

apple.say.call(banana);     
apple.say.apply(banana);   
apple.say.call(banana, 'a1', 'a2');     
apple.say.apply(banana, ['b1', 'b2']);  

//调用时候才执行
temp(); 
temp2();

Different call time

bind is to return the corresponding function, which is convenient to call later; apply and call are to call immediately.

Special usage and excellent code

Follow-up improvement

Follow-up improvement

The following is messy, you don't need to look at it, it will be clean in the follow-up

A major feature of JavaScript is that functions have the concepts of "definition-time context" and "run-time context" and "context can be changed".

For apply and call, the effect is exactly the same, but the way of accepting parameters is different.

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

Special usage:
inside: https://www.cnblogs.com/coco1s/p/4833199.html

The bind() method is similar to apply and call, and it can also change the direction of this in the function body.

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

Other uses of bind:

(Slowly study)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Another simplest use of the partial function bind() is to make a function have preset initial parameters. These parameters (if any) follow this (or other objects) as the second parameter of bind(), and then they will be inserted at the beginning of the parameter list of the target function, and the parameters passed to the bind function will be Follow them.

And the use of settimeout

//优秀代码
function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
 
  console.log.apply(console, args);
};

ps: The content of this article is a collection of notes from many articles and codes collected on the Internet! So the article type is "translation". I apologize for some URLs not included in the article! Thanks again .