清晰明了搞懂 call、apply、bind 的区别

文章目录


直接来看 call 例子:

var People = {
  sayHello: function(arg1) {
    console.log('你好,' + this.name + ',' + arg1)
  }
}
var me = {
  name: 'Neveryu'
}
People.sayHello.call(me, '很高兴见到你')  // 你好,Neveryu,很高兴见到你

再来看 apply 例子:

var People = {
  sayHello: function(arg1) {
    console.log('你好,' + this.name + ',' + arg1)
  }
}
var me = {
  name: 'Neveryu'
}
People.sayHello.apply(me, ['很高兴见到你'])  // 你好,Neveryu,很高兴见到你

结果都相同。从写法上我们就能看出二者之间的异同。相同之处在于,第一个参数都是要绑定的上下文,后面的参数是要传递给调用该方法的函数的。
不同之处在于,call 方法传递给调用函数的参数是逐个列出的,而 apply 则是要写在数组中。

核心要点: 可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 Object 没有某个方法,但是呢,其它的对象有,我们可以借助 call 或 apply 用其它对象的方法来操作。(用别人的,好过分啊~~)

实际用例:
举一个在实际中会用到的例子吧:

我们知道,通过 document.getElementsByTagName 选择的 dom 节点是一种类似 array 的 array 。它不能应用 Array 下的 push、pop 等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"))

这样 domNodes 就可以应用 Array 下的所有方法了。

上面这 5 行内容是啥意思??
首先,document.getElementsByTagName("*") 得到的是一个 NodeList。【可以参考这里:getElementsByTagName() 方法】它是一个 array-like object,常见的 array-link object 有:argumentsnodelist。他们不是数组,不能使用数组的一些方法。

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*")) 就是将数组的 slice 方法调用的主体变成了这个 document.getElementsByTagName("*")document.getElementsByTagName("*") 使用 slice 方法后会发生什么呢?去熟悉一个 slice 的意思后,你就会知道它会返回一个数组。那么我们得到的 domNodes 就是一个 document.getElementsByTagName("*") 的数组了,就可以使用数组的所有方法咯!~


再来看 bind 例子:

var People = {
  sayHello: function(arg1) {
    console.log('你好,' + this.name + ',' + arg1)
  }
}
var me = {
  name: 'Neveryu'
}
People.sayHello.bind(me, '很高兴见到你')()  // 你好,Neveryu,很高兴见到你
People.sayHello.bind(me, ['很高兴见到你'])()  // 你好,Neveryu,很高兴见到你

bind 方法传递给调用函数的参数可以逐个列出,也可以写在数组中。bind 方法与 call、apply 最大的不同就是前者返回一个绑定上下文的函数,而后者是直接执行了函数。由于这个原因,上面的代码也可以这样写:

var People = {
  sayHello: function(arg1) {
    console.log('你好,' + this.name + ',' + arg1)
  }
}
var me = {
  name: 'Neveryu'
}
People.sayHello.bind(me)('很高兴见到你')  // 你好,Neveryu,很高兴见到你
People.sayHello.bind(me)(['很高兴见到你'])  // 你好,Neveryu,很高兴见到你

bind 方法还可以这样写 fn.bind(obj, arg1)(arg2)

用一句话总结 bind 的用法:该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入 bind 方法的第一个参数作为 this,传入 bind 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值