[译]前端JS面试题汇总 Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)

原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md

最近将持续翻译JavaScript面试题,希望对各位有所帮助。  

(文章中斜体字部分为译者添加)

目录:

Part 1(事件委托/this关键字/原型链/AMD与CommonJS/自执行函数)

Part 2 (null与undefined/闭包/foreach与map/匿名函数/代码组织)....即将发布

  1、解释事件委托

  事件委托是一种向父级元素增加事件监听器,而不用向子级元素一个个添加的技术方案。监听器将在会DOM事件冒泡到父级元素时被触发。事件委托有以下优势:

  • 因为我们只需要在父级元素上添加一个监听器,而不用在每个子元素上添加,所以JS的内存占用会降低很多。
  • 当子元素有移除(或新增)时,我们不用单独移除(或添加)其事件监听器。(注:也就是我们常说的动态绑定)

  参考文档:

  https://davidwalsh.name/event-delegate

  https://*.com/questions/1687296/what-is-dom-event-delegation

  2、解释JavaScript中的this工作原理

   关于this其实没有一个统一的解释,它算是JavaScript中最让人困惑的一个概念了。一种通俗的解释就是,this的取值依赖于函数被谁调用。我在网上看过很多关于this的解释,其中Arnav Aggrawal 的解释应该是最为清楚的,以下是他的观点:

  • 如果是使用new关键字来调用函数,那么函数内部的this就是一个全新的对象。
  • 如果使用apply、call或者bind来调用一个函数,函数内部的this就将指向传入的第一个参数。(注:使用这几个方法可以改变this的指向)
  • 如果函数被作为一个方法进行调用,比如:obj.method() --- 那么this就该函数的调用者。(注:样例中的obj)
  • 如果函数被独立调用,也就是没有被上述的几种情况调用。(比如:method())这种情况,this将指向于一个全局对象,在浏览器中是window对象。(nodejs环境中是global)如果是使用严格模式的话,那么全部对象将会是undefined。
  • 如果使用了上述多条规则的话,那么排序靠前的将优先控制this的指向。
  • 在ES2015中的箭头函数,将会忽略上述的所有规则,而将取决与函数创建时的作用域。(箭头函数的作用域在创建时就已经确定,不能更改。想想真是问题终结者...)

关于this更深一层的介绍,请参考:article on Medium

  引用文档:

  https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3

https://*.com/a/3127440/1751946

  3、解释原型链的原理

  这是一个在面试中经常被问到的问题。JavaScript中的所有对象一个叫prototype的属性,这个属性指向于另一个对象。当需要访问一个对象上的某个属性时,如果在自身对象上没有找到该属性的话,JS引擎会在对象的prototype上进行查找,找不到的话会继续在prototype的prototype对象,依次类推直至在某个prototype上找到该属性,或者到达原型链尽头时停止。JS的这种行为和传统的继承概念很像,但原型链的内容远不止于此,更多内容请查看:delegation than inheritance

  引用文档:

  https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson

  https://davidwalsh.name/javascript-objects

  4、如果看待AMD和CommonJS

  这两个都可以实现模块系统,模块系统在ES2015没有发布之前并没有被原生JavaScript所支持。CommonJS是同步的,AMD(Asynchronous Module Definition)是相对异步的。CommonJS的设计初衷是应用在服务端,而AMD主要用在客户浏览器端,因为它可以支持异步加载模块。

  另外在语法层面,我也发现AMD相对比较轻量化,而CommonJS更接近别的开发语言中导入模块的写法。大多数时候,AMD还是比较冗余的,因为它会导入所有的JavaScript代码到你的入口文件中,这样反而使我们不能从异步加载中受益。(比如我只需要lodash/map,但AMD会把整个lodash加载进来) CommonJS的语法更为接近Nodejs模块的编写方式,在服务端和客户端开发时,使用方式区别并不大。

  值得庆幸的是ES2015的到来,它可以同时支持同步与异步模块加载,使得我们有了一个统一的解决方案。但目前ES2015的模块系统还没有被完全支持,所以我们需要使用一些转换器将ES6编译为ES5。

  引用文档:

  https://auth0.com/blog/javascript-module-systems-showdown/

  https://*.com/questions/16521471/relation-between-commonjs-amd-and-requirejs

  5、function foo(){}(); 为什么这个表达是不是一个IIFE,要如何修改?

  IIFE的意思是自执行函数表达式。JavaScript引擎将会把上面的代码看着是function foo(){}和(),也就是说前面是一个函数声明,后面的()是尝试去执行这个函数,但是由于没有执行的函数名,所以这里会抛出异常:Uncaught SyntaxError: Unexpected token )。

  有两个通过增加括号的方法去修复上面的问题:(function foo(){}()) 以及  (function foo(){}())。这种函数并不会暴露在全局作用域中,你甚至还可以把函数名也去掉,只保留函数体本身。(即匿名函数:(function (){}()) )

  引用文档:

  http://lucybain.com/blog/2014/immediately-invoked-function-expression/

  

上一篇:Vue源码 深入响应式原理 (四)计算属性 VS 侦听属性


下一篇:VUE-计算属性