call、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
好了今天就到这了,有什么错误的欢迎评论提出。