JavaScript中的call,apply和bind方法

原创 黄灿灿 随笔 笔记 135阅读 2019-01-03 15:47:00 举报

bind函数作用、应用场景以及模拟实现

this、apply、call、bind,这篇不错

js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改变函数运行时上下文,最终的返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。

apply()

apply 的写法

  • 它的调用者必须是函数 Function,并且只接收两个参数,第一个参数的规则与 call 一致。
  • 第二个参数,必须是数组或者类数组,它们会被转换成类数组,传入 Function 中,并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间,很重要的一个区别

使用 apply, 你可以继承其他对象的方法:

注意这里apply()的第一个参数是null,在非严格模式下,第一个参数为null或者undefined时会自动替换为指向全局对象,
apply()的第二个参数为数组或类数组。

call()

call()是apply()的一颗语法糖,作用和 apply() 一样,同样可实现继承,唯一的区别就在于call()接收的是参数列表,而apply()则接收参数数组

call 的写法

  • 调用 call 的对象,必须是个函数 Function。
  • call 的第一个参数,是一个对象。 Function 的调用者,将会指向这个对象。如果不传,则默认为全局对象 window。
  • 第二个参数开始,可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上。但是如果将所有的参数作为数组传入,它们会作为一个整体映射到 Function 对应的第一个参数上,之后参数都为空。

常见的call 和 apply 用法

数组之间追加

获取数组中的最大值和最小值

验证是否是数组(前提是toString()方法没有被重写过)

类(伪)数组使用数组方法,使用 Array 原型链上的方法

bind()

MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

bind()的作用与call()和apply()一样,都是可以改变函数运行时上下文,区别是call()和apply()在调用函数之后会立即执行,而bind()方法调用并改变函数运行时上下文后,返回一个新的函数,供我们需要时再调用。

一个有意思的事:

在Javascript中,多次 bind() 是无效的。更深层次的原因, bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

用apply()模拟实现bind():

在返回的新函数内部,self.apply(context, arguments)才是执行原来的getName函数,相当于执行getName.apply(person);

  • 如果不需要关心具体有多少参数被传入函数,选用apply();
  • 如果确定函数可接收多少个参数,并且想一目了然表达形参和实参的对应关系,用call();
  • 如果我们想要将来再调用方法,不需立即得到函数返回结果,则使用bind();
  • call()、apply()和bind()都是用来改变函数执行时的上下文,可借助它们实现继承;
  • call()和apply()唯一区别是参数不一样,call()是apply()的语法糖;
  • bind()是返回一个新函数,供以后调用,而apply()和call()是立即调用

分享一个在知乎上看到的,关于 call 和 apply 的便捷记忆法

  • 猫吃鱼,狗吃肉,奥特曼打小怪兽。
  • 有天狗想吃鱼了
  • 猫.吃鱼.call(狗,鱼)
  • 狗就吃到鱼了
  • 猫成精了,想打怪兽
  • 奥特曼.打小怪兽.call(猫,小怪兽)
  • 猫也可以打小怪兽了
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复