浅谈call()、apply()、bind()方法

zhangrxiang 发布于2019-08-21 12:02 / 1031人阅读

摘要：函数调用方法一般我们是这样调用函数的和现在我们说一说方法和方法。他们都是调用一个对象的方法，以另一个对象替换当前对象。例如方法在上面的例子中，，意思就是用来替换。和方法比较类似，其作用都是改变上下文的。

call(), apply(), bind() 函数调用方法

一般我们是这样调用函数的：

function add(x){
    console.log(x)
}
add(2)//2

call()和apply()

现在我们说一说 call 方法和 apply 方法。他们的第一个参数都是需要调用的函数对象，在函数内这个参数就是this的值。call 和 apply 的区别在于 call 传的值可以是任意的，而 apply 传的值必须是数组。

他们都是调用一个对象的方法，以另一个对象替换当前对象。

例如：

function add(a,b){
    return a+b;
}
function sub(a,b){
    return a-b;
}
var a1 = sub.call(add,5,3);
var a2 = add.call(sub,5,3);
/* apply 方法
var a1 = sub.apple(add,[5,3])
var a2 = add.apple(sub,[5,3])
*/
console.log(a1)//2
console.log(a2)//8

在上面的例子中，sub.call(add,5,3) = sub(5,3)，意思就是用 sub 来替换 add 。

bind()

bind 和 call 方法比较类似，其作用都是改变上下文的this。但是它们还是有些许区别：

bind 的返回值是函数

//都是将obj作为上下文的this
function func(name,id) {
    console.log(name,id,this);
}
//什么也不加
func("", "-->"); //---> window
//使用bind是 返回改变上下文this后的函数
var obj = "Look here";
var a = func.bind(obj, "bind", "-->");
a(); //bind--->
//使用call是 改变上下文this并执行函数
var b = func.call(obj, "call", "-->");//call--->
b(); //TypeError: undefined is not a function

后面的参数的使用也有区别

function f(a,b,c){
    console.log(a,b,c);
}
var f_Extend = f.bind(null,"extend_A")
f("A","B","C")  //这里会输出--> A B C
f_Extend("A","B","C")  //这里会输出--> extend_A A B
f_Extend("B","C")  //这里会输出--> extend_A B C
f.call(null,"extend_A") //这里会输出--> extend_A undefined undefined

call 是把第二个及以后的参数作为方法的实参传进去;
而bind 虽说也是获取第二个及以后的参数用于之后方法的执行，但是f_Extend中传入的实参则是在bind中传入参数的基础上往后排的。

//这句代码相当于以下的操作
var f_Extend = f.bind(null,"extend_A")
//↓↓↓
var f_Extend = function(b,c){
    return f.call(null,"extend_A",b,c);
}

GPU云服务器云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply apply()方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87375.html

浅谈-this

摘要：回调函数中调用在回调函数中一般有两种情况回调函数为匿名函数时，回调函数的会指向，需要对回调函数。回调函数为箭头函数时，回调函数的会指向他的直接上层。浅谈-this this简单而又神秘，使用场景多变而又复杂，这造就了它成为了初级javascript开发人员不愿接触的东西，高级javascript都想探究的东西。文本亦是对this的致敬。 this是什么？ this是当前执行环境...

archieyang 2019-08-23 16:16 评论0 收藏0
浅谈javascript里面的this、call、apply、bind

摘要：如果该参数的值为或，则表示不需要传入任何参数，从开始可以使用类数组对象。当使用操作符调用绑定函数时，该参数无效。当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。在了解call,apply之前需要先了解下javascrit中this指向 this的指向在ES5里面，this永远指向最后调用它的那个对象举个栗子： var name = outerName; function...

Lemon_95 2019-08-22 11:21 评论0 收藏0
浅谈 javascript 中的this绑定问题

摘要：绑定使用方式进行调用函数时，会发生构造函数的调用。先上图，然后根据文字阅读使用调用函数之后，该函数才作为构造函数进行调用，构造一个全新的对象赋值给，而对象的指向了的对象，的对象有一个属性指向的构造函数这个就是的原型链，也是的特性。 javascript语言是在运行时前即进行编译的，而this的绑定也是在运行时进行绑定的。也就是说,this实际上是在函数被调用时候发生绑定的，它指向什么完...

duan199226 2019-08-22 16:18 评论0 收藏0
Underscore 源码（三）随机洗牌算法

摘要：随机洗牌算法说实话，以前理解数组的排序，都是将数组按照一定的逻辑由大到小或者由小到大排序，我自己是没有碰到过随机打乱数组排序的问题。然后里用的是所谓的洗牌算法，很高效。总结又是三个知识点，分别是随机洗牌分组和函数的实现，没什么复杂的。这是第三篇关于 Underscore 的源码解读，最近一段时间学的东西很少，自己太忙了，一方面忙着找实习，晚上回去还要写毕业论文。毕业论文真的很忧伤，因...

silencezwm 2019-08-20 16:42 评论0 收藏0
浅谈 apply 和 call

摘要：要想记得牢，首先要记住它存在的目的。或可以看出和是为了动态改变而出现的，如果一个没有某个方法，而别的有，那么就用得上和了。那和有什么区别呢请看下边这个例子很容易就可以看出和的区别就是传参数的方式不同。要想记得牢，首先要记住它存在的目的。在javascript OPP中，我们经常这样定义： function person(){} person.prototype = { nam...

arashicage 2019-08-22 15:00 评论0 收藏0