javascript中apply/call和bind的使用

fun.apply(context,[argsArray])

立即调用fun，同时将fun函数原来的this指向传入的新context对象，实现同一个方法在不同对象上重复使用。

context:传入的对象，替代fun函数原来的this；

argsArray:一个数组或者类数组对象，其中的数组参数会被展开作为单独的实参传给 fun 函数，需要注意参数的顺序。

fun.call(context,[arg1],[arg2],[…])

同apply，只是参数列表不同，call的参数需要分开一个一个传入。如果不知道参数个数，则使用apply。

使用：

Math.max()只接收单独的参数，通过下面的方法可以在数组上面使用max方法：

Math.max.apply(null, array)；//会将array数组参数展开成单独的参数再传入
Array.prototype.push.apply(arr1,arr2);//将一个数组拆开push到另一个数组中；不用apply则会将后续数组参数当成一个元素push进去。
Array.prototype.slice.call(arguments);//在类素组对象上使用slice方法

fun.bind(context,[arg1],[arg2],[…])

使fun方法执行的context永不变。

arg1:要传递到新函数的参数列表

返回一个函数供后续调用，其函数体和原函数fun一样，但新函数的this指向新传入的context对象。新函数具有指定的初始参数，后续调用时的实参要往后面排。

var displayArgs = function (val1, val2, val3, val4) {
 console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时指定了2个参数
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数，往后排
displayArgs2("b", "c");
// Output: 12 a b c

使用bind()方法改写slice()方法：

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind()兼容Ie5~ie8处理

if (!Function.prototype.bind) {
 Function.prototype.bind = function(context) {
  var self = this, // 即调用bind方法的目标函数
  args = arguments;
  return function() {
   self.apply(context, Array.prototype.slice.call(args, 1));
  }
 }
}

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例，就可以使用bind()将this绑定到调用对象。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 实例讲解JavaScript中call、apply、bind方法的异同

    实例讲解JavaScript中call、apply、bind方法的异同

    以实例切入,讲解JavaScript中call,apply,bind方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function MAN(name, sex, age) { this.name =

  • 浅谈javascript的call()、apply()、bind()的用法

    JavaScript中的函数不仅是一种类似于Java中方法的语言功能,它还可以作为对象而存在. 本文将要探讨JavaScript中函数的一些特殊用法,包括call.apply.bind三个原型方法. 一.函数基础 JavaScript中的函数是一种类似于Java中方法的语言功能,不过它可以独立于类进行定义. 函数式编程:由于JavaScript支持匿名函数,因此可以将函数作为对象来使用, 所以JavaScript不仅支持过程式编程(面向对象也是过程式编程的一种),还支持函数式编程. 上下文 函数

  • js apply/call/caller/callee/bind使用方法与区别分析

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对

  • 跟我学习javascript的call(),apply(),bind()与回调

    一.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.简单的说就是改变函数执行的上下文,这是最基本的用法.两个方法基本区别在于传参不同. call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null.参数以逗号分开进行传值,参数可以是任何类型. apply(obj,[arg1,arg2,arg3]); appl

  • javascript中call,apply,bind的用法对比分析

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用","请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用不成.可是你非打这个电话不可,于是你可以去借一下朋友的手机,或者借用一下邻居的手机,或者公用电话,这样呢,你就可以在自己

  • 关于JS中的apply,call,bind的深入解析

    在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一

  • javascript中apply、call和bind的使用区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 浅谈javascript中call()、apply()、bind()的用法

    call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, args]) 作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组 还是举例说明比较直观: wind

  • Javascript中call，apply，bind方法的详解与总结

    以下内容会分为如下小节: 1.call/apply/bind方法的来源 2.Function.prototype.call() 3.Function.prototype.apply() 3.1:找出数组中的最大数 3.2:将数组的空元素变为undefined 3.3:转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call,apply,bind方法的联系和区别 1.call/apply/bind方法的来源 首先,在使用call,apply,

随机推荐