【面试题】 「中高级前端面试」JavaScript手写代码无敌秘籍_js 面试题 代码 大厂(1)

最新推荐文章于 2024-05-15 11:47:57 发布
最新推荐文章于 2024-05-15 11:47:57 发布
阅读量343 收藏 3
点赞数 4
文章标签： 前端 面试 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84437982/article/details/138238083
版权

复制代码


`eval` 与 `Function` 都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。


**这里是面向面试编程，写这两种就够了。至于第三，第四种，涉及到繁琐的递归和状态机相关原理，具体可以看：**



> 
> [《JSON.parse 三种实现方式》](https://bbs.csdn.net/topics/618166371)
> 
> 
> 


### 4. 实现一个`call`或 `apply`



> 
> 实现改编来源：[JavaScript深入之call和apply的模拟实现 #11](https://bbs.csdn.net/topics/618166371)
> 
> 
> 


`call`语法：



> 
> `fun.call(thisArg, arg1, arg2, ...)`，调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
> 
> 
> 


`apply`语法：



> 
> `func.apply(thisArg, [argsArray])`，调用一个函数，以及作为一个数组（或类似数组对象）提供的参数。
> 
> 
> 


#### 4.1 `Function.call`按套路实现


`call`核心：


* 将函数设为对象的属性
* 执行&删除这个函数
* 指定`this`到函数并传入给定参数执行函数
* 如果不传入参数，默认指向为 window


为啥说是套路实现呢？因为真实面试中，面试官很喜欢让你逐步地往深考虑，这时候你可以反套路他，先写个简单版的：


#### 4.1.1 简单版

var foo = {
value: 1,
bar: function() {
console.log(this.value)
}
}
foo.bar() // 1
复制代码


#### 4.1.2 完善版


当面试官有进一步的发问，或者此时你可以假装思考一下。然后写出以下版本：

Function.prototype.call2 = function(content = window) {
content.fn = this;
let args = […arguments].slice(1);
let result = content.fn(…args);
delete content.fn;
return result;
}
let foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
bar.call2(foo, ‘black’, ‘18’) // black 18 1
复制代码


#### 4.2 `Function.apply`的模拟实现


`apply()`的实现和`call()`类似，只是参数形式不同。直接贴代码吧：

Function.prototype.apply2 = function(context = window) {
context.fn = this
let result;
// 判断是否有第二个参数
if(arguments[1]) {
result = context.fn(…arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
复制代码


### 5. 实现一个`Function.bind()`


`bind()`方法:



> 
> 会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )
> 
> 
> 


此外，`bind`实现需要考虑实例化后对原型链的影响。

Function.prototype.bind2 = function(content) {
if(typeof this != “function”) {
throw Error(“not a function”)
}
// 若没问参数类型则从这开始写
let fn = this;
let args = […arguments].slice(1);

let resFn = function() {
    return fn.apply(this instanceof resFn ? this : content,args.concat(...arguments) )
}
function tmp() {}
tmp.prototype = this.prototype;
resFn.prototype = new tmp();

return resFn;

}
复制代码


### 6. 实现一个继承


**寄生组合式继承**


一般只建议写这种，因为其它方式的继承会在一次实例中调用两次父类的构造函数或有其它缺点。


核心实现是：**用一个 `F` 空的构造函数去取代执行了 `Parent` 这个构造函数。**

function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log(‘parent name:’, this.name);
}
function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}
function create(proto) {
function F(){}
F.prototype = proto;
return new F();
}
Child.prototype = create(Parent.prototype);
Child.prototype.sayName = function() {
console.log(‘child name:’, this.name);
}
Child.prototype.constructor = Child;

var parent = new Parent(‘father’);
parent.sayName(); // parent name: father

var child = new Child(‘son’, ‘father’);
复制代码


### 7. 实现一个JS函数柯里化



![](https://img-blog.csdnimg.cn/img_convert/7fbd7decb99edc1006b3d006070ae9b4.webp?x-oss-process=image/format,png)


  


**什么是柯里化？**




> 
> 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。
> 
> 
> 


**函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。**


#### 7.1 通用版

function curry(fn, args) {
var length = fn.length;
var args = args || [];
return function(){
newArgs = args.concat(Array.prototype.slice.call(arguments));
if (newArgs.length < length) {
return curry.call(this,fn,newArgs);
}else{
return fn.apply(this,newArgs);
}
}
}

function multiFn(a, b, c) {
return a * b * c;
}

var multi = curry(multiFn);

multi(2)(3)(4);
multi(2,3,4);
multi(2)(3,4);
multi(2,3)(4);
复制代码


#### 7.2 `ES6`骚写法

const curry = (fn, arr = []) => (…args) => (
arg => arg.length === fn.length
? fn(…arg)
: curry(fn, arg)
)([…arr, …args])

let curryTest=curry((a,b,c,d)=>a+b+c+d)
curryTest(1,2,3)(4) //返回10
curryTest(1,2)(4)(3) //返回10
curryTest(1,2)(3,4) //返回10
复制代码


### 8. 手写一个`Promise`(中高级必考)


我们来过一遍`Promise/A+`规范：


* 三种状态`pending| fulfilled(resolved) | rejected`
* 当处于`pending`状态的时候，可以转移到`fulfilled(resolved)`或者`rejected`状态
* 当处于`fulfilled(resolved)`状态或者`rejected`状态的时候，就不可变。


1. 必须有一个`then`异步执行方法，`then`接受两个参数且必须返回一个promise：

// onFulfilled 用来接收promise成功的值
// onRejected 用来接收promise失败的原因
promise1=promise.then(onFulfilled, onRejected);
复制代码


#### 8.1 `Promise`的流程图分析



![](https://img-blog.csdnimg.cn/img_convert/4eaffa7cb4c66ef7d509e33f0f8602dd.webp?x-oss-process=image/format,png)


  


来回顾下`Promise`用法：

var promise = new Promise((resolve,reject) => {
if (操作成功) {
resolve(value)
} else {
reject(error)
}
})
promise.then(function (value) {
// success
},function (value) {
// failure
})
复制代码


#### 8.2 面试够用版



> 
> 来源：[实现一个完美符合Promise/A+规范的Promise](https://bbs.csdn.net/topics/618166371)
> 
> 
>

function myPromise(constructor){
let self=this;
self.status=“pending” //定义状态改变前的初始状态
self.value=undefined;//定义状态为resolved的时候的状态
self.reason=undefined;//定义状态为rejected的时候的状态
function resolve(value){
//两个===“pending”，保证了状态的改变是不可逆的
if(self.status===“pending”){
self.value=value;
self.status=“resolved”;
}
}
function reject(reason){
//两个===“pending”，保证了状态的改变是不可逆的
if(self.status===“pending”){
self.reason=reason;
self.status=“rejected”;
}
}
//捕获构造异常
try{
constructor(resolve,reject);
}catch(e){
reject(e);
}
}
复制代码


同时，需要在`myPromise`的原型上定义链式调用的`then`方法：

myPromise.prototype.then=function(onFullfilled,onRejected){
let self=this;
switch(self.status){
case “resolved”:
onFullfilled(self.value);
break;
case “rejected”:
onRejected(self.reason);
break;
default:
}
}
复制代码


测试一下：

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1
复制代码


#### 8.3 大厂专供版


直接贴出来吧，这个版本还算好理解

const PENDING = “pending”;
const FULFILLED = “fulfilled”;
const REJECTED = “rejected”;

function Promise(excutor) {
let that = this; // 缓存当前promise实例对象
that.status = PENDING; // 初始状态
that.value = undefined; // fulfilled状态时 返回的信息
that.reason = undefined; // rejected状态时 拒绝的原因
that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

function resolve(value) { // value成功态时接收的终值
    if(value instanceof Promise) {
        return value.then(resolve, reject);
    }
    // 实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。
    setTimeout(() => {
        // 调用resolve 回调对应onFulfilled函数
        if (that.status === PENDING) {
            // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
            that.status = FULFILLED;
            that.value = value;
            that.onFulfilledCallbacks.forEach(cb => cb(that.value));
        }
    });
}
function reject(reason) { // reason失败态时接收的拒因
    setTimeout(() => {
        // 调用reject 回调对应onRejected函数
        if (that.status === PENDING) {
            // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
            that.status = REJECTED;
            that.reason = reason;
            that.onRejectedCallbacks.forEach(cb => cb(that.reason));
        }
    });
}

// 捕获在excutor执行器中抛出的异常
// new Promise((resolve, reject) => {
//     throw new Error('error in excutor')
// })
try {
    excutor(resolve, reject);
} catch (e) {
    reject(e);
}

}

Promise.prototype.then = function(onFulfilled, onRejected) {
const that = this;
let newPromise;
// 处理参数默认值 保证参数后续能够继续执行
onFulfilled =
typeof onFulfilled === “function” ? onFulfilled : value => value;
onRejected =
typeof onRejected === “function” ? onRejected : reason => {
throw reason;
};
if (that.status === FULFILLED) { // 成功态
return newPromise = new Promise((resolve, reject) => {
setTimeout(() => {
try{
let x = onFulfilled(that.value);
resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
} catch(e) {
reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
}
});
})
}

if (that.status === REJECTED) { // 失败态
    return newPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            try {
                let x = onRejected(that.reason);
                resolvePromise(newPromise, x, resolve, reject);
            } catch(e) {
                reject(e);
            }
        });
    });
}

if (that.status === PENDING) { // 等待态
    // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
    return newPromise = new Promise((resolve, reject) => {
        that.onFulfilledCallbacks.push((value) => {
            try {
                let x = onFulfilled(value);
                resolvePromise(newPromise, x, resolve, reject);
            } catch(e) {
                reject(e);
            }
        });
        that.onRejectedCallbacks.push((reason) => {
            try {
                let x = onRejected(reason);
                resolvePromise(newPromise, x, resolve, reject);
            } catch(e) {
                reject(e);
            }
        });
    });
}

};
复制代码



![](https://img-blog.csdnimg.cn/img_convert/58cd180709503db400f6433713692c23.webp?x-oss-process=image/format,png)


  


emmm，我还是乖乖地写回进阶版吧。



### 9. 手写防抖(`Debouncing`)和节流(`Throttling`)



> 
> `scroll` 事件本身会触发页面的重新渲染，同时 `scroll` 事件的 `handler` 又会被高频度的触发, 因此事件的 `handler` 内部不应该有复杂操作，例如 `DOM` 操作就不应该放在事件处理中。 针对此类高频度触发事件问题（例如页面 `scroll` ，屏幕 `resize`，监听用户输入等），有两种常用的解决方法，防抖和节流。
> 
> 
> 


#### 9.1 防抖(`Debouncing`)实现


典型例子：限制 鼠标连击 触发。


一个比较好的解释是：



> 
> 当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 `0.01` 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。
> 
> 
> 



![](https://img-blog.csdnimg.cn/img_convert/abd3e6418eb95a9f8c20c82b87b5056d.webp?x-oss-process=image/format,png)


  


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

又会被高频度的触发, 因此事件的 `handler` 内部不应该有复杂操作，例如 `DOM` 操作就不应该放在事件处理中。 针对此类高频度触发事件问题（例如页面 `scroll` ，屏幕 `resize`，监听用户输入等），有两种常用的解决方法，防抖和节流。
> 
> 
> 


#### 9.1 防抖(`Debouncing`)实现


典型例子：限制 鼠标连击 触发。


一个比较好的解释是：



> 
> 当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 `0.01` 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。
> 
> 
> 



![](https://img-blog.csdnimg.cn/img_convert/abd3e6418eb95a9f8c20c82b87b5056d.webp?x-oss-process=image/format,png)


  


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>![](https://img-blog.csdnimg.cn/img_convert/e551f51b22597a16723282d3b6c080da.webp?x-oss-process=image/format,png)
2401_84437982
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一些js常用面试手写代码实现
Ll1994693的博客
09-26 178
一：解析url // 实现一个方法，拆解URL参数中queryString const url = 'http://sample.com/?a=1&b=2&c=xx&d#hash'; function parseQueryString(url) { let obj = {} data = url.split("?"); aParams = data[1].split("#"); aParamsEnd = aParams[0].split("&"
JS面试手写代码题
anchor_1的博客
03-15 899
1.//实现一个去重函数 function union(a, b){ return [...new Set([...a,...b])] } union([1,2,3],[4,3,2,4]);//[1,2,3,4] 2./**获取入参的类型 *例如： * getTYpe(1) => Number * getTYpe(true) => Boolean * getTYpe([1,2,3]) => Array * getType({a:1}) => Object */ function
2024年最新前端应该要掌握的几种手写代码实现，必看的70道面试题回答
最新发布
2401_84435555的博客
05-15 406
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
【高频】前端面试算法题，案例+答案，一学就会！
有事儿私信。
07-14 1207
虽然前端开发工作更加注重对HTML、CSS和JavaScript等技术的掌握，但算法和数据结构也是前端工程师应该具备的基本能力之一。很多公司的面试也会有算法这一环节。今天为大家总结了一些最常见的算法题。
前端面试--常考的现场手写代码
weixin_47964837的博客
05-02 2306
一些面试会考的手写代码汇总
前端面试常考的手写代码不是背出来的！
web前端技术交流群：457188470
02-24 706
防抖 function debounce(func, ms = 1000) { let timer; return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, ms) } } // 测试 const task = () => { console.log.
「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）
10-17
主要介绍了JavaScript手写代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端面试题-手写代码实现
08-04
标题“前端面试题-手写代码实现”暗示了面试者需要具备的能力。在前端面试中，手写代码能力不仅要求开发者能够流畅地编写代码，还要求对常用的编程概念有深入的理解。常见的手写代码题目可能包括但不限于数据结构、...
「2021」高频前端面试题汇总之手写代码篇.pdf
12-14
本资源主要对前端面试题的常见问题进行了总结和分类，涵盖了 JavaScript 基础知识、手写代码等方面的知识点。下面是对本资源中提到的知识点的详细解释： 1. 手写 Object.create 方法 Object.create 方法用于创建一...
前端面试题汇总_madeaef_html/css/javascript_前端面试题汇总_
10-01
本资料“前端面试题汇总”聚焦于HTML、CSS和JavaScript这三大核心技术，同时也涵盖了jQuery、移动App开发以及Node.js等相关领域。以下是这些关键知识点的详细解释： 1. HTML (HyperText Markup Language)： - 结构...
大厂Web前端高级面试题汇总解答，这才是前端该写的代码：CSS常见套路续，前端开发练习
2401_83974783的博客
04-08 737
);本 demo 地址：3D Stair Loading[2]文本分割====在上一篇我们提到了如何用 JS 来分割文本，本篇将介绍一种更简洁的实现方法——gsap 的 SplitText 插件，利用它我们能用更少的代码来实现下图的效果});简化版 demo 地址：SplitText Starter[3]关键帧简单的动画固然可以实现，那么相对复杂一点的动画呢？
关于前端面试要求手写的功能函数
Yiu的博客
03-10 1280
javaScript笔试，十一个手写函数
面试|前端手写代码（持续更新）
weixin_49179577的博客
02-22 803
按照自己的学习进度进行更新； 主要分为以下几个部分：（1）JS基础，（2）CSS，（3）数据处理，（4）场景应用，… JS基础 1. 手写new操作符？ （1）new？ new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 （2）在new的过程中干了什么？ 基本四步走 新建一个空对象obj 链接到原型：将obj的[[prototype]]属性指向构造函数的原型，即obj.[[prototype]] = construc.prototype （不懂的可以看图理解一下【图开源..
前端面试必备八股文——手写代码
2301_76796512的博客
02-24 968
这篇文章主要是收集面试中常见的手写题，包括我遇到的一些算法、功能函数、数据结构等问题。写法不一定是最优，可以用来参考，希望可以在面试中帮到你。
JavaScript中new操作符到底做了什么
XinKun的博客
05-22 235
做了什么？ 创建了一个空的js对象（即{}） 将空对象的原型__prototype__指向构造函数的原型(prototype) 将空对象作为构造函数的上下文（改变this指向 使用apply） 对构造函数有返回值的判断 怎么实现？ /* create函数要接受不定量的参数，第一个参数是构造函数（也就是new操作符的目标函数），其余参数被构造函数使用。 new Create() 是一种js语法糖。我们可以用函数调用的方式模拟实现 */ function create(Con,...
前端面试有百分之五十几率会遇到的手写代码面试题简单总结
qq_66180056的博客
07-04 584
前端面试有些是在面试中自己做出来的，有些是照抄优秀的前端的大佬的，请多多包含
前端常见面试手写代码总结
林见鹿鸣
09-19 263
new操作符 function myNew(Func, ...args) { // 1. 创建一个新对象 const obj = {} // 2. 新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype // 3. 将构造函数的 this 指向新对象 let result = Func.apply(obj, args) // 4. 根据返回值判断 // 如果该函数没有返回对象，则返回this return result instanc
手撕前端面试代码题大全
程序员成长指北
12-15 827
关注程序员成长指北，回复“1”加入我们一起学习，天天进步转载自：等不到你. https://blog.csdn.net/weixin_43758603/article/details/...
前端面试出场率奇高的18个手写代码，2024年最新简短的面试总结
m0_60634927的博客
04-14 950
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值