call、apply、bind的用法

call、apply、bind的用法

callapplybindcall、apply、bind的应用场景

call

先直接看代码

var obj = { t:'obj t' }; var t= 'window t'; function tFun (i){ console.log(this.t); console.log(`i=>${i}`); } tFun(11);//打印 'window t'; 'i=>11' //下面用call进行调用 tFun.call(obj,11)//打印 'obj t'; 'i=>11'

从上面的代码运行结果来看，第一次tFun运行是，this.t 显然是指的window下的t变量，因此为’window t’,而第二用call进行调用时，call的第一个参数为obj，第二个给了一个11，但最后打印结果this.t却为‘obj t’,且打印的i的值为11，因此call的用法不言而喻。 现在给出两个答案： 1. call具有改变函数内部this指向的效果 2. call在调用函数的同时，第一个参数后的实参，皆为该函数的实参。

apply

先直接看代码

var obj = { t:'obj t' }; var t= 'window t'; function tFun (i){ console.log(this.t); console.log(`i=>${i}`); } tFun(11);//打印 'window t'; 'i=>11' //下面用apply进行调用 tFun.apply(obj,[11])//打印 'obj t'; 'i=>11'

代码上面的代码几乎一样，其实call与apply的作用时一样的，call回把第二个实参后的参数通通传给调用的函数，而apply则是把要要传给函数的的参数通通都给在apply的第二个参数里，因此apply的第二个参数的类型必须为数组。

bind

var obj = { t:'obj t' }; var t= 'window t'; function tFun (i){ console.log(this.t); console.log(`i=>${i}`); } tFun(11);//打印 'window t'; 'i=>11' //下面用bind进行调用 var tFun2 = tFun.bind(obj) tFun2(1);//打印 'obj t'; 'i=>11'

看上面的代码用bind的进行调用的时，发现函数并没有直接执行，而是返回的一个新的函数。我们在调用返回的新的函数的时候，函数内部的this.t指向了obj中的t，由此看出bind会放回一个新的函数，且放回的新函数中的this有传入的参数决定。

call、apply、bind的应用场景

//1.对象继承 function Obj1 (name,age){ this.name = name || null; this.age = age || null; } function Obj2 (name,age){ Obj1.call(this,name,age); //Obj1.apply(this,[name,age]) 得到的效果是一样的 } var obj2 = new Obj2('张三','25'); console.log(obj2.name); console.log(obj2.age); //2. 对象方法调用简化 var querySelector = document.querySelector.bind(document); //定义后调用querySelector与调用document.querySelector得到的结果是一样的，就省去了没次的document //如果直接var querySelector = document.querySelector;后面调用querySelector函数时是会报错的这里需要注意，因为这是内部的this还是widnow而不是document哟！ //3.利用apply进行数组求最大值 var arr = [1,2,10,4,5]; var max = Math.max.apply(null,arr); console.log(max);//10

好了今天就到这了，有什么错误的欢迎评论提出。