1、什么是call?
MDN上解释:使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
2、为什么要用call?
众所周知,this指向就是谁调用它就指向谁,使用call,可以将this的指向进行改变
3、call的用法?
call(thisArg,arg1,arg2,arg3...)
thisArg:函数运行时使用的this
arg1,arg2,arg3:参数列表
警告:在非严格模式下,this的指向为null或者undefined会自动指定为全局对象,原始值会被包装。
4、call有返回值么?
call是有返回值的,如果这个方法是没有返回值的,那么就返回undefined
5、call示例:
function person (name, age) {
this.name = name;
this.age = age
}
function woman () {
person.call(this,'beautyTang',22)
// 1、将person的this指向改为woman的this指向
// 2、将person函数放在woman函数中运行,'beautyTang',22都是person的参数,指向name和age
}
console.log(new woman()) // 输出woman {name: "beautyTang", age: 22} 此时的this指向woman
console.log(new woman().name) //输出beautyTang
6、call源码解析
就上面的示例来讲,call是怎么实现改变this指向的呢?
Function.prototype.call = function(context) {
context = context || window // 判断context是否存在,存在则为context 不存在则赋予全局作用域
context.fn = this // 谁调用这个函数,this就指向谁
var arg = [] // 存储参数
for(let i =0; i<arguments.length;i++) { // 将所有的参数都push到arg里面
arg.push('arguments[' + i + ']')
}
//此处运用es6的语法 拓展运算符
var result = ctx.fn(...array) //es3的方法 var reslut = eval('ctx.fn(' + array + ')') 严格模式下不允许使用eval方法。
delete ctx.fn // 删除属性
return result // 返回result
}
call的最终目的:将fn添加到对象中并执行该函数,最终删除该属性返回result
7、最后
每天我都会更新一篇源码解析,希望在前端的路上我们走的都顺利。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。