- 当前位置：首页 >IT科技 >JavaScript中各种源码实现（前端面试笔试必备）
JavaScript中各种源码实现（前端面试笔试必备）
发布时间：2025-11-05 11:06:32 来源：码上建站 作者：人工智能
前言
最近很多人和我一样在积极地准备前端的中各种源面试笔试，所以我也就整理了一些前端面试笔试中非常容易被问到的码实原生函数实现和各种前端原理实现。
能够手写实现各种JavaScript原生函数，现前可以说是端面摆脱API调用师帽子的第一步，我们不光要会用，试笔试必更要去探究其实现原理!
对JavaScript源码的中各种源学习和实现能帮助我们快速和扎实地提升自己的前端编程能力。
实现一个new操作符
我们首先知道new做了什么：
创建一个空的码实简单JavaScript对象(即{}); 链接该对象(即设置该对象的构造函数)到另一个对象 ; 将步骤(1)新创建的对象作为this的上下文 ; 如果该函数没有返回对象，则返回this。现前知道new做了什么，端面接下来我们就来实现它
function create(Con,试笔试必 ...args){ // 创建一个空的对象 this.obj = {}; // 将空对象指向构造函数的原型链 Object.setPrototypeOf(this.obj, Con.prototype); // obj绑定到构造函数上，便可以访问构造函数中的中各种源属性，即this.obj.Con(args) let result = Con.apply(this.obj,码实 args); // 如果返回的result是一个对象则返回 // new方法失效，否则返回obj return result instanceof Object ?现前 result : this.obj; }实现一个Array.isArray
Array.myIsArray = function(o) { return Object.prototype.toString.call(Object(o)) === [object Array]; };实现一个Object.create()方法
function create = function (o) { var F = function () {}; F.prototype = o; return new F(); };实现一个EventEmitter
真实经历，最近在字节跳动的端面面试中就被面试官问到了，让我手写实现一个简单的试笔试必Event类。
class Event { constructor () { // 储存事件的数据结构 // 为查找迅速，云服务器 使用对象（字典） this._cache = {} } // 绑定 on(type, callback) { // 为了按类查找方便和节省空间 // 将同一类型事件放到一个数组中 // 这里的数组是队列， 遵循先进先出 // 即新绑定的事件先触发 let fns = (this._cache[type] = this._cache[type] || []) if(fns.indexOf(callback) === -1) { fns.push(callback) } return this } // 解绑 off (type, callback) { let fns = this._cache[type] if(Array.isArray(fns)) { if(callback) { let index = fns.indexOf(callback) if(index !== -1) { fns.splice(index, 1) } } else { // 全部清空 fns.length = 0 } } return this } // 触发emit trigger(type, data) { let fns = this._cache[type] if(Array.isArray(fns)) { fns.forEach((fn) => { fn(data) }) } return this } // 一次性绑定 once(type, callback) { let wrapFun = () => { callback.call(this); this.off(type, callback); }; this.on(wrapFun, callback); return this; } } let e = new Event() e.on(click,function(){ console.log(on) }) e.on(click,function(){ console.log(onon) }) // e.trigger(click, 666) console.log(e)实现一个Array.prototype.reduce
首先观察一下Array.prototype.reduce语法
Array.prototype.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])然后就可以动手实现了：
Array.prototype.myReduce = function(callback, initialValue) { let accumulator = initialValue ? initialValue : this[0]; for (let i = initialValue ? 0 : 1; i < this.length; i++) { let _this = this; accumulator = callback(accumulator, this[i], i, _this); } return accumulator; }; // 使用 let arr = [1, 2, 3, 4]; let sum = arr.myReduce((acc, val) => { acc += val; return acc; }, 5); console.log(sum); // 15实现一个call或apply
先来看一个call实例，看看call到底做了什么：
let foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(foo); // 1从代码的执行结果，我们可以看到，call首先改变了this的指向，使函数的this指向了foo,然后使bar函数执行了。
总结一下：
call改变函数this指向 调用函数思考一下：我们如何实现上面的效果呢?代码改造如下：
Function.prototype.myCall = function(context) { context = context || window; //将函数挂载到对象的fn属性上 context.fn = this; //处理传入的参数 const args = [...arguments].slice(1); //通过对象的属性调用该方法 const result = context.fn(...args); //删除该属性 delete context.fn; return result };我们看一下上面的代码：
首先我们对参数context做了兼容处理，不传值，context默认值为window; 然后我们将函数挂载到context上面,context.fn = this; 处理参数，将传入myCall的参数截取，去除第一位，然后转为数组; 调用context.fn，此时fn的this指向context; 删除对象上的属性 delete context.fn; 将结果返回。以此类推，我们顺便实现一下apply，唯一不同的是参数的处理,代码如下：
Function.prototype.myApply = function(context) { context = context || window context.fn = this let result // myApply的源码下载参数形式为(obj,[arg1,arg2,arg3]); // 所以myApply的第二个参数为[arg1,arg2,arg3] // 这里我们用扩展运算符来处理一下参数的传入方式 if (arguments[1]) { result = context.fn(…arguments[1]) } else { result = context.fn() } delete context.fn; return result };以上便是call和apply的模拟实现，唯一不同的是对参数的处理方式。
实现一个Function.prototype.bind
function Person(){ this.name="zs"; this.age=18; this.gender="男" } let obj={ hobby:"看书" } // 将构造函数的this绑定为obj let changePerson = Person.bind(obj); // 直接调用构造函数,函数会操作obj对象,给其添加三个属性; changePerson(); // 1、输出obj console.log(obj); // 用改变了this指向的构造函数,new一个实例出来 let p = new changePerson(); // 2、输出obj console.log(p);仔细观察上面的代码，再看输出结果。
我们对Person类使用了bind将其this指向obj，得到了changeperson函数，此处如果我们直接调用changeperson会改变obj，若用new调用changeperson会得到实例 p,并且其__proto__指向Person,我们发现bind失效了。
我们得到结论：用bind改变了this指向的函数，如果用new操作符来调用，bind将会失效。
这个对象就是这个构造函数的实例，那么只要在函数内部执行 this instanceof 构造函数 来判断其结果是否为true，就能判断函数是否是通过new操作符来调用了，若结果为true则是免费信息发布网用new操作符调用的，代码修正如下：
// bind实现 Function.prototype.mybind = function(){ // 1、保存函数 let _this = this; // 2、保存目标对象 let context = arguments[0]||window; // 3、保存目标对象之外的参数,将其转化为数组; let rest = Array.prototype.slice.call(arguments,1); // 4、返回一个待执行的函数 return function F(){ // 5、将二次传递的参数转化为数组; let rest2 = Array.prototype.slice.call(arguments) if(this instanceof F){ // 6、若是用new操作符调用,则直接用new 调用原函数,并用扩展运算符传递参数 return new _this(...rest2) }else{ //7、用apply调用第一步保存的函数，并绑定this，传递合并的参数数组，即context._this(rest.concat(rest2)) _this.apply(context,rest.concat(rest2)); } } };实现一个JS函数柯里化
Currying的概念其实并不复杂，用通俗易懂的话说：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。
function progressCurrying(fn, args) { let _this = this let len = fn.length; let args = args || []; return function() { let _args = Array.prototype.slice.call(arguments); Array.prototype.push.apply(args, _args); // 如果参数个数小于最初的fn.length，则递归调用，继续收集参数 if (_args.length < len) { return progressCurrying.call(_this, fn, _args); } // 参数收集完毕，则执行fn return fn.apply(this, _args); } }手写防抖(Debouncing)和节流(Throttling)
节流
防抖函数 onscroll 结束时触发一次，延迟执行
function debounce(func, wait) { let timeout; return function() { let context = this; // 指向全局 let args = arguments; if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { func.apply(context, args); // context.func(args) }, wait); }; } // 使用 window.onscroll = debounce(function() { console.log(debounce); }, 1000);节流
节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样
function throttle(fn, delay) { let prevTime = Date.now(); return function() { let curTime = Date.now(); if (curTime - prevTime > delay) { fn.apply(this, arguments); prevTime = curTime; } }; } // 使用 var throtteScroll = throttle(function() { console.log(throtte); }, 1000); window.onscroll = throtteScroll;手写一个JS深拷贝
乞丐版
JSON.parse(JSON.stringfy));非常简单，但缺陷也很明显，比如拷贝其他引用类型、拷贝函数、循环引用等情况。
基础版
function clone(target){ if(typeof target === object){ let cloneTarget = {}; for(const key in target){ cloneTarget[key] = clone(target[key]) } return cloneTarget; } else { return target } }写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然，这个深拷贝函数还是有一些问题。
一个比较完整的深拷贝函数，需要同时考虑对象和数组，考虑循环引用：
function clone(target, map = new WeakMap()) { if(typeof target === object){ let cloneTarget = Array.isArray(target) ? [] : {}; if(map.get(target)) { return target; } map.set(target, cloneTarget); for(const key in target) { cloneTarget[key] = clone(target[key], map) } return cloneTarget; } else { return target; } }实现一个instanceOf
原理： L 的 proto 是不是等于 R.prototype，不等于再找 L.__proto__.__proto__ 直到 proto 为 null
// L 表示左表达式，R 表示右表达式 function instance_of(L, R) { var O = R.prototype; L = L.__proto__; while (true) { if (L === null){ return false; } // 这里重点：当 O 严格等于 L 时，返回 true if (O === L) { return true; } L = L.__proto__; } }实现原型链继承
function myExtend(C, P) { var F = function(){}; F.prototype = P.prototype; C.prototype = new F(); C.prototype.constructor = C; C.super = P.prototype; }实现一个async/await
原理
就是利用 generator(生成器)分割代码片段。然后我们使用一个函数让其自迭代，每一个yield 用 promise 包裹起来。执行下一步的时机由 promise 来控制
实现
function _asyncToGenerator(fn) { return function() { var self = this, args = arguments; // 将返回值promise化 return new Promise(function(resolve, reject) { // 获取迭代器实例 var gen = fn.apply(self, args); // 执行下一步 function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, next, value); } // 抛出异常 function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, throw, err); } // 第一次触发 _next(undefined); }); }; }实现一个Array.prototype.flat()函数
最近字节跳动的前端面试中也被面试官问到，要求手写实现。
Array.prototype.myFlat = function(num = 1) { if (Array.isArray(this)) { let arr = []; if (!Number(num) || Number(num) < 0) { return this; } this.forEach(item => { if(Array.isArray(item)){ let count = num arr = arr.concat(item.myFlat(--count)) } else { arr.push(item) } }); return arr; } else { throw tihs + ".flat is not a function"; } };实现一个事件代理
这个问题一般还会让你讲一讲事件冒泡和事件捕获机制
<ul id="color-list"> <li>red</li> <li>yellow</li> <li>blue</li> <li>green</li> <li>black</li> <li>white</li> </ul> <script> (function () { var color_list = document.getElementById(color-list); color_list.addEventListener(click, showColor, true); function showColor(e) { var x = e.target; if (x.nodeName.toLowerCase() === li) { alert(x.innerHTML); } } })(); </script>实现一个双向绑定
Vue 2.x的Object.defineProperty版本
// 数据 const data = { text: default }; const input = document.getElementById(input); const span = document.getElementById(span); // 数据劫持 Object.defineProperty(data, text, { // 数据变化 —> 修改视图 set(newVal) { input.value = newVal; span.innerHTML = newVal; } }); // 视图更改 --> 数据变化 input.addEventListener(keyup, function(e) { data.text = e.target.value; });Vue 3.x的proxy 版本
// 数据 const data = { text: default }; const input = document.getElementById(input); const span = document.getElementById(span); // 数据劫持 const handler = { set(target, key, value) { target[key] = value; // 数据变化 —> 修改视图 input.value = value; span.innerHTML = value; return value; } }; const proxy = new Proxy(data, handler); // 视图更改 --> 数据变化 input.addEventListener(keyup, function(e) { proxy.text = e.target.value; });- 上一篇：Ubuntu 14.10 “Utopic Unicorn”（乌托邦独角兽）已经正式发布，使用内核 3.16，Unity 桌面升级到 7.3，同时 Ubuntu-Kylin 14.10 发布，包含了优客系列软件和多款合作开发的流行应用；我们还为您进行了大量的系统优化和功能增强，并增加了新的安装动画、壁纸大赛作品。ubuntu是一个以桌面应用为主的linux操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。目前ubuntu14.10“utopicunicorn”正式发布，有需要的用户可以去官网下载试用。Ubuntu 当今最流行的 Linux 操作系统，在android大行天下之时，Ubuntu 也推出自己的移动操作系统：Ubuntu touch，虽然有些迟，但ubuntu Touch 提出了同时支持使用 Qt/QML 开发原生应用，以及基于 HTML5 的 web 应用，从这里也看出了 Ubuntu 在移动领域的长足眼光。已经发布的版本有 Ubuntukylin、Lubuntu、KUbuntu、ubuntu Gnome。下载链接：官方链接1，官方链接2更新信息：Unity has improved support for High-DPI displays.Firefox is updated to version 33 and Chromium is updated to version 38.Gtk updated to version 3.12. Qt updated to version 5.3.Support for IPP Everywhere printers is added, and printers shared from Ubuntu can emulate IPP Everywhere printers.LibreOffice 4.3 brings a lot of improvements including improved PDF support, new features in Writer, Calc and Impress (word processor, spreadsheet and presentations).
- 下一篇：打造纯净电脑系统的完全指南（一步步教你如何自己制作纯净高效的电脑系统）
- 中华三星铅笔3023的品质如何？（全面评价中华三星铅笔3023的外观、写感、耐用性和性价比。）
- 数字引擎（数字引擎）
- 空气净化弹（以空气净化弹为例，探讨创新科技对环境保护的意义与作用）
- 探索iPhone5越狱（如何越狱你的iPhone5，释放其隐藏功能和自定义选项）
- 起亚K5混动版（探索起亚K5混动版的卓越性能和环保特点）
- 先锋HDJ1000耳机（探索先锋HDJ1000耳机的声音表现及用户评价）
- 蓝色光标代理FB的优势与应用（解锁封锁区域，畅享无限社交）
- 微软舒适蓝影4500的使用体验（打造舒适愉悦的工作环境）
- 电脑龙珠格斗操作教程（快速掌握龙珠格斗游戏的操作技巧，成为顶级玩家！）
- 佳域G5（领略速度与激情，佳域G5带你飞驰无限）
- 电脑自动获取WiFi密码错误的原因与解决方法（自动获取WiFi密码错误的关键问题及解决方案）
- 小米5s如何刷苹果系统？（探索小米5s刷入苹果系统的方法及注意事项）
- 出厂设置（完全还原设备并保护个人信息，以及提高设备性能的一键设置）
- 魅族充电宝如何？（全面评测魅族充电宝的性能与使用体验）
- 再一次被网上那些教程误导后决定自己写一个。真心被那些奇怪的教程误导了好几次，之前研究其它东西的时候也是。蛋疼啊。 安装redis 直接用apt-get命令即可 sudo apt-get install redis-server 安装完后会自动启动redis的服务，可以通过下面命令来查看进程是否已经启动。 ps -aux|grep redis redis-server is running 使用apt-get就可以安装了 sudo apt-get install php5-redis service apache restart 在CI 3.0（2.0是不支持用redis存储session）的applicationconfigconfig.php中的两个配置改成下面这样 $config[sess_driver] = redis; $config[sess_save_path] = tcp://127.0.0.1:6379;
- X1C2013（经典款式再度焕发活力，引领商务笔记本新潮流）
- 充电线的收纳技巧（简单实用的方法让充电线整齐有序）
- 探究小米Note2的音质表现如何（用“音质”解密小米Note2的表现）
- 全网通手机与4G网络的完美结合（实现快速通信和无障碍连接的全新体验）
- 华硕X450（探索华硕X450的功能与性能）
随便看看
企商汇益华科技亿华云香港云服务器IT资讯网IT技术网源码库源码下载服务器租用智能时代亿华互联益华科技科技前瞻益强编程堂益强编程舍思维库益华IT技术论坛亿华灵动亿华云益华科技运维纵横益强数据堂创站工坊编程之道码上建站极客编程亿华云计算亿华智慧云云智核汇智坊益强资讯优选益强科技益强智囊团码力社益强IT技术网亿华科技亿华智造多维IT资讯云站无忧极客码头IT资讯网益强智未来
- Copyright © 2025 Powered by JavaScript中各种源码实现（前端面试笔试必备）,码上建站 滇ICP备2023006006号-47sitemap