万字长文，20-50K前端工程师部分面试题集锦 - 附答案（收藏！）

const PENDING = "pending";const FULFILLED = "fulfilled";const REJECTED = "rejected";
function MyPromise(fn) {    const self = this;    self.value = null;    self.error = null;    self.status = PENDING;    self.onFulfilledCallbacks = [];    self.onRejectedCallbacks = [];
    function resolve(value) {        if (value instanceof MyPromise) {            return value.then(resolve, reject);        }        if (self.status === PENDING) {            setTimeout(() => {                self.status = FULFILLED;                self.value = value;                self.onFulfilledCallbacks.forEach((callback) => callback(self.value));            }, 0)        }    }
    function reject(error) {        if (self.status === PENDING) {            setTimeout(function() {                self.status = REJECTED;                self.error = error;                self.onRejectedCallbacks.forEach((callback) => callback(self.error));            }, 0)        }    }    try {        fn(resolve, reject);    } catch (e) {        reject(e);    }}
function resolvePromise(bridgepromise, x, resolve, reject) {    if (bridgepromise === x) {        return reject(new TypeError('Circular reference'));    }
    let called = false;    if (x instanceof MyPromise) {        if (x.status === PENDING) {            x.then(y => {                resolvePromise(bridgepromise, y, resolve, reject);            }, error => {                reject(error);            });        } else {            x.then(resolve, reject);        }    } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {        try {            let then = x.then;            if (typeof then === 'function') {                then.call(x, y => {                    if (called) return;                    called = true;                    resolvePromise(bridgepromise, y, resolve, reject);                }, error => {                    if (called) return;                    called = true;                    reject(error);                })            } else {                resolve(x);            }        } catch (e) {            if (called) return;            called = true;            reject(e);        }    } else {        resolve(x);    }}
MyPromise.prototype.then = function(onFulfilled, onRejected) {    const self = this;    let bridgePromise;    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;    onRejected = typeof onRejected === "function" ? onRejected : error => { throw error };    if (self.status === FULFILLED) {        return bridgePromise = new MyPromise((resolve, reject) => {            setTimeout(() => {                try {                    let x = onFulfilled(self.value);                    resolvePromise(bridgePromise, x, resolve, reject);                } catch (e) {                    reject(e);                }            }, 0);        })    }    if (self.status === REJECTED) {        return bridgePromise = new MyPromise((resolve, reject) => {            setTimeout(() => {                try {                    let x = onRejected(self.error);                    resolvePromise(bridgePromise, x, resolve, reject);                } catch (e) {                    reject(e);                }            }, 0);        });    }    if (self.status === PENDING) {        return bridgePromise = new MyPromise((resolve, reject) => {            self.onFulfilledCallbacks.push((value) => {                try {                    let x = onFulfilled(value);                    resolvePromise(bridgePromise, x, resolve, reject);                } catch (e) {                    reject(e);                }            });            self.onRejectedCallbacks.push((error) => {                try {                    let x = onRejected(error);                    resolvePromise(bridgePromise, x, resolve, reject);                } catch (e) {                    reject(e);                }            });        });    }}MyPromise.prototype.catch = function(onRejected) {    return this.then(null, onRejected);}
MyPromise.deferred = function() {    let defer = {};    defer.promise = new MyPromise((resolve, reject) => {        defer.resolve = resolve;        defer.reject = reject;    });    return defer;}try {    module.exports = MyPromise} catch (e) {}

promisify = function(fn) {  return function() {    var args = Array.from(arguments);    return new MyPromise(function(resolve, reject) {      fn.apply(        null,        args.concat(function(err) {          err ? reject(err) : resolve(arguments[1]);        })      );    });  };};

export default function bindActionCreator(actions, dispatch) {    let newActions = {};    for (let key in actions) {        newActions[key] = () => dispatch(actions[key].apply(null, arguments));    }    return newActions;}

export default combineReducers = reducers => (state = {}, action) => Object.keys(reducers).reduce((currentState, key) => {    currentState[key] = reducers[key](state[key], action);    return currentState;}, {});

export default function createStore(reducer, enhancer) {    if (typeof enhancer !== 'undefined') {        return enhancer(createStore)(reducer)    }    let state = null    const listeners = []    const subscribe = (listener) => {        listeners.push(listener)    }    const getState = () => state    const dispatch = (action) => {        state = reducer(state, action)        listeners.forEach((listener) => listener())    }    dispatch({})    return { getState, dispatch, subscribe }}

export default function applyMiddleware(...middlewares) {    return (createStore) => (reducer) => {        const store = createStore(reducer)        let dispatch = store.dispatch        let chain = []
        const middlewareAPI = {            getState: store.getState,            dispatch: (action) => dispatch(action)        }        chain = middlewares.map(middleware => middleware(middlewareAPI))        dispatch = compose(...chain)(store.dispatch)
        return {            ...store,            dispatch        }    }}

export default function compose(...funcs) {    return funcs.reduce((a, b) => (...args) => a(b(...args)));}

setTimeout(() => {  console.log(1);});//----若干代码逻辑new Promise((resolve, reject) => {  resolve();}).then(() => {  console.log(2);});

use (fn) {    // this.fn = fn 改成：    this.middlewares.push(fn) // 每次use，把当前回调函数存进数组}compose(middlewares, ctx){ // 简化版的compose，接收中间件数组、ctx对象作为参数    function dispatch(index){ // 利用递归函数将各中间件串联起来依次调用        if(index === middlewares.length) return // 最后一次next不能执行，不然会报错        let middleware = middlewares[index] // 取当前应该被调用的函数        middleware(ctx, () => dispatch(index + 1)) // 调用并传入ctx和下一个将被调用的函数，用户next()时执行该函数    }    dispatch(0)}

http://www.xiuchuang.com/question/4019.html

仓库地址：https://github.com/JinJieTan/mini-react

https://baijiahao.baidu.com/s?id=1631700601579800845&wfr=spider&for=pc

language: node_jsnode_js:  - '12'services:  - docker
before_install:  - npm install  - npm install -g parcel-bundler
script:  - parcel build ./index.js  - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin  - docker build -t jinjietan/mini-react:latest .  - docker push jinjietan/mini-react:latest

FROM nginxCOPY ./index.html /usr/share/nginx/html/COPY ./dist /usr/share/nginx/html/distEXPOSE 80