前端面试题手册

闭包（closure）的核心是能够捕获并包含自己创建时所在作用域中的变量，并在这个函数在其原始作用域之外被调用时仍然可以访问那些变量。闭包是函数和声明该函数时的词法环境的组合。在编程中，闭包常常用于以下几种场合：数据封装：闭包可以用来模拟私有变量，因为它的内部状态对外部代码是不可见的，只能通过闭包暴露的方法来访问。示例：function createCounter() { let count = 0; // `count` 是一个闭包中的私有变量 return { increment: function() { count++; }, getValue: function() { return count; } };}const counter = createCounter();counter.increment();console.log(counter.getValue()); // 输出 1在这个例子中，createCounter 返回了一个拥有两个方法的对象，而这两个方法都有权访问私有变量 count。count 变量是无法从外部直接访问的，只能通过闭包提供的 increment 和 getValue 方法来操作。回调函数和异步执行：闭包常用于回调函数，尤其是在异步操作中，它能够记住并访问其创建时的环境，即使在主执行流程已经完成之后。示例：function asyncGreeting(name) { setTimeout(function() { // 这个匿名函数就是一个闭包 console.log('Hello, ' + name); }, 1000);}asyncGreeting('World'); // 1秒后输出 "Hello, World"setTimeout 的回调是一个闭包，它记住了变量 name，即使 asyncGreeting 函数已经执行完毕。模块化代码：通过闭包，可以创建模块，这些模块拥有公开的方法和私有的数据，这是一种设计模式（即模块模式），可用于组织和管理 JavaScript 代码。在这些场景中，闭包的核心特性是记忆作用域中的变量，这使得函数在定义它的那个作用域之外执行时依然可以访问那些变量。这对于JavaScript等语言来说是一个极为强大的特性，因为它可以创造出在其他编程范式中难以实现的某些功能。

setTimeout 和 setInterval 都是 JavaScript 中用于控制时间和执行定时任务的函数，但它们的工作方式和用途有所不同。setTimeoutsetTimeout 函数用于设置一个定时器，该定时器将在指定的毫秒数后执行一次您指定的函数或代码块。一旦定时器完成任务（即执行了指定的函数或代码），它就会停止。用法示例:function sayHello() { console.log('Hello!');}// 调用 sayHello 函数，但是会在 2000 毫秒（2 秒）后执行setTimeout(sayHello, 2000);在这个例子中，sayHello 函数会在约 2 秒后执行一次，然后 setTimeout 就完成了它的任务。setInterval与 setTimeout 不同，setInterval 函数用于设置一个定时器，该定时器会无限次地以指定的时间间隔重复执行您指定的函数或代码块，除非您明确停止它。用法示例:function sayHelloRepeatedly() { console.log('Hello again!');}// 每隔 2000 毫秒（2 秒），调用一次 sayHelloRepeatedly 函数const intervalId = setInterval(sayHelloRepeatedly, 2000);// 当你想停止定时器时，可以调用 clearInterval// clearInterval(intervalId);在这个例子中，sayHelloRepeatedly 函数会每隔 2 秒执行一次，这将一直持续下去，直到调用 clearInterval(intervalId) 才会停止这个定时器。总结差异setTimeout 是执行一次延迟操作的函数。setInterval 是重复执行操作的函数，直到清除定时器。setTimeout 定时器执行完毕后自动清除。setInterval 定时器会持续运行，直到你调用 clearInterval。实际应用中，选择哪一个函数取决于你的具体需求：如果你需要延迟执行一次操作，使用 setTimeout；如果你需要以固定的时间间隔重复执行操作，使用 setInterval。

JavaScript 中判断一个对象是否为空对象，通常可以通过检查对象是否有自身的属性。最常见的方法是使用 Object.keys() 函数，它会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组。如果这个数组的长度为0，那么可以认定该对象为一个空对象。以下是一个函数示例，它可以用来判断一个对象是否为空：function isEmptyObject(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object;}这个函数首先检查 Object.keys(obj) 返回的数组长度是否为0，确保没有枚举的自身属性。然后，通过 obj.constructor === Object 确保 obj 是由 Object 构造函数创建的，避免错误地将具有自身属性但不是普通对象的实例（比如 new Date()）判断为“空对象”。我们可以用以下例子来测试这个函数：// 空对象let obj1 = {};// 非空对象let obj2 = { prop: 'value' };// 空对象的另一种形式（通过 Object.create(null) 创建）let obj3 = Object.create(null);console.log(isEmptyObject(obj1)); // trueconsole.log(isEmptyObject(obj2)); // falseconsole.log(isEmptyObject(obj3)); // true, 但请注意这种对象没有原型链在这些例子中，obj1 是一个标准的空对象，所以 isEmptyObject(obj1) 返回 true。obj2 有一个自身属性 prop，所以 isEmptyObject(obj2) 返回 false。obj3 虽然是一个空对象，但它通过 Object.create(null) 创建，这意味着它没有原型链，而 isEmptyObject(obj3) 也返回 true。需要注意的是，这个函数不能检测那些没有可枚举属性但实际上不是空的对象，比如：let obj4 = Object.create(Object.prototype, { prop: { value: 'value', enumerable: false }});console.log(isEmptyObject(obj4)); // true，但实际上 obj4 有一个不可枚举的属性 prop在这种情况下，prop 属性是不可枚举的，因此 Object.keys(obj4) 不会包含 prop，导致 isEmptyObject(obj4) 错误地返回 true。如果需要考虑不可枚举的属性，可以使用 Object.getOwnPropertyNames() 替换 Object.keys()，它会返回所有自身属性的数组，无论它们是否可枚举。

Ajax (Asynchronous JavaScript and XML)、Axios 和 Fetch API 是前端开发中用于与服务器进行异步通信的不同技术。下面，我将详细介绍它们之间的主要区别：Ajax概念: Ajax 并不是一种独立的技术，而是一系列技术的集合，包括 HTML、CSS、JavaScript、DOM、XMLHttpRequest 等。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。XMLHttpRequest 对象: Ajax 通常依赖于 XMLHttpRequest 对象来进行通信。这是一个老旧的 API，可以用来执行异步请求。例子: var xhr = new XMLHttpRequest();xhr.open('GET', 'server.php', true);xhr.send();xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); }};兼容性: XMLHttpRequest 在老版本的浏览器中有很好的兼容性。缺点: 编写代码较繁琐，不支持 Promise，错误处理和编写异步代码可能比较复杂。Axios概念: Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个易于使用的 API，可以在客户端执行异步请求。特点: 支持 Promise，可以很容易地使用 .then() 和 .catch() 方法进行链式调用。Axios 还提供了请求取消、HTTP 自动转换 JSON 数据、客户端支持防御 XSRF 等功能。例子: axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });兼容性: Axios 可以用在浏览器和 node.js 中，并且基本上支持所有现代浏览器。缺点: 相对于 Fetch API，Axios 是一个额外的库，需要单独安装和配置。Fetch API概念: Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如发起请求。它提供了一个全局 fetch() 方法，具有比 XMLHttpRequest 更加简洁和强大的功能。特点: Fetch API 基于 Promise 设计，使得异步请求代码更加简洁。它不是以形式参数的形式，而是以配置对象的形式接收请求信息，使得请求更加灵活。例子: fetch('https://api.example.com/data', { method: 'GET', headers: { 'Content-Type': 'application/json' }}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));兼容性: Fetch API 在现代浏览器中得到了良好的支持，但在一些老旧浏览器中可能不可用。缺点: Fetch API 默认不发送或接收 cookies，如果站点依赖于用户会话，则需要额外的配置。此外，即使请求失败，fetch 也不会拒绝 Promise，只有在网络故障时才会被拒绝。总结来说，Ajax、Axios 和 Fetch API 提供了实现前端 HTTP 通信的不同方法。Ajax 是最传统的方式，依赖于 XMLHttpRequest。Axios 是一个现代的库，提供了丰富的 API 和易于使用的 Promise 支持。

在JavaScript中，继承是一个用来使一个类（子类）能够获取另一个类（父类）的属性和方法的机制。以下是在JavaScript中实现继承的几种方法：1. 原型链继承原型链继承是将子类的原型对象设置为父类的一个实例，从而实现继承。function Parent() { this.parentProperty = true;}Parent.prototype.getParentProperty = function() { return this.parentProperty;};function Child() { this.childProperty = false;}// 继承ParentChild.prototype = new Parent();var child = new Child();console.log(child.getParentProperty()); // true2. 构造函数继承构造函数继承通过在子类的构造函数中调用父类构造函数实现继承，并使用 .call()或 .apply()方法将子类的 this绑定到父类上。function Parent(name) { this.name = name;}function Child(name) { Parent.call(this, name);}var child = new Child('Alice');console.log(child.name); // Alice3. 组合继承（原型链 + 构造函数继承）组合继承结合了原型链继承和构造函数继承的优点，即子类的原型被设置为父类的一个实例，并且父类构造函数被用来增强子类实例。function Parent(name) { this.name = name; this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function() { console.log(this.name);};function Child(name, age) { Parent.call(this, name); this.age = age;}Child.prototype = new Parent();Child.prototype.constructor = Child;Child.prototype.sayAge = function() { console.log(this.age);};var child1 = new Child('Alice', 10);child1.colors.push('yellow');console.log(child1.name); // Aliceconsole.log(child1.age); // 10console.log(child1.colors); // ['red', 'blue', 'green', 'yellow']4. 原型式继承原型式继承是基于已有的对象创建新对象，使用 Object.create方法实现。var parent = { name: "Bob", getName: function() { return this.name; }};var child = Object.create(parent);child.name = "Alice";console.log(child.getName()); // Alice5. 寄生式继承寄生式继承创建一个封装继承过程的函数，这个函数在内部以某种方式增强对象然后返回。function createAnother(original) { var clone = Object.create(original); clone.sayHi = function() { console.log('Hi'); }; return clone;}var person = { name: 'Bob', getName: function() { return this.name; }};var anotherPerson = createAnother(person);anotherPerson.sayHi(); // Hi6. 寄生组合式继承寄生组合式继承通过使用寄生式继承来继承父类的原型，并将结果指定给子类的原型。function inheritPrototype(childObj, parentObj) { var prototype = Object.create(parentObj.prototype); prototype.constructor = childObj; childObj.prototype = prototype;}function Parent(name) { this.name = name;}Parent.prototype.sayName = function() { console.log(this.name);};function Child(name, age) { Parent.call(this, name); this.age = age;}inheritPrototype(Child, Parent);Child.prototype.sayAge = function() { console.log(this.age);};var child = new Child('Alice', 10);child.sayName(); // Alicechild.sayAge(); // 10

JavaScript 中的 number 类型是基于 IEEE 754 标准的双精度64位浮点数表示。这种表示方式导致了两类主要的精度问题：有限的位数： 64位中，有1位用于符号，11位用于表示指数，剩下的52位用于表示尾数（或分数）。这限制了可以精确表示的数字的范围和精度。当数字超出这个精确范围时，就会出现舍入误差。二进制浮点数的局限性： 并非所有的十进制小数都能被二进制系统精确地表示。例如，十进制的0.1在二进制中是一个无限循环的分数，就像十进制中的1/3不能精确表示一样。在二进制浮点数中，这样的十进制数会被近似为一个有限位数的二进制数，因此会有精度损失。例子：在 JavaScript 中计算 0.1 加 0.2 时，预期结果是 0.3，但实际结果往往是 0.30000000000000004，这展示了精度损失的问题。为了避免这种精度损失，可以使用以下策略：整数运算： 将浮点数转换为整数，进行运算后再转换回去。这适用于简单的加减乘除运算。 // 例子：使用整数运算来避免精度损失 let result = (0.1 * 10 + 0.2 * 10) / 10; // 结果为0.3使用第三方库： 为了处理更复杂的数学运算和避免精度损失，可以使用如 BigNumber.js 或 decimal.js 等第三方库，这些库提供了更为精确的数值计算能力。 // 使用 BigNumber.js 示例 BigNumber.config({ DECIMAL_PLACES: 10 }) let a = new BigNumber(0.1); let b = new BigNumber(0.2); let result = a.plus(b); // '0.3'内置 BigInt 类型： 对于整数运算，ES2020 引入了 BigInt 类型，它支持任意精度的整数。使用 BigInt 可以避免大整数计算中的精度损失，但它不适用于浮点数。 // 例子：使用 BigInt 进行大整数计算 let bigInt1 = BigInt("9007199254740993"); let bigInt2 = BigInt("1"); let result = bigInt1 + bigInt2; // 9007199254740994n总而言之，为了解决 JavaScript 中的 number 类型的精度问题，开发者需要根据实际情况选取适合的方法来保证数值的精确度。对于常规的小数点精度问题，转换为整数运算通常是最简单的解决办法；对于更复杂的场景，则可能需要使用第三方库或者 BigInt 类型。

在JavaScript中改变 this指向的常见方式主要有以下几种：使用函数的 .bind()方法.bind()方法会创建一个新的函数，你可以传入一个对象来指定原函数中的 this。新函数的 this将被永久绑定到 .bind()的第一个参数上。 function greeting() { return `Hello, I'm ${this.name}`; } const person = { name: 'Alice' }; const boundGreeting = greeting.bind(person); console.log(boundGreeting()); // "Hello, I'm Alice"使用函数的 .call()和 .apply()方法.call()和 .apply()方法都是在特定的 this上调用函数，即可以直接指定 this的值。两者的区别在于如何传递函数的参数：.call()方法接受参数列表，而 .apply()方法接受一个包含多个参数的数组。 function introduction(name, profession) { console.log(`My name is ${name} and I am a ${profession}.`); } introduction.call(person, 'Alice', 'Engineer'); // "My name is Alice and I am a Engineer." introduction.apply(person, ['Alice', 'Engineer']); // "My name is Alice and I am a Engineer."箭头函数箭头函数不会创建自己的 this上下文，因此它的 this值继承自上一层作用域链。这是编写回调函数或闭包时常见的使用场景。 function Team(name) { this.name = name; this.members = []; } Team.prototype.addMember = function(name) { this.members.push(name); setTimeout(() => { console.log(`${name} has been added to the ${this.name} team.`); }, 1000); }; const team = new Team('Super Squad'); team.addMember('Hero'); // "Hero has been added to the Super Squad team." after 1 second在这个例子中，setTimeout中的箭头函数继承了 addMember方法的 this上下文。在回调函数中使用局部变量保存 this在 ES6 之前，由于函数的 this值在运行时确定，一个常见的模式是在闭包中用变量（通常是 self或 that）保存对外层 this的引用。 function Team(name) { this.name = name; this.members = []; var that = this; this.addMember = function(name) { that.members.push(name); setTimeout(function() { console.log(name + ' has been added to ' + that.name + ' team.'); }, 1000); }; } var team = new Team('Super Squad'); team.addMember('Hero'); // "Hero has been added to Super Squad team." after 1 second使用库或框架提供的功能一些JavaScript库和框架提供了自己的方法来绑定或者定义 this的上下文，比如在React组件的事件处理中，你可能会使用类似 .bind()的方法。在类中使用箭头函数定义方法在ES6类中，你可以使用箭头函数定义类的方法，这样就能确保方法内部的 this绑定到类的实例。 class Button { constructor(label) { this.label = label; } handleClick = () => { console.log(`Clicked on: ${this.label}`); } } const button = new Button('Save'); const btnElement = document.createElement('button'); btnElement.textContent = button.label; btnElement.addEventListener('click', button.handleClick); // 点击按钮时，会正确打印 "Clicked on: Save"以上就是JavaScript中改变 this指向的主要方式。

Base64是一种基于64个可打印字符来表示二进制数据的编码方法。这种编码方式设计用来确保二进制数据在编码过程中能够通过不同的媒介，特别是那些只支持ASCII文本的媒介，不会因为字符解读错误而破坏。Base64编码方式的作用包括：数据编码：将二进制数据转换成ASCII字符串，这样数据就可以在文本环境下安全传输，比如通过电子邮件或者XML文件。提升兼容性：某些系统不支持所有的二进制数据或特殊字符，Base64编码后的数据可以在这些系统中无障碍传输。打印友好：Base64编码后的字符串包含的是可打印字符，方便打印和查看。Base64编码规则非常简单，基本过程如下：将原始二进制数据的每个字节分成6位一组，如果最后一组不足6位，则用0填充。对照Base64索引表将这些6位的组合转换成相应的字符。Base64索引表包含了大小写英文字母各26个，加上10个数字和+、/两个符号，共64个字符。如果编码后的字符数不是4的倍数，则用=字符填充，以确保最终的输出字符数是4的倍数。举个例子，如果我们要编码单词"Man"为Base64：原始ASCII码是"M"=77, "a"=97, "n"=110二进制表示为：01001101 01100001 01101110划分成6位一组：010011 010110 000101 101110对照Base64索引表转换：T W F u因此，"Man"这个单词用Base64编码后是"TWFu"。

setTimeout 的缺点setTimeout 函数是 Web API 的一部分，它可以在指定的毫秒数后执行一个函数或指定的代码。然而，setTimeout 有几个缺点：不精确的时间控制:setTimeout 并不能保证在指定时间后立即执行，因为它受到 JavaScript 事件循环的影响。如果事件队列中有其他任务，setTimeout 的回调可能会延迟执行。性能问题:使用 setTimeout 进行重复的或高频的任务（例如动画）可能会导致性能问题。因为它不会考虑浏览器的绘制帧。这可能会导致动画不流畅或者页面重绘。多个定时器的管理:如果页面上有多个 setTimeout 定时器，管理和清除这些定时器可能会变得复杂。资源消耗:即使浏览器窗口或页面不在前台时，setTimeout 也会继续执行，这可能会导致不必要的 CPU 和电力消耗。setTimeout 与 requestAnimationFrame 的区别setTimeout 和 requestAnimationFrame（简称 rAF）都可以用于延迟执行代码，但它们的用途和行为有显著的区别：目的:setTimeout 用于在设定的时间后执行一次回调函数。requestAnimationFrame 主要用于动画，它告诉浏览器在下次重绘之前执行一个函数，以便动画可以平滑地按照屏幕的刷新率运行。执行时机:setTimeout 的回调执行时间不一定与浏览器的绘制帧同步。requestAnimationFrame 的回调会在浏览器绘制下一帧之前执行，这通常意味着回调以 60 次/秒的频率执行（或者与显示器的刷新率相匹配）。性能:setTimeout 可能会导致掉帧，因为它不考虑浏览器的帧率。requestAnimationFrame 会与浏览器的帧率同步，减少掉帧的情况，因此动画更平滑，性能也更优。节能:setTimeout 在后台标签页或隐藏的 iframe 中仍然会运行，可能导致不必要的资源消耗。requestAnimationFrame 在页面不可见时会自动暂停，从而节省资源。使用场景:setTimeout 适用于不需要与帧率同步的一次性或非频繁的延迟任务。requestAnimationFrame 适用于需要高性能动画的场景，例如游戏或界面动效。

let 关键字在JavaScript中被引入是为了提供块作用域（block scope）的功能。块作用域意味着由 let 声明的变量仅在声明它们的代码块内部是可见的。代码块是被花括号 {} 包围的一段代码，例如在 if 语句、for 和 while 循环以及函数定义中都会用到代码块。在ES6之前，JavaScript主要依赖的是函数作用域（function scope），由 var 关键字声明的变量要么是全局的，要么是在函数内部局部的。这种设计有时会导致意料之外的问题，特别是在循环中。下面是一个使用 let 的例子来说明块作用域是如何工作的：function runLoop() { for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100 * i); }}runLoop();在这个例子中，变量 i 是用 let 在 for 循环的块中声明的。这意味着每次循环迭代时，变量 i 都是一个新的变量，并且它被限制在这个循环的块作用域中。所以当 setTimeout 的回调函数执行时，它能够访问到循环迭代时对应的 i 的值。如果我们用 var 替换掉 let，结果将会不同：function runLoop() { for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100 * i); }}runLoop();在这个例子中，由于 var 声明的变量 i 是函数作用域的，当 setTimeout 的回调函数执行时，它会打印出循环结束后变量 i 的最终值，即5，会打印五次5，而不是0到4。总结来说，let 关键字允许开发者在更细粒度的级别控制变量的作用域。这样做提高了代码的可读性和可维护性，并且减少了由于作用域导致的常见错误。