相信大家都有这样的经历, 在某个项目中进行数据处理的时候, 为了方便处理, 封装了一些函数, 但是在未来的某个项目中, 遇到相同的场景, 可是之前封装的函数想不起来放哪儿了, 而封装了工具函数库以后, 后续使用起来会非常的方便.
**call()函数封装实现**
语法：call(fn,obj,...args)
- 功能：执行fn,使this为obj,并将后面的n个参数传给fn(功能等同于函数对象的call方法)
function call(Fn,obj,...args) {
//判断
if(obj === undefined || obj === null) {
obj = globalThis;//全局对象
}
//为obj添加临时的方法
obj.temp = Fn;
//调用temp方法
let result = obj.temp(...args);
//删除temp方法
delete obj.temp;
//返回执行结果
return result;
}
-------------测试---------------
<script>
// 声明一个函数
function add(a,b) {
console(this);
return a + b + this.c;
}
// 声明一个对象
let obj = {
c:521;
};
// 添加全局函数
window.c = 1314;
//执行call函数
console.log(call(add,obj,10,20));// 551
console.log(call(add,null,90,60));// 1464
</script>
**apply()函数封装实现**
语法：apply(fn,obj,args)
功能：执行fn,使this为obj,并将args数组中的元素传给fn(功能等同于函数对象的apply方法)
function apply(Fn,obj,args) {
//判断
if(obj === undefined || obj === null) {
obj = globalThis;
}
//为obj添加临时方法
obj.temp = Fn;
//执行方法
obj.temp(...args);
//删除临时数组
delete obj.temp;
//返回结果
return result;
}
---------------测试----------------------
<script>
// 声明一个函数
function add(a,b) {
console(this);
return a + b + this.c;
}
// 声明一个对象
let obj = {
c:521;
};
// 添加全局函数
window.c = 1314;
//执行apply函数
console.log(apply(add,obj,[10,20]));// 551
console.log(call(add,null,[30,40]));// 1384
</script>
**bind()函数封装实现**
语法：bind(fn,obj,...args)
功能：给fn绑定this为obj,并指定参数为后面的n个参数(功能等同于函数对象的bin方法)
function bind(Fn,obj,...args) {
//返回一个新的函数
return function(...args2) {
//执行call函数
return call(Fn,obj,...args,...args2);
}
}
-----------------测试----------------------
<script>
// 声明一个函数
function add(a,b) {
console(this);
return a + b + this.c;
}
// 声明一个对象
let obj = {
c:521;
};
// 添加全局函数
window.c = 1314;
//执行bind函数
let fn = bind(add,obj,10,20);
console.log(fn());
let fn2 = bind(add,obj);
console.log(fn2(10,20));
</script>
**总结**
区别call()/apply()/bind()
call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
注意: 如果obj是null/undefined, this为window
应用
call()/apply()应用: 根据伪数组生成真数组
bind(): react中组件的自定义方法 / vue中的事件回调函数内部
自定义call()/apply()
给obj添加一个临时方法, 方法名任意, 值为当前函数
通过obj调用这个临时方法, 并将接收的参数传入
删除obj上的这个临时方法属性
自定义实现bind()
返回一个新函数
在新函数内部通过原函数对象的call方法来执行原函数
指定原函数的this为obj
指定参数为bind调用的参数和后面新函数调用的参数
