前端常见手撕题（详细注释版）：持续更新中……

DantinZhang

于 2023-11-24 10:33:53 发布

阅读量1.4k

点赞数 25

文章标签：前端状态模式 javascript

本文链接：https://blog.csdn.net/weixin_42044763/article/details/134592917

版权

本文详细解析了前端面试中常见的手撕代码题目，包括instanceof、实现new关键字、ajax、Promise.all、拷贝（浅拷贝、深拷贝）、防抖和节流等，帮助开发者深入理解并掌握相关技术。

摘要由CSDN通过智能技术生成

前端面试手撕题

01.手撕instanceof
02.如何让 0.1+0.2 === 0.3
03.手撕new关键字
04.手写原生ajax
05.手撕Promise.all
06.手撕浅拷贝
07.手撕深拷贝
08.手撕防抖
09.手撕节流
10.手撕call
11.手撕apply
12.手撕bind
13.数组转树
14.手撕Object.create
15.组合继承与寄生组合继承
16.函数柯里化

01.手撕instanceof

第一个参数是实例，第二个参数是构造函数

function myInstanceof(instance, object) {
   
    let current = instance;  //定义一个指针存储当前实例的位置
    let target = object.prototype; //存储目标构造函数的原型对象
    while(current) {
      //指针指向null时说明原型链上没这个构造函数
        if(current.__proto__ == target) {
     //如果找到了，就返回true
            return true;
        } else {
      //如果没找到，指针向后指
            current = current.__proto__
        }
    }
    //如果找到最后的null都没有，说明该实例不属于object所在原型链上任何一个原型对象
    return false;
}

测试代码：

console.log([1,2,3] instanceof Array); //true
console.log(myInstanceof([1,2,3], Array)) //true

console.log([1,2,3] instanceof Object);//true
console.log(myInstanceof([1,2,3], Object)); //true

console.log([1,2,3] instanceof Function);//false
console.log(myInstanceof([1,2,3], Function)); //false

console.log([1,2,3] instanceof RegExp);//false
console.log(myInstanceof(/1/, RegExp)); //true

02.如何让 0.1+0.2 === 0.3

function withinError(left, right) {
   
    return Math.abs(left-right) < Number.EPSILON;
}

console.log(withinError(0.1 + 0.2, 0.3)); //true

03.手撕new关键字

第一个参数是构造函数，第二个参数是实例化时的参数

function myNew(Fn, ...args) {
   
    //1.判断传入的是否是一个函数
    if(typeof Fn != 'function') return false;
    //2.创建一个新对象，让该对象的__proto__指向构造函数的prototype
    const obj = Object.create(Fn.ptototype);
    //3.让Fn中的this指向这个新创建的对象，并给它们传值
    let result = Fn.call(obj, ...args);
    //4.如果构造函数写了返回值，要判断，如果是复杂数据类型，那么就返回该返回值
    if(result && (typeof result === 'object' || typeof result === 'function')) {
   
        return result;
    }
    //5.如果构造函数没有返回值、或有返回值但是简单数据类型，则返回新创建的对象
    return obj;
}

04.手写原生ajax

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.querySelector('button');
        const result = document.querySelector('#result');
        btn.addEventListener('click', function() {
     
           //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化࿰

最低0.47元/天解锁文章

DantinZhang

关注

25
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
前端常见手撕题（详细注释版）：持续更新中……

基本思路和浅拷贝一样，不同的是在拷贝时，如果遇到复杂数据类型，就要递归调用（再生成一个新的地址，把简单数据类型捞过来，返回新的地址，给到当前key），这样可以保证只要遇到复杂数据类型，都可以生成新的地址。写法2：获取时间戳，第一次肯定会触发，因为new Date获取的是从1970年到现在的时间，delay总不能大于五十年吧……返回一个函数，调用这个函数的时候就调用myBind的调用者，并改变this。第一个参数是构造函数，第二个参数是实例化时的参数。//4.事件绑定，处理服务端返回的结果。
复制链接

扫一扫