JavaScript 高级之手写call方法

什么是 call 方法

在 JavaScript 中，call() 是一个内置的函数方法，它允许你在特定的作用域中调用函数，即可以改变函数执行时的 this 指向。

基本语法：

func.call(thisArg, arg1, arg2, ...)

原生 call 方法示例

const person = {
    name:"ling_wu"
}

function getName(){
    console.log(this.name)
}

// 使用call改变this指向
getName.call(person); //输出："ling_wu"

这个过程实际上的操作是person这个对象中创建了一个getName的函数，并且这个函数的this指向了person这个对象

person = {
    name:"ling_wu",
    getName:function(){
        console.log(this.name);
    }
}

getName执行完成后再从person对象中删除getName这个属性

手动实现 call 方法

有了上面的初步分析我们来初步实现

第一步：基本实现

Function.prototype.myCall = function(context){
    // getName.myCall(person)这个位置getName调用的myCall,所以this指向getName
    context.fn = this;
    const result = context.fn();
    delete context.fn;
    return result;
}

第二步：考虑参数

call是可以传递参数的，并且是都喊分隔，可以使用es6的...args来接收

Function.prototype.myCall = function(context,...args){
    context.fn = this;
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

第三步：对传入null做处理

call函数中如果传入的是null则默认指向全局对象（MDN中call函数是这样描述的）,所以给context赋值一个默认值

Function.prototype.myCall = function(context,...args){
    context = context || window;
    context.fn = this;
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

第四步：对fn属性名做唯一处理，怕属性名冲突

Function.prototype.myCall = function(context,...args){
    context = context || window;
    const fn = Symbol('fn')
    context[fn] = this;
    const result = context[fn](...args);
    delete context[fn];
    return result;
}

使用示例

const person = {
    name:"ling_wu"
}

function getName(age,sex){
    console.log(`name:${this.name},age:${age},sex:${sex}`)
}

//使用原生的call
getName.call(person,26,'男'); //输出：name:ling_wu,age:26,sex:男

//使用我们自己实现的myCall
getName.myCall(person,26,'男'); //输出：name:ling_wu,age:26,sex:男

📢 关于作者
嗨！我是头发秃头小宝贝，一名热爱技术分享的开发者，专注于Vue / 前端工程化 / 实战技巧等领域。
如果这篇文章对你有所帮助，别忘了 点赞 👍、收藏 ⭐ 和 关注 👏，你的支持是我持续创作的最大动力！