【成长之路】JavaScript中，模拟 call 的底层实现

很多人都说IT人员的黄金年龄在 35岁以下，过了保质期就会被淘汰，但是，事实真的是这样吗？我见过40岁以上的IT人员，他们并没有被这个行业所淘汰，相反，他们可以比年轻的IT人员拥有更高的工作效率，因为他们有更多的开发经验，他们有更深的知识储备，他们一直在充实自己，给自己充电。因为他们明白，不努力，不充实自己，不紧跟技术的发展，被淘汰是早晚的事情。

从事前端工作三年多，工作有忙也有闲，闲的时候也会学习给自己充电，但是，总是感觉学的多，忘得更多，总是感觉自己在抓不到重点的学，每天感觉都很迷茫，感觉自己对于好多的知识都很模糊，虽然知道的多，了解的多，但是好多东西其实只是学到了皮毛。参加【拉勾教育大前端高薪训练营】已经两个多月了，每天听完课以后，都会记笔记，然后通过博客，我感觉这种方式很好，在写博客的过程中，我会把每天学习的新的知识点再看一遍，这样的话，知识可以更加深刻的记录在脑海里。

在没有加入【拉勾教育大前端高薪训练营】之前，我根本不知道什么叫函数式编程，什么是宏任务和微任务，什么是虚拟 DOM， Vue 的底层代码是如何实现的，也不知道 call 的底层实现。现在，通过课程的学习，我知道该如何去使用他们，通过对虚拟DOM 的学习，我知道该如何去分析其他框架。这些底层东西的学习，可以帮助我很好的学习 Vue、React 等。我现在刚刚学完Vue 的源码，了解了Vue 的底层实现机制，在使用Vue时，就会更加的得心应手。并且，除了一些特定的课程以外，在每次直播的时候，都会有加餐，加餐的内容可能是一些开发中的小技巧，也可能是一些最新的技术，还可能是一些重点难点的讲解，这些都可以让我更好的成长，收获更多。

在后期还会学习 React 源码、Vue 3.0 新特性、Node.js 、GraphQL 等课程，我相信当学完的时候，一定会与现在的我不一样，至少我的知识储备相较于现在，会得到更大程度的扩充。

下面，是我的一篇模拟 call 的底层实现的blog，欢迎朋友们查阅和指出不足之处。

JavaScript中，模拟 call 的底层实现

笔记来源：拉勾教育大前端高薪训练营

面试题

function fn1 () {console.log(1)
}function fn2 () {console.log(2)
}// call 的作用
// 调用 call fn1函数，并改变fn1内部的this，将 this 指向 fn2
fn1.call(fn2)   // 1
fn1.call.call(fn2) // 2

模拟 call 的实现

没有传参

// 让所有的函数对象，都具有 mycall 方法
// context.fn1()
Function.prototype.mycall = function mycall(context, ...args) {// context = context || window// ?? // 只有 context 的值是 null 或者 undefined 的时候，才会返回 windowcontext = context ?? window// 此处的 this 指向的是 fn1 函数// 临时把 this 存储进 context.fn 中context.fn = thisconst result = context.fn(...args)delete context.fnreturn result
}

执行过程

// fn1.mycall.mycall(fn2)，执行过程
Function.prototype.mycall = function mycall(context, ...args) {// context ---> fn2context = context ?? window// context.fn ---> this ---> mycall// fn2.mycallcontext.fn = this// 暂停，等待执行 fn2.mycall (没有参数)const result = context.fn(...args)delete context.fnreturn result
}// 调用 fn2.mycalll (没传参数)
Function.prototype.mycall = function mycall(context, ...args) {// context ---> Windowcontext = context ?? window// context.fn ---> this ---> fn2// window.fn2context.fn = this// window.fn2 (没有参数)const result = context.fn(...args)delete context.fnreturn result
}

传入参数

// context.fn1()
Function.prototype.mycall = function mycall(context, ...args) {// 此处要去处理 context 是原始值的问题switch (typeof context) {case 'number':context = new Number(context)breakcase 'string':context = new String(context)breakcase 'boolean':context = new Boolean(context)breakdefault:// context = context || windowcontext = context ?? window}// 此处的 this 指向的是 fn1 函数// 临时把 this 存储进 context.fn 中context.fn = thisconst result = context.fn(...args)delete context.fnreturn result}const obj = { name: 'zs' }// fn1.mycall(obj)fn1.mycall.mycall(fn2, "1", 2)
}

知乎地址

https://zhuanlan.zhihu.com/p/342232134

【成长之路】JavaScript中，模拟 call 的底层实现相关推荐

IOS成长之路-Nsstring中搜索方法rangeOfString
NSString *str1 = @"can you \n speak English";NSString *str = @"\n";//在str1这个字符串中 ...
i春秋从0到1CTFer成长之路-CTF中的SQL-1注入
这是本萌新第一次写博客,作为对前面的学习的总结. 如有错误,欢迎各位师傅们指正. 如何判断注入类型我就不做过多的解释,不知道同学请移步去学习(手动狗头). CTF中的SQL注入我采用的是手注根据经 ...
[推荐]在JavaScript中实现命名空间
注:好久没写了,今天把我在公司内网写的文章拷一份,出来露露脸,刚转Web开发,所以开始学javascript! 在引入命名空间之前,一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突,在一 ...
在JavaScript中实现命名空间
在引入命名空间之前,一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突,在一个公司内部项目组之间可以通过命名预定(比如加前缀等)解决这个问题,但是把视线放到整个软件开发领域,在当今协作开发 ...
谈谈javascript中的多线程
不存在的,javascript中根本不存在多线程...... 先不要慌,没有多线程我们可以模仿多线程呀!定时器.web workder等等. 存在即合理,为啥javascript需要多线程? java ...
JavaScript 中的内存和性能、模拟事件（读书笔记思维导图）
由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...
想要精通算法和SQL的成长之路 - 两两交换链表中的节点
想要精通算法和SQL的成长之路 - 两两交换链表中的节点前言一. 两两交换链表中的节点前言想要精通算法和SQL的成长之路 - 系列导航一. 两两交换链表中的节点原题链接给你一个链表,两两 ...
ffmpeg新手成长之路——关于flv转封装过程中编码器信息变化如何处理（困扰已久的avc sequence header更新问题）
ffmpeg新手成长之路 --关于flv转封装过程中编码器信息变化如何处理(困扰已久的avc sequence header更新问题) 一.背景介绍私有协议传输H264裸流,进行录制,使用ffmpe ...
【腾讯Bugly干货分享】JSPatch 成长之路
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579ef... Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社 ...

【成长之路】JavaScript中，模拟 call 的底层实现

JavaScript中，模拟 call 的底层实现

【成长之路】JavaScript中，模拟 call 的底层实现相关推荐

最新文章

热门文章