深入理解 JavaScript 中的 call 方法实现

什么是 call 方法

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

基本语法:

javascript 复制代码
func.call(thisArg, arg1, arg2, ...)

原生 call 方法示例

javascript 复制代码
const person = {
    name:"ling_wu"
}

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

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

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

javascript 复制代码
person = {
    name:"ling_wu",
    getName:function(){
        console.log(this.name);
    }
}

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

手动实现 call 方法

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

第一步:基本实现

javascript 复制代码
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来接收

javascript 复制代码
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赋值一个默认值

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

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

javascript 复制代码
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;
}

使用示例

javascript 复制代码
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 / 前端工程化 / 实战技巧 等领域。

如果这篇文章对你有所帮助,别忘了 点赞 👍收藏 ⭐关注 👏,你的支持是我持续创作的最大动力!

相关推荐
弗锐土豆11 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku14 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined216 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo20 分钟前
搭建第一个Shopify App
前端·程序员
wangpq23 分钟前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
然我24 分钟前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee24 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C24 分钟前
常见web攻击类型
前端·http
jackyChan25 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript