快速理解JavaScript中的call、apply、bind的方法

转载 2018年04月17日 14:52:38

在JavaScript中,call、apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。


call、apply、bind方法的共同点和区别:

1. 都是用来改变函数的this对象的指向的;

2. 第一个参数都是this要指向的对象,也就是想指定的上下文;

3. 都可以利用后续参数传参;


call、apply、bind方法的不同点:

bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。


一、call

call()

语法:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])


定义:

调用一个对象的一个方法,以另一个对象替换当前对象。


说明:

call 方法可以用来代替另一个对象调用一个方法。

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。


thisObj的取值有以下4种情况:

(1) 不传,或者传null,undefined, 函数中的this指向window对象。

(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用。

(3) 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean。

(4) 传递一个对象,函数中的this指向这个对象。


常用场景:

原型的继承:

Function Student(){

Person.call(this,arguments);

}

用Student对象代替Person对象,这时Student可以继承Person上面所有的方法和属性;


二、apply()


语法:

apply([thisObj[,argArray]])


定义:

应用某一对象的一个方法,用另一个对象替换当前对象。


说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将报错。    如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。


call 和 apply的区别:

作用完全一样,只是call按顺序接收参数,apply把参数放在数组里面;


Call和apply的使用场景区分:

参数是明确知道数量时用 call ;

而不确定的时候用 apply,然后把参数 push 进数组传递进去;



三、bind

bind是在ES6中扩展的方法(IE6,7,8不支持)

bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

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

     注意:bind方法的返回值是函数


理解运用apply、call:

1、当传入参数的个数是不确定的时候,打印出函数传入的所有参数?

function log(){
console.log.apply(console,arguments);
}

log(1); 1
Log(1,2) 1,2

2、给每一个 log 消息添加一个"(app)"的前辍?

Function log(){
var args=Array.prototype.slice.call(arguments);
Args.unshift(“app”);
Console.log.apply(console,args);
}

总结:

1. apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;

2. 三者第一个参数都是this要指向的对象,也就是想指定的上下文;

3. 三者都可以利用后续参数传参;

4. bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。


附:IE6-8自定义bind方法(IE6-8不兼容bind)

原理:

通过对Function的prototype原型进行扩展,可以为IE6~8自定义bind方法。

代码如下:

if (!function() {}.bind) {
  Function.prototype.bind = function(context) {
      var self = this
          , args = Array.prototype.slice.call(arguments);

      return function() {
          return self.apply(context, args.slice(1));    
      }
  };
}

1、用call为函数的参数绑定splice方法;

2、给Function函数的this改变成bind传入的this对象;

3、把参数从第二个计算(第一个是传入的this对象);


来源:千锋HTML5

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务...
  • chenleixing
  • chenleixing
  • 2015-03-14 14:14:32
  • 6460

js中call,apply和bind方法的区别和使用场景

详解js中的call,apply和bind函数
  • yaojxing
  • yaojxing
  • 2017-05-14 12:09:42
  • 2507

JS中的call、apply、bind方法详解

一、call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调...
  • hj7jay
  • hj7jay
  • 2016-12-13 14:31:03
  • 1329

JS中call、apply、bind大概区别

为什么需要这些?主要是因为this,来看看this干的好事。box.onclick = function(){   function fn(){     alert(this);   }   fn()...
  • lizeshi125
  • lizeshi125
  • 2016-12-15 14:53:33
  • 3120

详解call(),apply()和bind()

之前看了点es6的箭头函数,为了搞懂箭头函数的this,看了很多文章,也顺便看了几个绑定函数,发现很多以前没注意的问题,收获不少。   之前就在网上的笔试题中看过用js实现bind()函数,没怎么在意...
  • u014267183
  • u014267183
  • 2016-09-21 17:32:57
  • 9661

apply、call、bind区别、用法

apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向); 如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个...
  • A_dangdang
  • A_dangdang
  • 2016-03-26 12:08:44
  • 11550

深入理解函数内部原理(六)——函数的内部方法call、apply、bind

call和apply这两个方法都是打破了解析器在函数调用时创建执行环境时赋值this绑定的时候的内部规则,直接通过Function内置标准类型的prototype属性中的两个方法call和apply进...
  • wmaoshu
  • wmaoshu
  • 2017-03-08 21:22:31
  • 1136

关于JS中Apply和Call的一些理解

前言:大概从8月份开始就接触H5项目了,所用到的代码就是JS,所以准备找个时间 来总结下JS的一些基本知识. 第一部分:关于JS的apply与call方法 一开始也是被网上的各种资料弄的云里雾里的,最...
  • u010979495
  • u010979495
  • 2015-11-04 19:55:17
  • 1981

call apply 和 bind的区别

apply 和call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。 J...
  • sinat_32546159
  • sinat_32546159
  • 2017-09-19 10:37:21
  • 845
收藏助手
不良信息举报
您举报文章:快速理解JavaScript中的call、apply、bind的方法
举报原因:
原因补充:

(最多只允许输入30个字)