35道面向初中级前端的基础面试题

• 新鲜出炉的8月前端面试题

• 跨域资源共享 CORS 阮一峰

3. JSONP 是什么？

这是我认为写得比较通俗易懂的一篇文章jsonp原理详解——终于搞清楚jsonp是啥了。

4. 事件绑定的方式

• 嵌入dom

按钮

• 直接绑定

btn.onclick = function(){}

• 事件监听

btn.addEventListener(‘click’,function(){})

5. 事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。

• 苹果

• 香蕉

• 凤梨

• // good

  document.querySelector(‘ul’).onclick = (event) => {

  let target = event.target

  if (target.nodeName === ‘LI’) {

  console.log(target.innerHTML)

  }

  }

  // bad

  document.querySelectorAll(‘li’).forEach((e) => {

  e.onclick = function() {

  console.log(this.innerHTML)

  }

  })

  6. 事件循环

  事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。

  7. 如何自定义事件

  新模式

  const div = document.createElement(‘div’) // 不创建元素，直接用 window 对象也可以

  const event = new Event(‘build’)

  div.addEventListener(‘build’, function(e) {

  console.log(111)

  })

  div.dispatchEvent(event)

  过时的模式

  1. 原生提供了3个方法实现自定义事件

  2. document.createEvent('Event') 创建事件

  3. initEvent 初始化事件

  4. dispatchEvent 触发事件

  const events = {}

  function registerEvent(name) {

  const event = document.createEvent(‘Event’)

  event.initEvent(name, true, true) // 事件名称，是否允许冒泡，该事件的默认动作是否可以被取消

  events[name] = event

  }

  function triggerEvent(name) {

  window.dispatchEvent(events[name])

  }

  registerEvent(‘resize’) // 注册 resize 事件

  triggerEvent(‘resize’) // 触发 resize 事件

  MDN

  8. target 和 currentTarget 区别

  • event.target 返回触发事件的元素

  • event.currentTarget 返回绑定事件的元素

  9. prototype 和 proto 的关系是什么

  1. prototype 用于访问函数的原型对象。

  2. __proto__ 用于访问对象实例的原型对象（或者使用 Object.getPrototypeOf()）。

  function Test() {}

  const test = new Test()

  test.proto == Test.prototype // true

  也就是说，函数拥有 prototype 属性，对象实例拥有 __proto__ 属性，它们都是用来访问原型对象的。

  函数有点特别，它不仅是个函数，还是个对象。所以它也有 __proto__ 属性。

  为什么会这样呢？因为函数是内置构造函数 Function 的实例：

  const test = new Function(‘function Test(){}’)

  test.proto == Function.prototype // true

  所以函数能通过 __proto__ 访问它的原型对象。

  由于 prototype 是一个对象，所以它也可以通过 __proto__ 访问它的原型对象。对象的原型对象，那自然是 Object.prototype 了。

  function Test() {}

  Test.prototype.proto == Object.prototype // true

  这样看起来好像有点复杂，我们可以换个角度来看。Object 其实也是内置构造函数:

  const obj = new Object()

  obj.proto == Object.prototype // true</