手写前端面试题（一）

yubaibai2233

已于 2022-03-19 20:19:40 修改

阅读量232

点赞数

分类专栏：前端文章标签： javascript

于 2022-03-09 12:33:30 首次发布

本文链接：https://blog.csdn.net/yubaibai2233/article/details/123374401

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

手写eventEmitter类，包括on()、off()、once()、emit()方法

手写前端面试题（二）_yubaibai2233的博客-CSDN博客目录手写compose函数手写compose函数接收若干个函数作为参数，每个函数执行后的输出作为下一个函数的输入。执行方向是自右向左的，初始函数的参数在最右边。 function compose(...fns) { return function(initialValue) { return fns.reverse().reduce((accumulator, fn) => {https://blog.csdn.net/yubaibai2233/article/details/123458749

手写eventEmitter类，包括on()、off()、once()、emit()方法

1.on(event, fn) 监听event 事件，事件触发时调用fn函数；
2.once(event, fn) 为指定事件注册一个单次监听器，单次监听器最多只触发一次，触发后立即解除监听器；

3.emit(event, arg1, arg2, arg3, …): 触发event事件，并把参数arg1， arg2， arg3… 传给事件处理函数；
4.off (event, fn) 停止监听某个事件

class EventEmitter{
    constructor(){
        this._events={}
    }
    on(event,callback){
        let callbacks = this._events[event] || []
        callbacks.push(callback);
        this._events[event] = callbacks;
        return this
    }
    off(event,callback){
        let callbacks = this._events[event]
        this._events[event] =  callbacks && callbacks.filter(function(fn){
               return fn !== callback;
        })
        return this
    }
    emit(eventName,...args) {
         const callbacks = this._events[eventName]
         callbacks.map(cb => {
              cb(...args)
         })
         // callbacks.forEach(fn => fn.apply(this,args))
         return this;
    }
    once(event,callback){
        let wrap = (...args) => {
            callback.apply(this, args) //apply第二个参数是数组
            this.off(event, wrap)
        }
        this.on(event, wrap )
        return this
    }
}

手写Promise封装Ajax

// Promise封装Ajax
        const p = new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "https://api.apiopen.top/getJoke");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response)
                    }
                    else {
                        reject(xhr.status)
                    }
                }
            }
        })

        p.then(
            res => {
                console.log(res)
            },
            err => {
                console.log(err)
            }
        )

手写bind、apply、call

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔。

apply 的所有参数都必须放在一个数组里面传进去。

bind 除了返回是函数以外，它的参数和 call 一样。

// bind
        Function.prototype.bindNew = function (context, ...args) {
            return (...newArgs) => {
                this.apply(context, [...args, ...newArgs])
            }
        }

        const test = {
            name: "fy",
            showName: function (last) {
                console.log(this.name + " is " + last);
            },
        };
        test.showName("handsome"); // fy is handsome
        test.showName.bind({ name: "Mr.fy" })("handsome");
        test.showName.bindNew({ name: "Mr.fy" })("handsome");

        // apply
        Function.prototype.applyNew = function (context, args) {
            context.fn = this
            res = context.fn(...args)
            return res
        }
        test.showName.applyNew({ name: "Mr.fy" }, ["handsome"])

        // call 
        Function.prototype.callNew = function (context, ...args) {
            context.fn = this
            res = context.fn(...args)
            // delete context.fn; // 为什么
            return res
        }
        test.showName.callNew({ name: "Mr.fy" }, "handsome")

手写instanceof

1. 每个函数function都有一个`prototype`，即`显式`原型(属性)
2. 每个实例对象都有一个[`__ proto __`]，可称为`隐式`原型(属性)
3. 对象的隐式原型的值为其对应构造函数的显式原型的值

   
        function myinstanceof(left,right){
            let prototype = right.prototype
            left = left.__proto__
            while(1){
                if(!left){
                    return false
                }
                if(left === prototype){
                    return true
                }
                left = left.__proto__
            }
        }
        console.log(myinstanceof([], Array)); 
        console.log(myinstanceof([], Map));

手写Promise构造函数和then（异步版，then无链式）

BAT前端经典面试问题：史上最最最详细的手写Promise教程-阿里云开发者社区

        class myPromise{
            constructor(executor){
                this.state = 'pending';
                this.value = undefined;
                this.reason = undefined;
                // 成功存放的数组
                this.onResolvedCallbacks = [];
                // 失败存放法数组
                this.onRejectedCallbacks = [];
                let resolve = value => {
                    if (this.state === 'pending') {
                        this.state = 'fulfilled';
                        this.value = value;
                        // 一旦resolve执行，调用成功数组的函数
                        this.onResolvedCallbacks.forEach(fn=>fn());
                    }
                };
                let reject = reason => {
                    if (this.state === 'pending') {
                        this.state = 'rejected';
                        this.reason = reason;
                        // 一旦reject执行，调用失败数组的函数
                        this.onRejectedCallbacks.forEach(fn=>fn());
                    }
                };
                try{
                    executor(resolve, reject);
                } catch (err) {
                    reject(err);
                }
            }
            then(onFulfilled,onRejected) {
                if (this.state === 'fulfilled') {
                    onFulfilled(this.value);
                };
                if (this.state === 'rejected') {
                    onRejected(this.reason);
                };
                // 当状态state为pending时
                if (this.state === 'pending') {
                    // onFulfilled传入到成功数组
                    this.onResolvedCallbacks.push(()=>{
                        onFulfilled(this.value);
                    })
                    // onRejected传入到失败数组
                    this.onRejectedCallbacks.push(()=>{
                        onRejected(this.reason);
                    })
                }
            }
        }