JavaScript中的call,apply和bind方法

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

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

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

apply()

apply 的写法

Function.apply(obj,[argArray])

  • 它的调用者必须是函数 Function,并且只接收两个参数,第一个参数的规则与 call 一致。
  • 第二个参数,必须是数组或者类数组,它们会被转换成类数组,传入 Function 中,并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间,很重要的一个区别
func.apply(obj, [1,2,3])
// func 接收到的参数实际上是 1,2,3
func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// func 接收到的参数实际上是 1,2,3

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

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

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

call()

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

call 的写法

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

func.call(obj, 1,2,3)
// func 接收到的参数实际上是 1,2,3

func.call(obj, [1,2,3])
// func 接收到的参数实际上是 [1,2,3],undefined,undefined
var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

常见的call 和 apply 用法

数组之间追加

let arr1 = [12, 'foo', {name: 'fanchao'}, -1024];
let arr2 = ['copyes', '22', 1024];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// [ 12, 'foo', { name: 'fanchao' }, -1024, 'copyes', '22', 1024 ]

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

let numbers = [5,665,32,773,77,3,996];
let maxNum = Math.max.apply(Math, numbers);
let maxNum2 = Math.min.call(Math, 5,665,32,773,77,3,996);

console.log(maxNum);
console.log(maxNum2);

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

function isArray(obj){
    return Object.prototype.toString.call(obj)  === '[object Array]';
}

console.log(isArray(1));
console.log(isArray([1,2]));

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

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

bind()

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

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

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}

add.bind(sub, 5, 3); // 这时,并不会返回 8
add.bind(sub, 5, 3)(); // 调用后,返回 8
var person = {
  name: 'person',
  getName: function() {
    return this.name;
  }
}
var boy = {
   name: 'twy'
}
// bind()返回一个新函数,供以后调
var getName = person.getName.bind(boy);

// 现在调用
console.log(getName());    // 输出twy

一个有意思的事:

var bar = function() {
    console.log(this.x);
}
var foo = {
    x: 3
}
var sed = {
    x: 4
}
var func = bar.bind(foo).bind(sed);
func(); //3

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

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

Function.prototype.bind = function(context) {
  // 保存调用函数的引用,这里是getName()
  var self = this;
  // 返回一个新函数
  return function(){
    return self.apply(context, arguments);
  }
}
var person = {
  name: 'twy'
}
var getName = function(){
  console.info(this.name);
}.bind(person);
// 执行bind()方法内返回的新函数
getName();

在返回的新函数内部,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(猫,小怪兽)
  • 猫也可以打小怪兽了
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容