前端高频面试题

ES6 Module 和 CommonJS 模块的区别

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口，循环引用可以体现 参考

手写 new 操作符

function MyNew(fn, ...args) {
  // 1. 将该函数的原型属性作为对象原型
  const obj = Object.create(fn.prototype)
  // 2. 将该对象作为函数的上下文
  const result = fn.call(obj, ...args)
  // 若函数返回值为对象则使用该返回值，否者使用该对象
  return result instanceof Object ? result : obj
}

for...in 与 for...of 区别

for...of 语句执行一个循环，该循环处理来自可迭代对象的值序列。 for...in 语句迭代一个对象的所有可枚举字符串属性（除 Symbol 以外），包括继承的可枚举属性。包括其原型链上的 key 参考文档

可迭代对象

参考资料

手写 call、bind apply

call 可以理解为将函数作为上下文的一个方法了

Function.prototype.call2 = function (context) {
  context ||= window
  const key = Symbol()
  context[key] = this
  const args = Array.from(arguments).slice(1)
  const result = context[key](...args)
  delete context[key]
  return result
}

// bind
Function.prototype.bind2 = function (context) {
  context ||= window
  const key = Symbol()
  context[key] = this
  const args = Array.from(arguments).slice(1)
  return function () {
    const result = context[key](...args)
    delete context[key]
    return result
  }
}

生成器函数（Generator）

生成器函数返回一个符合可迭代协议和迭代器协议的 Generator 对象

手写 async、await

JS weakmap 是否生效

weakmap 观察内存变化，即将一个大内存对象作为 key，观察内存，移除引用后并 gc，再次观察内存变化

const wm = new WeakMap()

let key
const setM = () => {
  key = new Array(5 * 1024 * 1024)
  let obj = { foo: 1 }

  wm.set(key, obj)
  console.log('设置key')
}

const rmKey = () => {
  key = null
  console.log('移除key')
}

const printM = () => {
  console.log(window.performance.memory.usedJSHeapSize / 1024 / 1024 + ' MB')
}

函数柯里化函数

将一个接受多个参数的函数转变成多个只接受一个参数的函数

设计模式 观察者模式和发布订阅模式 区别

详见设计模式

XMLHttpRequest

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = (evt) => {
  console.log('readyState', xhr.readyState)

  if (xhr.readyState === xhr.DONE) {
    console.log(xhr.response)
  }
}

xhr.open('GET', 'https://httpbin.org/ip')

xhr.send()

vue-router hash 与 history 的区别

1. #号直观区别
2. #号后面部分的 url 不会发送至服务器，不利于 SEO
3. history 会出现 404 错误
4. pushState 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发记录添加到栈中;

vue2.x vue3.x diff 算法 以及 react diff 算法 react 组件是否刷新是如何判断的？

双端 diff 比较 从两端向中间 头头 尾尾 头尾 尾头 四步进行对比

vue 通信方式

props $emit 调用子组件方法 vuex | pinia provide、inject

vue 双向绑定

本质上，响应性是一种可以使我们声明式地处理变化的编程范式。

vue3 tree-shaking 实现原理

Tree-shaking 也叫摇树优化，它是通过移除多余的代码，从而减小最终的打包体积和应用程序的加载时间。 它的原理呢，是利用了 ES6 的模块化语法，也就是我们常用到的 import 和 export。 通过静态分析代码之间的引用关系，来判断哪些模块未被引用，进而删除对应代码.