Javascript中call、apply、bind函数

时间:2022-05-20 18:38:46

javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数

javascript中函数也是对象,call、apply、bind函数就是函数中的三个函数,这三个函数的作用就是改变调用当前函数中this指向。

call、apply、bind三个函数接收两个参数,第一个参数都是函数执行指向对象的this,第二参数是函数执行传递的参数数据,call和bind传递数据是变长参数,apply传递数据是数组。call和apply是立即执行的,而bind是返回一个函数,返回函数执行时才执行

有点绕,看例子

1、对象中函数

var obj={
x:0,
func:function(par1,par2){
this.x=par1+par2;
}
}

obj.x;//0

obj.func(1,2);

obj.x;//3

改变obj.func函数中this指向window

call方式:obj.func.call(window,3,3);或obj.func.call(null,3,3);//第一个参数为null也是指向window

    window.x;//6

apply方式:obj.func.apply(window,[3,4]);或obj.func.apply(null,[3,4]);

    window.x;//7

bind方式:var f=obj.func.bind(window,5,5);或var f=obj.func.bind(null,5,5);

    f();window.x;//10

 

改变obj.func函数中this指向新对象var o={};

调用方式和上面一样,只是把window或null换成o,调用o.x

 

2、普通函数

  var f=function或function f都一样,用function f方式举例

function f(x,y){
this.result=x+y;
}

f(1,2);

result;//3,此时this指向window,window.result也是3

改变f指向新对象

var o={};

f.call(o,2,3);

o.result;//5,此时并没有改变window.result值,window.result值仍然为3

 f.apply和f.bind与对象中函数调用一样,不赘述

 

此处要说明的是如果用构造函数创建对象,则函数中的this指向构造函数返回的新对象

var ff=new f(6,6);

ff.result;//12

var fff=new f(7,7);

fff.result;//14