unction foo() {
console.log(this)
}
foo()//window
var arr1=[]
foo.call(arr1))//[]
// call原理
Function.prototype.myCall=function (target) { //形参就相当于 var target=undefined
/*
实现原理:把目标函数foo绑定在目标对象target上(本来函数的this指向window,但是想要让this指向我们指定的对象,所以有下面这些操作)
1. 获取目标对象
2. 获取目标函数 foo,并把目标函数foo绑定到目标对象上
3. 执行目标函数并返回
*/
//如果传参则使用Object()包裹一下,有可能不是一个对象,若没有传参默认为window
target=target ? Object(target) : window
//将targetFunction绑定到target上,targetFunction是定义的临时属性
target.targetFunction=this
//获取传入的除了target以外剩余的参数
let args=[...arguments].slice(1)
let result=target.targetFunction(...args)
//删除临时属性
delete target.targetFunction
return result
}
var arr1=[]
foo.myCall(arr1))//arr1 []
注意:target.targetFunction=this这行代码的意思就是把foo.call(arr1) 中的foo函数挂载到arr1上。当执行foo.myCall() 时, myCall里的 this 指向调用者foo,所以这里的this就是foo函数。
javascript调用一个函数有两种方法,
(1)直接使用函数名以及对应的参数
(2)使用call进行调用
定义一个函数
/**
* 两数相加得到结果
* @param {double} x
* @param {double} y
* @returns 相加结果
*/
function CalNum(x,y){
return x+y;
}
// 正常调用函数
var x=1, y=2;
var ret=CalNum(x,y);
console.log("正常调用的结果是:" + ret);
结果是:
正常调用结果是:3
//使用call调用当前的函数
var obj={
name:"x"
}
var ret2=CalNum.call(obj,x,y);
console.log("采用call调用的结果是:" + ret2);
注意:使用call调用的时候。funcion中的this将变成obj而不是function本身的this.
或者使用空对象来进行
var ret2=CalNum.call({},x,y);
最终的结果是
采用call调用的结果是:3
使用call的核心是是改变function的this指向问题,不再是指向本身,而是指向传入的对象。
文分享自华为云社区《关于 JavaScript 中 call 方法的实现,附带详细解析!-云社区-华为云》,作者:CoderBin。
本文将全面的,详细解析call方法的实现原理,并手写出自己的call方法,相信看完本文的小伙伴都能从中有所收获。
创作不易,你们的点赞收藏留言就是我最大的动力
如果文中有不对、疑惑的地方,欢迎各位小伙伴们在评论区留言指正
调用函数,可传入参数,改变this指向
1. 边界判断
2. 将调用的函数设置为对象(传入的context)的方法(改变this指向)
3. 调用函数,得到返回值,并返回
/**
* !实现 binCall() 方法
* @param {*} context 绑定的对象
* @param {...any} args 剩余参数
* @returns
*/
Function.prototype.binCall=function(context, ...args) {
if (typeof this !=='function') console.error('type Error'); // 1
context=(context!==null && context!==undefined) ? Object(context) : window
context.fn=this // 2
const result=context.fn(...args) // 3
delete context.fn;
return result
}
// 测试
function sum(num1, num2) {
console.log('sum 被执行', this);
return num1 + num2
}
// 原生的 call() 方法
console.log(sum.call({name: 'bin'},1,2));
// 自定义的 binCall() 方法
console.log(sum.binCall({name: 'bin'},1,2));
经过原生的call方法和手写的binCall方法测试,我们手动实现的binCall方法也能实现原生call方法的功能
通过在传入的对象上,临时新增一个方法,这个方法的值是当前 binCall 的调用者。然后 context.fn(...argArray) 调用这个函数,通过隐式绑定的方式改变了 this 的指向,最后得到结果并返回
点击下方,第一时间了解华为云新鲜技术~
华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云
*请认真填写需求信息,我们会在24小时内与您取得联系。