帮我出10个前端js面试题带答案

1. 什么是闭包？如何创建一个闭包？

答：闭包是指函数能够访问其外部作用域的变量，即使函数在外部作用域执行完成之后仍然可以访问这些变量。创建闭包需要在函数内部定义一个新的函数，并返回这个函数。

示例代码：

function outerFunction() { var outerVariable = "I am outside!";

function innerFunction() { console.log(outerVariable); }

return innerFunction; }

var closure = outerFunction(); closure(); // 输出 "I am outside!"

2. 如何避免 JavaScript 的异步回调地狱？

答：异步回调地狱是指嵌套多个异步回调函数造成代码可读性差、难以维护的情况。可以采用以下方法避免异步回调地狱：

• 使用 Promise 对象；
• 使用 async/await；
• 使用事件监听器；
• 使用发布/订阅模式。

3. 如何实现 JavaScript 的继承？

答：JavaScript 中的继承可以使用原型链和构造函数两种方式实现。

原型链继承：

function Parent() {} function Child() {} Child.prototype = new Parent();

构造函数继承：

function Parent() {} function Child() { Parent.call(this); }

4. 如何判断一个对象是否是数组？

答：可以使用 Array.isArray() 方法判断一个对象是否是数组。

示例代码：

var arr = [1, 2, 3]; console.log(Array.isArray(arr)); // 输出 true

5. 如何在 JavaScript 中实现深拷贝？

答：可以使用递归实现深拷贝，遍历需要拷贝的对象，对于每个属性都进行判断，如果是基本数据类型，则直接赋值，如果是对象，则递归进行拷贝。

示例代码：

function deepClone(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } var result = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { result[key] = deepClone(obj[key]); } } return result; }

6. 如何在 JavaScript 中实现模块化？

答：可以使用 CommonJS、AMD、ES6 模块化等方式实现 JavaScript 的模块化。其中，ES6 模块化已经成为了 JavaScript 的官方模块化方案，可以使用 import 和 export 关键字实现模块化。

示例代码：

// module1.js export function hello() { console.log('Hello!'); }

// module2.js import { hello } from './module1.js'; hello(); // 输出 "Hello!"

7. 如何在 JavaScript 中实现事件代理？

答：事件代理是指将事件绑定在父元素上，通过事件冒泡机制实现对子元素的事件监听。可以使用事件委托和事件委托的优化方式来实现事件代理。

示例代码：

// 使用事件委托 var parentElement = document.getElementById('parent'); parentElement.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log(event.target.innerHTML); } });

// 优化事件委托 var parentElement = document.getElementById('parent'); parentElement.addEventListener('click', function(event) { var target = event.target; while (target !== parentElement) { if (target.tagName === 'LI') { console.log(target.innerHTML); break; } target = target.parentNode; } });

8. 如何在 JavaScript 中实现函数节流？

答：函数节流是指将函数的执行频率降低，以避免频繁的函数调用造成浏览器的卡顿。可以使用 setTimeout 和时间戳两种方式实现函数节流。

示例代码：

// 使用 setTimeout function throttle(fn, delay) { var timer = null; return function() { var context = this; var args = arguments; if (!timer) { timer = setTimeout(function() { fn.apply(context, args); timer = null; }, delay); } } }

// 使用时间戳 function throttle(fn, delay) { var previous = 0; return function() { var context = this; var args = arguments; var now = Date.now(); if (now - previous > delay) { fn.apply(context, args); previous = now; } } }

9. 如何在 JavaScript 中实现函数柯里化？

答：函数柯里化是指将多个参数的函数转化为多个单参数函数的过程。可以使用闭包和递归实现函数柯里化。

示例代码：

// 使用闭包 function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } else { return function(...args2) { return curried.apply(this, args.concat(args2)); } } } }

// 使用递归 function curry(fn, ...args) { if (args.length >= fn.length) { return fn.apply(this, args); } else { return function(...args2) { return curry.apply(this, [fn, ...args, ...args2]); } } }

10. 如何在 JavaScript 中实现函数反柯里化？

答：函数反柯里化是指将柯里化后的函数转化为原始的多个参数的函数的过程。可以使用 apply 和 bind 方法实现函数反柯里化。

示例代码：

Function.prototype.uncurry = function() { var fn = this; return function(...args) { return Function.prototype.call.apply(fn, args); } }

// 使用 bind 方法 Function.prototype.uncurry = function() { var fn = this; return function(...args) { return Function.prototype.call.bind(fn)(...args); } }