手撕代码 - 简书

前端笔试和面试都难免要手撕代码，有些面试官还就喜欢看你现场写。诚然，一个程序员在写代码时很容易暴露问题，但也能展现实力，就像厨师做菜。
Dancing as no one is watching, coding as everyone is watching.
（一）手撕 new操作符
实现 New(Func[,args])类似于 new Func([args])。

   //1.创建一个新对象
    //2.将构造函数的作用域赋给新对象(this 指向新创建的对象)
    //3.执行构造函数中的代码
    //4.返回新创建的对象.
    function New(func) {
        let res={};
        if(func.prototype!==null){
            res.__proto__=func.prototype;
        }
        let ret=func.apply(res,Array.prototype.slice.call(arguments,1));
        if(ret!==null &&(typeof ret==='object'|| typeof ret==='function')){
            return ret;
        }
        return res;
    }

**（二）手撕 JSON.stringify **

   //Boolean | Number| String 类型会自动转换成对应的原始值。
    //undefined、任意函数以及symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。
    //不可枚举的属性会被忽略
   // 如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。
    function jsonStringify(obj) {
        let type=typeof obj;
        //特定基本类型
        if(type!=="object"){
            if(/undefined|function|symbol/.test(type)){
                return;
            }
            return String(obj);
        }
        //数组或非数组对象
        else {
            const isArr=Array.isArray(obj);
            let json=[];
            for(let k in obj){
                let v=obj[k];
                let type=typeof v;
                if(v===obj){
                    continue;
                }
                if(/undefined|function|symbol/.test(type)){
                    if(isArr){v="null";
                    }
                    else{
                        continue;
                    }
                }
                else if(type==="object" && v!==null){
                    v=jsonStringify(v);
                }
                else if(type==="string"){
                    v='"'+v+'"';
                }
                isArr? json.push(String(v)) : json.push('"'+k+'"'+':'+ String(v));
            }
            return isArr? "[" +String(json)+ "]" : "{" +String(json)+ "}";
        }
    }

**（三）手撕 JSON.parse **
以下两个方法仅应对面试，实际中还是用原生的JSON.parse.

//方法1 利用eval，但是eval并不安全，存在XSS漏洞，需要对json做校验。
function jsonParse(json) {
    const rx_one = /^[\],:{}\s]*$/;
    const rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
    const rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
    const rx_four = /(?:^|:|,)(?:\s*\[)+/g;
    if (rx_one.test(
            json
                .replace(rx_two, "@")
                .replace(rx_three, "]")
                .replace(rx_four, "")
        )
    ) {
        return eval("(" +json + ")");
    }
}

//方法二，利用new Function()，和eval都会动态编译js代码，实际中并不推荐
 function jsonParse2(json) {
     return new Function('return'+json);
 }

**（四）手撕 call apply bind **
对于call 或者 apply，实现的核心都是以下3步：
（以 foo.call(bar) 为例）
（1）将函数 foo 设为指定对象 bar 的属性；
（2）执行该函数；
（3）删除对象上的这个临时属性，并返回上一步的执行结果。

 // 1.call的模拟实现
   Function.prototype.call2=function (context = window) {
       context.fn=this;
       let args=[...arguments].slice(1);
       let result=context.fn(...args);
       delete context.fn;
       return result;
   }

   //2.apply 的模拟实现
    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;
    }

bind的实现要复杂些，因为要考虑到将绑定后的函数作为构造函数来new 对象实例。
关于bind的详细资料，参考MDN。
如果将绑定后的函数作为非构造函数调用，就比较简单。而作为构造函数调用时，如下所示

const foo=function(){ };// 待绑定的函数
const bar={ };// 指定的对象，传到 bind中作为第一个参数
const boundFoo=foo.bind(bar);
let bf1=new boundFoo();

需要注意：
（1）this指向：绑定后的函数boundFoo被当作构造函数调用，其内部的 this指向新创建的对象实例 bf1，而不是绑定 foo 时指定的对象 bar。
（2）原型链：需要维护原型链，即构造函数 boundFoo 继承自最初待绑定的函数 foo 。
完整的 bind 模拟函数如下：

 //3.bind的模拟实现
    Function.prototype.bind2=function(context){
        // closet thing possible to the ES5
        // internal IsCallable function
        if(typeof this!=='function'){
            throw new TypeError('Function.prototype.bind - ' +
                'what to be bound is not callable.');
        }

        let aArgs=Array.prototype.slice.call(arguments,1);
        let fnToBind=this;
        let fnNOP=function () {};
        let fnBound=function () {
            // this instanceof fnBound===true,说明返回的fnBound
            //被当作构造函数(via new)调用
            return fnToBind.apply(
                this instanceof fnBound? this: context,
                //获取调用(fnBound)时传入的参数
                aArgs.concat(...arguments)
            );
        };

        //维护原型关系
        if(this.prototype){
            // Function.prototype doesn't have a prototype property.
            fnNOP.prototype=this.prototype;
        }
        //若fnBound作为构造函数，则通过new生成的对象的__proto__指向fNOP的实例
        //（fnBound继承了fNOP）
        fnBound.prototype=new fnNOP();
        return fnBound;
    }

关于 bind ，还有一个地方要注意，就是在调用 bind绑定时，传给 bind 的参数除了第一个被指定为绑定后的 this，其余参数(args1)会被插入到目标函数的参数列表的开始位置，而调用绑定好的函数时，传递给被绑定函数的参数(args2)会跟在它们(args1)后面。这个在上段代码中体现为 aArgs.concat(...arguments)。
这个被称为偏函数，会造成调用绑定好的函数时，传入的参数由于在绑定时已经传入了相应位置上的参数而被忽略，如下所示。

// test
    let foo={
       value:1
    }
    function bar(name, age) {
        console.log(name);
        console.log(age);
        console.log(this.value);
    }
    // bar.call2(foo);
    // bar.apply2(foo);
    let boundBar=bar.bind2(foo,'Bob',25);
    boundBar('Ann',23); // 'Bob',25,1

**（五）手撕 promise **
（1）瓜皮版，可作为改进的草稿，面试实在写不出来就凑合用这个吧。

    // 实现1，瓜皮版，并不完全具备promise的功能
    // 缺点：（1）then返回的并不是promise对象；
    //  （2）实例化promise的时候无法处理异步的resolve
    // （3）then 指定的回调并不是异步的
    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{
            //实例化promise的时候指定何时调用resolve，何时调用reject
            constructor(resolve,reject);
        }catch (e) {
            reject(e);
        }
    }

    MyPromise.prototype.then=function (onFulfilled, onRejected) {
        let self=this;
        switch(self.status){
            case "resolved":
                onFulfilled(self.value);
                break;
            case "rejected":
                onRejected(self.reason);
                break;
            default:
        }
    }

（2）牛逼版，不过以下代码虽然符合 promise A+规范，可以在面试官面前装装逼，但只是模拟实现，其 then 回调并不是微任务，而且使用了 setTimeout 来模拟异步。应用中还是用原生的 Promise。
来源：1
2
3

 // 终极版
    /**
     * 1. new Promise时，需要传递一个 executor 执行器，执行器立刻执行
     * 2. executor 接受两个参数，分别是 resolve 和 reject
     * 3. promise 只能从 pending 到 rejected, 或者从 pending 到 fulfilled
     * 4. promise 的状态一旦确认，就不会再改变
     * 5. promise 都有 then 方法，then 接收两个参数，分别是 promise 成功的回调 onFulfilled,
     *      和 promise 失败的回调 onRejected
     * 6. 如果调用 then 时，promise已经成功，则执行 onFulfilled，并将promise的值作为参数传递进去。
     *      如果promise已经失败，那么执行 onRejected, 并将 promise 失败的原因作为参数传递进去。
     *      如果promise的状态是pending，需要将onFulfilled和onRejected函数存放起来，等待状态确定后，再依次将对应的函数执行(发布订阅)
     * 7. then 的参数 onFulfilled 和 onRejected 可以缺省
     * 8. promise 可以then多次，promise 的then 方法返回一个 promise
     * 9. 如果 then 返回的是一个结果，那么就会把这个结果作为参数，传递给下一个then的成功的回调(onFulfilled)
     * 10. 如果 then 中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调(onRejected)
     * 11.如果 then 返回的是一个promise,那么需要等这个promise，那么会等这个promise执行完，promise如果成功，
     *   就走下一个then的成功，如果失败，就走下一个then的失败
     */
    //https://juejin.im/post/5c88e427f265da2d8d6a1c84#heading-16
    const PENDING = 'pending';
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    function myPromise(executor) {
        let self = this;
        self.status = PENDING;
        self.onFulfilled = [];//成功的回调
        self.onRejected = []; //失败的回调
        //PromiseA+ 2.1
        function  resolve(value) {
            // 如果 value 本身就是一个promise
            if(value instanceof myPromise){
                return value.then(resolve,reject);
            }

            if (self.status === PENDING) {
                self.status = FULFILLED;
                self.value = value;
                self.onFulfilled.forEach(fn => fn());//PromiseA+ 2.2.6.1
            }
        }

        function reject(reason) {
            if (self.status === PENDING) {
                self.status = REJECTED;
                self.reason = reason;
                self.onRejected.forEach(fn => fn());//PromiseA+ 2.2.6.2
            }
        }

        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }

    //onFulfilled 和 onFulfilled的调用需要放在setTimeout，
    // 因为规范中表示: onFulfilled or onRejected must not be called
    // until the execution context stack contains only platform code。
    // 使用setTimeout只是模拟异步，原生Promise并非是这样实现的.
    myPromise.prototype.then = function (onFulfilled, onRejected) {
        //PromiseA+ 2.2.1 / PromiseA+ 2.2.5 / PromiseA+ 2.2.7.3 / PromiseA+ 2.2.7.4
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
        let self = this;
        //PromiseA+ 2.2.7
        let promise2 = new myPromise((resolve, reject) => {
            if (self.status === FULFILLED) {
                //PromiseA+ 2.2.2
                //PromiseA+ 2.2.4 --- setTimeout
                setTimeout(() => {
                    try {
                        //PromiseA+ 2.2.7.1
                        let x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        //PromiseA+ 2.2.7.2
                        reject(e);
                    }
                });
            } else if (self.status === REJECTED) {
                //PromiseA+ 2.2.3
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                });
            }
            //  如果promise的状态是pending，需要将onFulfilled和onRejected函数存放起来，
            //  等待状态确定后，再依次将对应的函数执行(发布订阅)
            else if (self.status === PENDING) {
                self.onFulfilled.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(self.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    });
                });
                self.onRejected.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(self.reason);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    });
                });
            }
        });
        return promise2;
    }

    function resolvePromise(promise2, x, resolve, reject) {
        let self = this;
        //PromiseA+ 2.3.1
        if (promise2 === x) {
            reject(new TypeError('Chaining cycle'));
        }
        if (x && typeof x === 'object' || typeof x === 'function') {
            let used; //PromiseA+2.3.3.3.3 只能调用一次
            try {
                let then = x.then;
                //如果 x 是个 thenable 对象
                if (typeof then === 'function') {
                    //PromiseA+2.3.3
                    //then.call(x, resolvePromiseFn, rejectPromiseFn)
                    then.call(x, (y) => {
                        //PromiseA+2.3.3.1
                        if (used) return;
                        used = true;
                        // 递归调用
                        resolvePromise(promise2, y, resolve, reject);
                    }, (r) => {
                        //PromiseA+2.3.3.2
                        if (used) return;
                        used = true;
                        reject(r);
                    });

                }else{
                    //PromiseA+2.3.3.4
                    if (used) return;
                    used = true;
                    resolve(x);
                }
            } catch (e) {
                //PromiseA+ 2.3.3.2
                if (used) return;
                used = true;
                reject(e);
            }
        } else {
            //PromiseA+ 2.3.3.4
            resolve(x);
        }
    }