前端面试题汇总(全网最全)6

JS相关问题

• Q：什么是事件代理？

  A: 事件代理是一种技术，当我们需要为多个元素添加事件时，我们可以将事件添加到它们的父节点上，然后通过父节点来触发处理函数。这种方法主要利用了浏览器的事件冒泡机制。

    var delegate = function(client, clientMethod) {
        return function() {
            return clientMethod.apply(client, arguments);
        }
    }
  
    var agentMethod = delegate (client, clientMethod);
    agentMethod();
  

  相关阅读：

  • JavaScript事件代理和委托（Delegation）
  • 事件代理
  • 事件代理的应用

• Q: this 在 JavaScript 中是如何工作的？

  A: this 在 JavaScript 中有以下五种主要的使用场景。

  • 当作为函数调用时，this 绑定到全局对象，例如在浏览器环境中，全局对象是 window 。
  • 内部函数的 this 也绑定到全局对象，而不是绑定到其外层函数的对象，这是 JavaScript 的一个缺陷，可以用 that 来替换。
  • 当作为构造函数使用时，this 绑定到新创建的对象。
  • 当作为对象方法使用时，this 绑定到该对象。
  • 当使用 apply 或 call 调用时，this 将被显式设置为函数调用的第一个参数。

  参考阅读：

  • 深入浅出 JavaScript 中的 this
  • this 的工作原理

• Q: 原型继承的原理是什么？

  A:原型继承的基础是原型链查找。 原型链查找基本概念：

  1. 每一个函数 F 都有一个原型对象（prototype）F.prototype
  2. 每一个函数都可以通过 new 关键字化身成为一个类构造函数，new F 会产生一个对象 O
  3. 在调用对象的某个属性或者方法，比如 http://O.xxx 的时候，会首先查找对象自身是否有这个方法或者属性，如果没找到就会去对象的构造函数的原型对象中查找（注意有两个定语），也就是查找 O 的构造函数 F 的原型对象 http://F.prototype.xxx
  4. F.prototype 也是一个对象，查找 http://F.prototype.xxx 的时候会重复第 3 步的过程

  参考：

  • 深入理解javascript原型继承
  • JavaScript原型继承工作原理
  • Prototypal Inheritance in JavaScript

• Q: 你如何测试JavaScript代码的？

• A: AMD vs. CommonJS？

  Q: 可参考: javascript - Relation between CommonJS, AMD and RequireJS? - Stack Overflow

• Q: 什么是哈希表？

  A: 哈希表是一种数据结构，它可以直接根据关键字（Key value）访问内存存储位置。也就是说，它通过将键值通过一个函数计算，映射到表中的一个位置来访问记录，这样可以加快查找速度。这个映射函数被称为散列函数，存放记录的数组被称为散列表。

• Q: 为什么下面这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();。

  • 要做哪些改动使它变成 IIFE?

  A: 可参考 前端编码风格规范之 JavaScript 规范

  我们应该总是将代码包裹在一个 IIFE(立即调用的函数表达式)中，以创建一个独立的定义域。这样可以防止全局命名空间被污染。

  IIFE 还可以确保你的代码不会轻易被其他全局命名空间中的代码所修改（例如，第三方库，window 引用，被覆盖的未定义的关键字等等）。

  不推荐

  var x = 10,
      y = 100;
  
  // 在全局范围内声明变量会导致全局范围污染。像这样声明的所有变量
  // 都将存储在 window 对象中。这是非常不清洁的，需要避免。
  console.log(window.x + ' ' + window.y);
  

  推荐

  // 我们声明一个 IIFE 并将参数传递给函数，我们将使用全局空间
  (function(log, w, undefined){
    'use strict';
  
    var x = 10,
        y = 100;
  
    // 将输出 'true true'
    log((w.x === undefined) + ' ' + (w.y === undefined));
  
  }(window.console.log, window));
  

  IIFE（立即执行的函数表达式）:无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。

  所有脚本文件建议都从 IIFE 开始。

  立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。

  不推荐

  (function(){})();
  

  推荐

  (function(){}());
  

  所以，用以下方式来格式化你的 IIFE 代码：

  (function(){
    'use strict';
  
    // 代码在这里
  
  }());
  

  如果你想引用全局变量或者是外层 IIFE 的变量，可以通过以下方式传参：

  (function($, w, d){
    'use strict';
  
    $(function() {
      w.alert(d.querySelectorAll('div').length);
    });
  }(jQuery, window, document));