备战金三银四，这35道Javascript面试题前端面试者必看（一）

男娘i 2023-01-02 03:21 181阅读 0赞

![064445b95b7006f6f88bf1692e5b071a.png][]

# 1.`undefined` 和 `null` 有什么区别？ #

在理解 `undefined` 和 `null` 的差异之前，我们先来看看它们的相似点。  
它们都属于 JavaScript 的 7 种基本类型。

let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];

它们是属于 falsy 值类型，可以使用 Boolean(value) 或 !!value 将其转换为布尔值时，值为false。

console.log(!!null); // false  
    console.log(!!undefined); // false  
    console.log(Boolean(null)); // false  
    console.log(Boolean(undefined)); // false

接着来看看它们的区别。  
undefined 是未指定特定值的变量的默认值，或者没有显式返回值的函数，如：console.log(1)，还包括对象中不存在的属性，这些 JS 引擎都会为其分配 undefined 值。

let _thisIsUndefined;  
    const doNothing = () => {};  
    const someObj = {  
      a : "ay",  
      b : "bee",  
      c : "si"  
    };  
     
    console.log(_thisIsUndefined); // undefined  
    console.log(doNothing()); // undefined  
    console.log(someObj["d"]); // undefined

null 是『不代表任何值的值』。null是已明确定义给变量的值。在此示例中，当fs.readFile方法未引发错误时，我们将获得null值。

fs.readFile('path/to/file', (e,data) => {  
       console.log(e); // 当没有错误发生时，打印 null  
       if(e){  
         console.log(e);  
       }  
       console.log(data);  
     });

在比较null和undefined时，我们使用时得到true，使用=时得到false:

console.log(null == undefined); // true  
    console.log(null === undefined); // false

# 2. && 运算符能做什么 #

&& 也可以叫逻辑与，在其操作数中找到第一个虚值表达式并返回它，如果没有找到任何虚值表达式，则返回最后一个真值表达式。它采用短路来防止不必要的工作。

console.log(false && 1 && []); // false  
    console.log(" " && true && 5); // 5

使用if语句

const router: Router = Router();  
    router.get('/endpoint', (req: Request, res: Response) => {  
       let conMobile: PoolConnection;  
       try {  
          //do some db operations  
       } catch (e) {  
       if (conMobile) {  
        conMobile.release();  
       }  
      }  
    });

使用&&操作符

const router: Router = Router();  
      
    router.get('/endpoint', (req: Request, res: Response) => {  
      let conMobile: PoolConnection;  
      try {  
         //do some db operations  
      } catch (e) {  
        conMobile && conMobile.release()  
      }  
    });

# 3. || 运算符能做什么 #

||也叫或逻辑或，在其操作数中找到第一个真值表达式并返回它。这也使用了短路来防止不必要的工作。在支持 ES6 默认函数参数之前，它用于初始化函数中的默认参数值。

console.log(null || 1 || undefined); // 1  
      
    function logName(name) {  
      var n = name || "Mark";  
      console.log(n);  
    }  
      
    logName(); // "Mark"

# 4. 使用 + 或一元加运算符是将字符串转换为数字的最快方法吗？ #

根据MDN文档，+是将字符串转换为数字的最快方法，因为如果值已经是数字，它不会执行任何操作。

# 5. DOM 是什么？ #

DOM 代表文档对象模型，是 HTML 和 XML 文档的接口(API)。当浏览器第一次读取(解析)HTML文档时，它会创建一个大对象，一个基于 HTM L文档的非常大的对象，这就是DOM。它是一个从 HTML 文档中建模的树状结构。DOM 用于交互和修改DOM结构或特定元素或节点。  
假设我们有这样的 HTML 结构：

<!DOCTYPE html>  
    <html lang="en">  
      
    <head>  
       <meta charset="UTF-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1.0">  
       <meta http-equiv="X-UA-Compatible" content="ie=edge">  
       <title>Document Object Model</title>  
    </head>  
      
    <body>  
       <div>  
          <p>  
             <span></span>  
          </p>  
          <label></label>  
          <input>  
       </div>  
    </body>  
      
    </html>

等价的DOM是这样的：  
JS 中的document对象表示DOM。它为我们提供了许多方法，我们可以使用这些方法来选择元素来更新元素内容，等等。

# 6. 什么是事件传播? #

当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在\*\*“冒泡阶段”中，事件冒泡或向上传播至父级，祖父母，祖父母或父级，直到到达window为止；而在“捕获阶段”\*\*中，事件从window开始向下触发元素 事件或event.target。  
事件传播有三个阶段：

捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素。

目标阶段–事件已达到目标元素。

冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window。

# 7. 什么是事件冒泡？ #

当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。  
假设有如下的 HTML 结构：

<div class="grandparent">  
      <div class="parent">  
        <div class="child">1</div>  
      </div>  
    </div>

对应的 JS 代码:

function addEvent(el, event, callback, isCapture = false) {  
      if (!el || !event || !callback || typeof callback !== 'function') return;  
      if (typeof el === 'string') {  
        el = document.querySelector(el);  
      };  
      el.addEventListener(event, callback, isCapture);  
    }  
      
    addEvent(document, 'DOMContentLoaded', () => {  
      const child = document.querySelector('.child');  
      const parent = document.querySelector('.parent');  
      const grandparent = document.querySelector('.grandparent');  
      
      addEvent(child, 'click', function (e) {  
        console.log('child');  
      });  
      
      addEvent(parent, 'click', function (e) {  
        console.log('parent');  
      });  
      
      addEvent(grandparent, 'click', function (e) {  
        console.log('grandparent');  
      });  
      
      addEvent(document, 'click', function (e) {  
        console.log('document');  
      });  
      
      addEvent('html', 'click', function (e) {  
        console.log('html');  
      })  
      
      addEvent(window, 'click', function (e) {  
        console.log('window');  
      })  
      
    });

addEventListener方法具有第三个可选参数useCapture，其默认值为false，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生。如果单击child元素，它将分别在控制台上记录child，parent，grandparent，html，document和window，这就是事件冒泡。

1.  什么是事件捕获？

当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。  
假设有如下的 HTML 结构：

<div class="grandparent">  
      <div class="parent">  
        <div class="child">1</div>  
      </div>  
    </div>

对应的 JS 代码:

addEventListener方法具有第三个可选参数useCapture，其默认值为false，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生。如果单击child元素，它将分别在控制台上打印window，document，html，grandparent和parent，这就是事件捕获。

# 9. event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？ #

event.preventDefault() 方法可防止元素的默认行为。如果在表单元素中使用，它将阻止其提交。如果在锚元素中使用，它将阻止其导航。如果在上下文菜单中使用，它将阻止其显示或显示。event.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。

# 10. 如何知道是否在元素中使用了event.preventDefault()方法？ #

我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。

# 11. 为什么此代码 obj.someprop.x 会引发错误? #

const obj = {};console.log(obj.someprop.x);

显然，由于我们尝试访问someprop属性中的x属性，而 someprop 并没有在对象中，所以值为 undefined。记住对象本身不存在的属性，并且其原型的默认值为undefined。因为undefined没有属性x，所以试图访问将会报错。

# 12. 什么是 event.target ？ #

简单来说，event.target是发生事件的元素或触发事件的元素。  
假设有如下的 HTML 结构：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;  
    border:1px solid red;border-radius:3px;">  
        <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">  
            <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">  
              <button style="margin:10px">  
                 Button  
              </button>  
            </div>  
        </div>  
     </div>

JS 代码如下：

function clickFunc(event) {  
      console.log(event.target);  
    }

如果单击 button，即使我们将事件附加在最外面的div上，它也将打印 button 标签，因此我们可以得出结论event.target是触发事件的元素。

# 13. 什么是 event.currentTarget？？ #

event.currentTarget是我们在其上显式附加事件处理程序的元素。  
假设有如下的 HTML 结构：

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;  
    border:1px solid red;border-radius:3px;">  
      <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">  
          <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">  
            <button style="margin:10px">  
               Button  
            </button>  
          </div>  
      </div>  
    </div>

JS 代码如下：

function clickFunc(event) {  
      console.log(event.currentTarget);  
    }

如果单击 button，即使我们单击该 button，它也会打印最外面的div标签。在此示例中，我们可以得出结论，event.currentTarget是附加事件处理程序的元素。

# 14. == 和 === 有什么区别？ #

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。  
先来看看 == 这兄弟：  
强制是将值转换为另一种类型的过程。在这种情况下，==会执行隐式强制。在比较两个值之前，==需要执行一些规则。  
假设我们要比较x == y的值。

如果x和y的类型相同，则 JS 会换成===操作符进行比较。

如果x为null, y为undefined，则返回true。

如果x为undefined且y为null，则返回true。

如果x的类型是number, y的类型是string，那么返回x == toNumber(y)。

如果x的类型是string, y的类型是number，那么返回toNumber(x) == y。

如果x为类型是boolean，则返回toNumber(x)== y。

如果y为类型是boolean，则返回x == toNumber(y)。

如果x是string、symbol或number，而y是object类型，则返回x == toPrimitive(y)。

如果x是object，y是string，symbol则返回toPrimitive(x) == y。

剩下的 返回 false

# 15. 为什么在 JS 中比较两个相似的对象时返回 false？ #

先看下面的例子：

let a = { a: 1 };  
    let b = { a: 1 };  
    let c = a;  
    console.log(a === b); // 打印 false，即使它们有相同的属性  
    console.log(a === c); // true

JS 以不同的方式比较对象和基本类型。在基本类型中，JS 通过值对它们进行比较，而在对象中，JS 通过引用或存储变量的内存中的地址对它们进行比较。这就是为什么第一个console.log语句返回false，而第二个console.log语句返回true。a和c有相同的引用地址，而a和b没有。

# 16. !! 运算符能做什么？ #

!!运算符可以将右侧的值强制转换为布尔值，这也是将值转换为布尔值的一种简单方法。

console.log(!!null); // false  
    console.log(!!undefined); // false  
    console.log(!!''); // false  
    console.log(!!0); // false  
    console.log(!!NaN); // false  
    console.log(!!' '); // true  
    console.log(!!{}); // true  
    console.log(!![]); // true  
    console.log(!!1); // true  
    console.log(!![].length); // false

1.  如何在一行中计算多个表达式的值？

可以使用逗号运算符在一行中计算多个表达式。它从左到右求值，并返回右边最后一个项目或最后一个操作数的值。

let x = 5;  
      
    x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);  
      
    function addFive(num) {  
      return num + 5;  
    }

上面的结果最后得到x的值为27。首先，我们将x的值增加到6，然后调用函数addFive(6)并将6作为参数传递并将结果重新分配给x，此时x的值为11。之后，将x的当前值乘以2并将其分配给x，x的更新值为22。然后，将x的当前值减去5并将结果分配给x x更新后的值为17。最后，我们将x的值增加10，然后将更新的值分配给x，最终x的值为27。

1.  什么是提升？

提升是用来描述变量和函数移动到其(全局或函数)作用域顶部的术语。  
为了理解提升，需要来了解一下执行上下文。执行上下文是当前正在执行的\*\*“代码环境”\*\*。执行上下文有两个阶段:编译和执行。  
编译-在此阶段，JS 引荐获取所有函数声明并将其提升到其作用域的顶部，以便我们稍后可以引用它们并获取所有变量声明（使用var关键字进行声明），还会为它们提供默认值：undefined。  
执行——在这个阶段中，它将值赋给之前提升的变量，并执行或调用函数(对象中的方法)。  
注意: 只有使用var声明的变量，或者函数声明才会被提升，相反，函数表达式或箭头函数，let和const声明的变量，这些都不会被提升。  
假设在全局使用域，有如下的代码：

console.log(y);  
    y = 1;  
    console.log(y);  
    console.log(greet("Mark"));  
      
    function greet(name){  
      return 'Hello ' + name + '!';  
    }  
      
    var y;

上面分别打印：undefined,1, Hello Mark!。  
上面代码在编译阶段其实是这样的：

function greet(name) {  
      return 'Hello ' + name + '!';  
    }  
      
    var y; // 默认值 undefined  
      
    // 等待“编译”阶段完成，然后开始“执行”阶段  
      
    /*  
    console.log(y);  
    y = 1;  
    console.log(y);  
    console.log(greet("Mark"));  
    */

编译阶段完成后，它将启动执行阶段调用方法，并将值分配给变量。

function greet(name) {  
      return 'Hello ' + name + '!';  
    }  
      
    var y;  
      
    //start "execution" phase  
      
    console.log(y);  
    y = 1;  
    console.log(y);  
    console.log(greet("Mark"));

# 19. 什么是作用域？ #

JavaScript 中的作用域是我们可以有效访问变量或函数的区域。JS 有三种类型的作用域：全局作用域、函数作用域和块作用域(ES6)。

全局作用域——在全局命名空间中声明的变量或函数位于全局作用域中，因此在代码中的任何地方都可以访问它们。

//global namespace  
    var g = "global";  
      
    function globalFunc(){  
      function innerFunc(){  
        console.log(g); // can access "g" because "g" is a global variable  
      }  
     innerFunc();  
    }

函数作用域——在函数中声明的变量、函数和参数可以在函数内部访问，但不能在函数外部访问。

function myFavoriteFunc(a) {  
      if (true) {  
        var b = "Hello " + a;  
      }  
      return b;  
    }  
      
    myFavoriteFunc("World");  
      
    console.log(a); // Throws a ReferenceError "a" is not defined  
    console.log(b); // does not continue here

块作用域-在块\{\}中声明的变量（let，const）只能在其中访问。

function testBlock(){  
       if(true){  
         let z = 5;  
       }  
       return z;   
     }  
     
     testBlock(); // Throws a ReferenceError "z" is not defined

作用域也是一组用于查找变量的规则。如果变量在当前作用域中不存在，它将向外部作用域中查找并搜索，如果该变量不存在，它将再次查找直到到达全局作用域，如果找到，则可以使用它，否则引发错误，这种查找过程也称为作用域链。

/* 作用域链  
      
     内部作用域->外部作用域-> 全局作用域  
    */  
      
    // 全局作用域  
    var variable1 = "Comrades";     
    var variable2 = "Sayonara";  
      
    function outer(){  
    // 外部作用域  
    var variable1 = "World";  
    function inner(){  
    // 内部作用域  
      var variable2 = "Hello";  
      console.log(variable2 + " " + variable1);  
    }  
    inner();  
    }    
    outer(); // Hello World

# 20. 什么是闭包？ #

这可能是所有问题中最难的一个问题，因为闭包是一个有争议的话题，这里从个人角度来谈谈，如果不妥，多多海涵。  
闭包就是一个函数在声明时能够记住当前作用域、父函数作用域、及父函数作用域上的变量和参数的引用，直至通过作用域链上全局作用域，基本上闭包是在声明函数时创建的作用域。  
看看小例子：

// 全局作用域  
     var globalVar = "abc";  
     
     function a(){  
       console.log(globalVar);  
     }  
     
     a(); // "abc"

在此示例中，当我们声明a函数时，全局作用域是a闭包的一部分。  
变量globalVar在图中没有值的原因是该变量的值可以根据调用函数a的位置和时间而改变。但是在上面的示例中，globalVar变量的值为abc。  
来看一个更复杂的例子：

var globalVar = "global";  
    var outerVar = "outer"  
      
    function outerFunc(outerParam) {  
      function innerFunc(innerParam) {  
        console.log(globalVar, outerParam, innerParam);  
      }  
      return innerFunc;  
    }  
      
    const x = outerFunc(outerVar);  
    outerVar = "outer-2";  
    globalVar = "guess"  
    x("inner");

上面打印结果是  guess outer inner。  
当我们调用outerFunc函数并将返回值innerFunc函数分配给变量x时，即使我们为outerVar变量分配了新值outer-2，outerParam也继续保留outer值，因为重新分配是在调用outerFunc之后发生的，并且当我们调用outerFunc函数时，它会在作用域链中查找outerVar的值，此时的outerVar的值将为 “outer”。  
现在，当我们调用引用了innerFunc的x变量时，innerParam将具有一个inner值，因为这是我们在调用中传递的值，而globalVar变量值为guess，因为在调用x变量之前，我们将一个新值分配给globalVar。  
下面这个示例演示没有理解好闭包所犯的错误：

const arrFuncs = [];  
    for(var i = 0; i < 5; i++){  
      arrFuncs.push(function (){  
        return i;  
      });  
    }  
    console.log(i); // i is 5  
      
    for (let i = 0; i < arrFuncs.length; i++) {  
      console.log(arrFuncs[i]()); // 都打印 5  
    }

由于闭包，此代码无法正常运行。var关键字创建一个全局变量，当我们 push 一个函数时，这里返回的全局变量i。因此，当我们在循环后在该数组中调用其中一个函数时，它会打印5，因为我们得到i的当前值为5，我们可以访问它，因为它是全局变量。  
因为闭包在创建变量时会保留该变量的引用而不是其值。我们可以使用IIFES或使用 let 来代替 var 的声明。

# 21. JavaScript 中的虚值是什么？ #

`const falsyValues = ['', 0, null, undefined, NaN, false];`  
简单的来说虚值就是是在转换为布尔值时变为 false 的值。

# 22. 如何检查值是否虚值？ #

使用 Boolean 函数或者 !! 运算符。

# 23. ‘use strict’ 是干嘛用的？ #

“use strict” 是 ES5 特性，它使我们的代码在函数或整个脚本中处于严格模式。严格模式帮助我们在代码的早期避免 bug，并为其添加限制。  
严格模式的一些限制：

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀 0 表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global\[prop\]

eval不能在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

设立”严格模式”的目的，主要有以下几个：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

# 24. JavaScript 中 this 值是什么？ #

基本上，this指的是当前正在执行或调用该函数的对象的值。this值的变化取决于我们使用它的上下文和我们在哪里使用它。

const carDetails = {  
      name: "Ford Mustang",  
      yearBought: 2005,  
      getName(){  
        return this.name;  
      },  
      isRegistered: true  
    };  
      
    console.log(carDetails.getName()); // Ford Mustang

这通常是我们期望结果的，因为在getName方法中我们返回this.name，在此上下文中，this指向的是carDetails对象，该对象当前是执行函数的“所有者”对象。  
接下我们做些奇怪的事情：

var name = "Ford Ranger";  
    var getCarName = carDetails.getName;  
      
    console.log(getCarName()); // Ford Ranger

上面打印Ford Ranger，这很奇怪，因为在第一个console.log语句中打印的是Ford Mustang。这样做的原因是getCarName方法有一个不同的“所有者”对象，即window对象。在全局作用域中使用var关键字声明变量会在window对象中附加与变量名称相同的属性。请记住，当没有使用“use strict”时，在全局作用域中this指的是window对象。

`console.log(getCarName === window.getCarName); // true console.log(getCarName === this.getCarName); // true`

本例中的this和window引用同一个对象。  
解决这个问题的一种方法是在函数中使用apply和call方法。

`console.log(getCarName.apply(carDetails)); // Ford Mustang console.log(getCarName.call(carDetails));  // Ford Mustang`

apply和call方法期望第一个参数是一个对象，该对象是函数内部this的值。  
IIFE或立即执行的函数表达式，在全局作用域内声明的函数，对象内部方法中的匿名函数和内部函数的this具有默认值，该值指向window对象。

(function (){  
     console.log(this);  
    })(); // 打印 "window" 对象  
      
    function iHateThis(){  
      console.log(this);  
    }  
      
    iHateThis(); // 打印 "window" 对象  
      
    const myFavoriteObj = {  
     guessThis(){  
        function getName(){  
          console.log(this.name);  
        }  
        getName();  
     },  
     name: 'Marko Polo',  
     thisIsAnnoying(callback){  
       callback();  
     }  
    };  
      
      
    myFavoriteObj.guessThis(); // 打印 "window" 对象  
    myFavoriteObj.thisIsAnnoying(function (){  
     console.log(this); // 打印 "window" 对象  
    });

如果我们要获取myFavoriteObj对象中的name属性（即Marko Polo）的值，则有两种方法可以解决此问题。  
一种是将 this 值保存在变量中。

const myFavoriteObj = {  
     guessThis(){  
      const self = this; // 把 this 值保存在 self 变量中  
      function getName(){  
        console.log(self.name);  
      }  
      getName();  
     },  
     name: 'Marko Polo',  
     thisIsAnnoying(callback){  
       callback();  
      }  
    };

第二种方式是使用箭头函数

const myFavoriteObj = {  
      guessThis(){  
         const getName = () => {   
           console.log(this.name);  
         }  
         getName();  
      },  
      name: 'Marko Polo',  
      thisIsAnnoying(callback){  
       callback();  
      }  
    };

箭头函数没有自己的 this。它复制了这个封闭的词法作用域中this值，在这个例子中，this值在getName内部函数之外，也就是myFavoriteObj对象。

# 25. 对象的 prototype(原型) 是什么？ #

简单地说，原型就是对象的蓝图。如果它存在当前对象中，则将其用作属性和方法的回退。它是在对象之间共享属性和功能的方法，这也是JavaScript实现继承的核心。

`const o = {}; console.log(o.toString()); // logs [object Object]`

即使o对象中不存在o.toString方法，它也不会引发错误，而是返回字符串\[object Object\]。当对象中不存在属性时，它将查看其原型，如果仍然不存在，则将其查找到原型的原型，依此类推，直到在原型链中找到具有相同属性的属性为止。原型链的末尾是Object.prototype。

`console.log(o.toString === Object.prototype.toString); // logs true`

# 26. 什么是 IIFE，它的用途是什么？ #

IIFE或立即调用的函数表达式是在创建或声明后将被调用或执行的函数。创建IIFE的语法是，将function ()\{\}包裹在在括号()内，然后再用另一个括号()调用它，如：(function()\{\})()

这些示例都是有效的IIFE。倒数第二个救命表明我们可以将参数传递给IIFE函数。最后一个示例表明，我们可以将IIFE的结果保存到变量中，以便稍后使用。

IIFE的一个主要作用是避免与全局作用域内的其他变量命名冲突或污染全局命名空间，来个例子。

假设我们引入了一个omelibr.js的链接，它提供了一些我们在代码中使用的全局函数，但是这个库有两个方法我们没有使用：createGraph和drawGraph，因为这些方法都有bug。我们想实现自己的createGraph和drawGraph方法。

解决此问题的一种方法是直接覆盖：

当我们使用这个解决方案时，我们覆盖了库提供给我们的那两个方法。  
另一种方式是我们自己改名称：

当我们使用这个解决方案时，我们把那些函数调用更改为新的函数名。  
还有一种方法就是使用IIFE：

在此解决方案中，我们要声明了graphUtility 变量，用来保存IIFE执行的结果，该函数返回一个包含两个方法createGraph和drawGraph的对象。

IIFE 还可以用来解决一个常见的面试题：

var li = document.querySelectorAll('.list-group > li');  
    for (var i = 0, len = li.length; i < len; i++) {  
       li[i].addEventListener('click', function (e) {  
          console.log(i);  
       })

假设我们有一个带有list-group类的ul元素，它有5个li子元素。当我们单击单个li元素时，打印对应的下标值。但在此外上述代码不起作用，这里每次点击 li 打印 i 的值都是5，这是由于闭包的原因。

闭包只是函数记住其当前作用域，父函数作用域和全局作用域的变量引用的能力。当我们在全局作用域内使用var关键字声明变量时，就创建全局变量i。因此，当我们单击li元素时，它将打印5，因为这是稍后在回调函数中引用它时i的值。

使用 IIFE 可以解决此问题：

var li = document.querySelectorAll('.list-group > li');   for (var i = 0, len = li.length; i < len; i++) {      (function (currentIndex) {         li[currentIndex].addEventListener('click', function (e) {            console.log(currentIndex);         })      })(i);   }

该解决方案之所以行的通，是因为IIFE会为每次迭代创建一个新的作用域，我们捕获i的值并将其传递给currentIndex参数，因此调用IIFE时，每次迭代的currentIndex值都是不同的。

# 27. Function.prototype.apply 方法的用途是什么？ #

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

const details = {  
      message: 'Hello World!'  
    };  
      
    function getMessage(){  
      return this.message;  
    }  
      
    getMessage.apply(details); // 'Hello World!'

call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

const person = {  
      name: "Marko Polo"  
    };  
      
    function greeting(greetingMessage) {  
      return `${greetingMessage} ${this.name}`;  
    }  
      
    greeting.apply(person, ['Hello']); // "Hello Marko Polo!"

# 28. Function.prototype.call 方法的用途是什么？ #

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

`const details = {
    message: 'Hello World!'
    };
    function getMessage(){
    return this.message;
    }
    getMessage.call(details); // 'Hello World!'

注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

const person = {  
      name: "Marko Polo"  
    };  
      
    function greeting(greetingMessage) {  
      return `${greetingMessage} ${this.name}`;  
    }  
      
    greeting.call(person, 'Hello'); // "Hello Marko Polo!"

# 29. Function.prototype.apply 和 Function.prototype.call 之间有什么区别？ #

apply()方法可以在使用一个指定的 this 值和一个参数数组（或类数组对象）的前提下调用某个函数或方法。call()方法类似于apply()，不同之处仅仅是call()接受的参数是参数列表。

const obj1 = {  
    result:0  
    };  
      
    const obj2 = {  
    result:0  
    };  
      
    function reduceAdd(){  
      let result = 0;  
      for(let i = 0, len = arguments.length; i < len; i++){  
        result += arguments[i];  
      }  
      this.result = result;  
    }  
      
    reduceAdd.apply(obj1, [1, 2, 3, 4, 5]); // 15  
    reduceAdd.call(obj2, 1, 2, 3, 4, 5); // 15

# 30. Function.prototype.bind 的用途是什么？ #

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

import React from 'react';  
    class MyComponent extends React.Component {  
       constructor(props){  
          super(props);   
          this.state = {  
             value : ""  
          }    
          this.handleChange = this.handleChange.bind(this);   
          // 将 “handleChange” 方法绑定到 “MyComponent” 组件  
       }  
      
       handleChange(e){  
         //do something amazing here  
       }  
      
       render(){  
        return (  
          <>  
            <input type={this.props.type}  
                    value={this.state.value}  
                 onChange={this.handleChange}                        
              />  
          </>  
        )  
       }  
    }

# 31. 什么是函数式编程? JavaScript 的哪些特性使其成为函数式语言的候选语言？ #

函数式编程（通常缩写为FP）是通过编写纯函数，避免共享状态、可变数据、副作用 来构建软件的过程。数式编程是声明式 的而不是命令式 的，应用程序的状态是通过纯函数流动的。与面向对象编程形成对比，面向对象中应用程序的状态通常与对象中的方法共享和共处。

函数式编程是一种编程范式 ，这意味着它是一种基于一些基本的定义原则（如上所列）思考软件构建的方式。当然，编程范示的其他示例也包括面向对象编程和过程编程。

函数式的代码往往比命令式或面向对象的代码更简洁，更可预测，更容易测试 - 但如果不熟悉它以及与之相关的常见模式，函数式的代码也可能看起来更密集杂乱，并且 相关文献对新人来说是不好理解的。  
JavaScript支持闭包和高阶函数是函数式编程语言的特点。

# 32. 什么是高阶函数？ #

高阶函数只是将函数作为参数或返回值的函数。

`function higherOrderFunction(param,callback){     return callback(param); }`

# 33. 为什么函数被称为一等公民？ #

在JavaScript中，函数不仅拥有一切传统函数的使用方式（声明和调用），而且可以做到像简单值一样赋值（var func = function()\{\}）、传参(function func(x,callback)\{callback();\})、返回(function()\{return function()\{\}\})，这样的函数也称之为第一级函数（First-class Function）。不仅如此，JavaScript中的函数还充当了类的构造函数的作用，同时又是一个Function类的实例(instance)。这样的多重身份让JavaScript的函数变得非常重要。

# 34. 手动实现 Array.prototype.map 方法 #

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

function map(arr, mapCallback) {  
      // 首先，检查传递的参数是否正确。  
      if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') {   
        return [];  
      } else {  
        let result = [];  
        // 每次调用此函数时，我们都会创建一个 result 数组  
        // 因为我们不想改变原始数组。  
        for (let i = 0, len = arr.length; i < len; i++) {  
          result.push(mapCallback(arr[i], i, arr));   
          // 将 mapCallback 返回的结果 push 到 result 数组中  
        }  
        return result;  
      }  
    }

# 35. 手动实现Array.prototype.filter方法 #

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

function filter(arr, filterCallback) {  
      // 首先，检查传递的参数是否正确。  
      if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function')   
      {  
        return [];  
      } else {  
        let result = [];  
         // 每次调用此函数时，我们都会创建一个 result 数组  
         // 因为我们不想改变原始数组。  
        for (let i = 0, len = arr.length; i < len; i++) {  
          // 检查 filterCallback 的返回值是否是真值  
          if (filterCallback(arr[i], i, arr)) {   
          // 如果条件为真，则将数组元素 push 到 result 中  
            result.push(arr[i]);  
          }  
        }  
        return result; // return the result array  
      }  
    }

# 最后 #

更多的面试知识点我这整理成了PDF，无偿分享给大家。

**篇幅有限，仅展示部分内容**

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![f5c18f4b2878302f1f53a8c393e7eb0d.png][]

### 如果你需要这份完整版的面试题+解析，[【点击我】][Link 1]免费获取。 ###

码字不易，动动手指点个赞，再走呗~~~

最后祝大家换工作都可以找到心仪的工作。

[064445b95b7006f6f88bf1692e5b071a.png]: /images/20221120/9b986e9f522d4fd887e5e4ba00d2b68f.png
[ac0b1c2376da47d727e0dc8a77e76478.png]: /images/20221120/9e9162969fa24276a56ca08dd0b6337d.png
[b871b45fb2e6d5442144c863cbcff965.png]: /images/20221120/8e5caacd5c1347d5b15024d8fc6e45a8.png
[f5c18f4b2878302f1f53a8c393e7eb0d.png]: /images/20221120/4a705f147712482aa543ebf0019000bf.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=ZEKfV3Ax