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

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


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

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

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

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


call、apply、bind方法的不一样点:this

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


1、callprototype

call()code

语法: 对象

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上面全部的方法和属性;


2、apply()


语法:

apply([thisObj[,argArray]])


定义:

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


说明:

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


call 和 apply的区别: 做用彻底同样,只是call按顺序接收参数,apply把参数放在数组里面;


Call和apply的使用场景区分:

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

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



3、bind

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

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

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

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


理解运用apply、call:

一、当传入参数的个数是不肯定的时候,打印出函数传入的全部参数?

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

log(1); 1
Log(1,2) 1,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));    
       }
   };
}
复制代码

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

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

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

相关文章
相关标签/搜索