apply\call\bind 笔记

作用

  • 改变某个函数运行时的上下文(context)而存在的,也就是改变函数内部this指向

不同点

  • 参数不同

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();
  • 调用时间不同

bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

特殊用法和优秀代码

  • 后续完善

后续完善

下面的比较乱,可以不看,后续会统计干净

JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。

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

特殊用法:
在里面:https://www.cnblogs.com/coco1s/p/4833199.html

bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

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));
    }
}

bind的其他用法:

(慢慢研读)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

偏函数
bind()的另一个最简单的用法是使一个函数拥有预设的初始参数。这些参数(如果有的话)作为bind()的第二个参数跟在this(或其他对象)后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。

和settimeout的使用

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

ps:本文内容是摘自网上搜集的众多文章和代码集合而成的笔记! 所以文章类型是"翻译". 对于一些网址没有写到文中,深表歉意! 再次感谢.

猜你喜欢

转载自blog.csdn.net/a519991963/article/details/84143033