前端面试手撕代码（4399二面）

前言

最近面了4399，一面主要问业务和八股文没考算法。二面给了两道题，一道事件循环的打印题，一道手写vue的响应式。三面全是业务面，也没考算法题。

给出打印结果和顺序

console.log('script start');

setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
    console.log('promise 1 in setTimeout 1');
    throw new Error('Error in promise 1 in setTimeout 1');
  }).catch(() => {
    console.log('catch error in setTimeout 1');
  }).finally(() => {
    console.log('finally in setTimeout 1');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('promise 1');
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('setTimeout 2 in promise 1');
      resolve('resolved value from setTimeout 2');
    }, 0);
  }).then(value => {
    console.log(value);
    throw new Error('Error in promise 2');
  }).catch(() => {
    console.log('catch error in promise 2');
  }).finally(() => {
    console.log('finally in promise 2');
  });
}).then(() => {
  console.log('promise 3');
}).catch(() => {
  console.log('catch error in promise 3');
}).finally(() => {
  console.log('finally in promise 3');
});

setTimeout(() => {
  console.log('setTimeout 3');
}, 0);

console.log('script end');

打印结果

建议对结果有疑问可以访问juejin.cn/post/747593… ，这篇文章推荐的可视化网站可以查看事件循环的执行过程。

手写Vue响应式

const i = document.createElement('input');

document.body.appendChild(i);

i.id = 'input'

const input = document.querySelector('#input');

const obj = { username: '张三', age: 18 };

const proxy = new Proxy(obj, {
    get(target, prop) {
        if (prop === 'username') {
            return input.value;
        }

        return Reflect.get(target, prop);
    },
    set(target, prop, value) {
        if (prop === 'username') {
            input.value = value;
        }

        return Reflect.set(target, prop, value);
    }
});

input.addEventListener('input', () => {
    proxy.username = input.value;
});

input.value = proxy.username;

打开一个浏览器，空白页面执行就可以看到绑定效果。