2023前端面试题总结：JavaScript篇完整版_箭头函数的this指向

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

按位非（~）：
计算规则：对操作数的每个位执行逻辑 NOT 操作，即对每个位取反，1 变为 0，0 变为 1。
示例：~a 返回一个值，其中每个位都是 a 每个位取反的结果。
左移（<<）：
计算规则：将操作数的二进制位向左移动指定的位数，右侧用 0 填充。
示例：a << b 返回一个值，其中 a 的二进制位向左移动 b 位。
右移（>>）：
计算规则：将操作数的二进制位向右移动指定的位数，左侧用符号位的值填充。
示例：a >> b 返回一个值，其中 a 的二进制位向右移动 b 位。
无符号右移（>>>)：
计算规则：将操作数的二进制位向右移动指定的位数，左侧用 0 填充。
示例：a >>> b 返回一个值，其中 a 的二进制位向右移动 b 位，左侧用 0 填充。

解释性语言和编译型语言的区别是什么？

解释性语言和编译型语言是两种不同的编程语言类型，它们的主要区别在于代码的执行方式和编译过程：
解释性语言：

1. 执行方式：解释性语言的代码在运行时逐行被解释器翻译成机器代码，然后立即执行。代码是一边翻译一边执行，不需要先进行显式的编译过程。
2. 执行效率：由于每次运行都需要进行解释，解释性语言通常比较慢。解释性语言更注重开发速度和动态性，适用于一些快速原型开发和脚本编写场景。
3. 跨平台性：解释性语言的代码通常可以在不同平台上直接运行，不需要重新编译。
4. 例子：Python、JavaScript、Ruby、PHP是一些常见的解释性语言。

编译型语言：

1. 编译过程：编译型语言的代码需要在运行之前先通过编译器进行一次完整的编译，将源代码翻译成目标平台的机器代码。这个编译过程产生一个可执行文件，运行时不需要再次编译。
2. 执行效率：由于代码已经编译成机器代码，编译型语言的执行速度通常较快。适合开发需要高性能的应用程序。
3. 跨平台性：编译型语言的代码需要为每个不同的目标平台进行编译，因此需要重新编译适应不同的操作系统和硬件。
4. 例子：C、C++、Rust、Go是一些常见的编译型语言。

总结区别：

1. 解释性语言在运行时逐行解释并执行代码，执行速度较慢，适合开发快速原型和脚本。
2. 编译型语言在运行之前先编译成机器代码，执行速度较快，适合开发需要高性能的应用。
3. 解释性语言跨平台性较好，无需重新编译。
4. 编译型语言需要为每个平台重新编译，较难实现跨平台。

JavaScript高级知识

什么是原型，原型链？

JavaScript 中的原型（prototype）和原型链（prototype chain）是理解对象和继承机制的关键概念。
原型（prototype）：
每个 JavaScript 对象都有一个关联的原型对象，它是一个普通对象，包含一些共享的属性和方法。当你访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着对象的原型链去查找。对象可以通过 prototype 属性来访问它的原型对象。
原型链（prototype chain）：
原型链是由一系列连接的原型对象组成的链。当访问对象的属性或方法时，如果对象本身没有找到，引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（Object.prototype）。这样的搜索路径就构成了原型链。
例如：

class Person {
constructor(name, age) {
this.name = name
this.age = age
}
sayHello() {
console.log(‘hello’)
}
}

const person = new Person(‘John’, 20)

console.log(Person.prototype)
console.log(person.proto)

const person2 = Object.create(person)
console.log(person2.proto.proto)
person2.sayHello()

执行结果如下

这里的Person类就存在自己的原型prototype，prototype是一个对象，拥有Person的constructor和sayHello方法
使用Person创建出一个实例person此时person上并没有sayHello方法，但是person的__proto__指向Person的prototype，当在当前对象上找不到sayHello方法时，js就会沿着__proto__的指向向上寻找
后面我们用Object.create(person)方法创建一个对象person2，此时该对象是空对象，但是该对象的__proto__指向person，而person的__proto__又指向Person的prototype，因此person2也可以调用sayHello方法
这种沿着__proto__指向一致向上寻找，便形成一个原型链，需要注意的时原型链的最顶端都是null

**前端面试题库 （**面试必备）推荐：★★★★★

地址：前端面试题库

什么是闭包，有什么作用？

闭包是一种在函数内部创建的函数，它可以访问其包含函数（外部函数）的变量和参数，即使外部函数已经执行完毕。换句话说，闭包是一个函数加上该函数创建时所能访问的作用域，它可以"捕获"这个作用域中的变量，并在函数执行后继续保持对这些变量的访问能力。
闭包通常由以下两个主要部分组成：

1. 内部函数（嵌套函数）：在外部函数内部定义的函数，形成了闭包。
2. 外部函数的作用域：内部函数可以访问和"捕获"外部函数的作用域中的变量和参数。

闭包的作用：

1. 保护数据：通过闭包，可以将一些数据限制在函数的作用域内，避免全局污染，只暴露必要的接口。
2. 保存状态：闭包可以用于保存函数执行过程中的状态，例如计数器、缓存等，使得状态在函数调用之间得以保持。
3. 实现模块化：通过闭包，可以实现类似于模块的封装，将一组相关的功能组织在一起，避免命名冲突和变量泄露。
4. 实现回调和异步操作：JavaScript 中的回调函数和异步操作通常需要使用闭包来捕获外部函数的状态和数据。
5. 创建私有变量：通过闭包可以模拟私有变量，使得只有内部函数能够访问和修改某些数据。

以下是一个闭包的简单示例：

function outerFunction() {
let outerVariable = “I am from outer function”;

function innerFunction() {
console.log(outerVariable); // 内部函数访问了外部函数的变量
}

return innerFunction; // 返回内部函数作为闭包
}

let closure = outerFunction(); // 调用外部函数，返回内部函数
closure(); // 调用内部函数，输出 “I am from outer function”

在这个例子中，innerFunction 是一个闭包，它可以访问外部函数 outerFunction 中的变量 outerVariable。当我们调用外部函数并将其返回的内部函数赋值给 closure 变量后，closure 成为了一个保存了 outerVariable 的闭包，可以在之后的调用中继续访问这个变量。

JavaScript中的作用域是什么，有什么作用？

JavaScript 中的作用域（scope）是指变量和函数在代码中可访问的范围。作用域规定了在何处以及如何查找变量。作用域的概念在 JavaScript 中是非常重要的，因为它影响着变量的可见性和生命周期。
作用域的类型：

1. 全局作用域：在代码的最外层定义的变量和函数，可以在代码的任何位置被访问，称为全局作用域。
2. 局部作用域：在函数内部定义的变量和函数，只能在函数内部被访问，称为局部作用域（也称为函数作用域）。

作用域的作用：

1. 隔离变量：作用域可以将变量限制在特定的代码块或函数内部，防止变量之间发生命名冲突。
2. 封装和信息隐藏：通过使用函数作用域，可以将一些变量隐藏在函数内部，避免了外部代码直接访问和修改这些变量，实现了信息隐藏和封装。
3. 变量的生命周期：作用域也影响了变量的生命周期，变量在进入作用域时被创建，在离开作用域时被销毁。这有助于内存管理和垃圾回收。

// 全局作用域
let globalVariable = “I am global”;

function myFunction() {
// 局部作用域
let localVariable = “I am local”;
console.log(localVariable); // 可以访问局部变量
console.log(globalVariable); // 可以访问全局变量
}

console.log(globalVariable); // 可以在全局范围内访问
// console.log(localVariable); // 无法在全局范围内访问局部变量

在这个示例中，globalVariable 是一个全局变量，可以在代码的任何地方访问。localVariable 是在函数内部定义的局部变量，只能在函数内部访问。
作用域帮助我们组织代码、封装功能、限制变量的可见性，并且有助于避免命名冲突，使得代码更加模块化和可维护。

如何理解JavaScript中的执行上下文？

执行上下文（Execution Context）是 JavaScript 中一个重要的概念，它是代码在执行过程中的环境，包含了当前代码执行所需的所有信息，如变量、函数、作用域等。每当 JavaScript 代码运行时，都会创建一个新的执行上下文。理解执行上下文对于理解代码的执行流程和作用域非常关键。
执行上下文可以分为三种类型：

1. 全局执行上下文：整个脚本的最外层环境，在代码执行之前被创建。在浏览器中，全局执行上下文通常是 window 对象。
2. 函数执行上下文：每次调用函数时，都会创建一个新的函数执行上下文，用于管理函数内部的变量、参数和执行流程。
3. Eval 函数执行上下文：使用 eval 函数执行的代码会在一个特殊的执行上下文中运行。

执行上下文包含的重要信息：

1. 变量环境（Variable Environment）：包含了变量和函数声明，以及外部环境的引用。在函数执行上下文中，这部分称为函数的“作用域链”。
2. 词法环境（Lexical Environment）：类似于变量环境，但是在函数执行上下文中，它会随着函数嵌套的改变而变化，支持闭包。
3. this 值：指向当前执行上下文的上下文对象。
4. 外部引用：指向包含当前执行上下文的外部执行上下文。

执行上下文的生命周期：

1. 创建阶段：在进入代码块之前，执行上下文会被创建。这时会创建变量对象（VO），初始化函数参数、变量和函数声明。
2. 执行阶段：在进入代码块时，代码会按顺序执行。在这个阶段，变量赋值和函数调用等操作会被执行。
3. 销毁阶段：执行完代码后，执行上下文会被销毁，函数的局部变量等会被释放。

示例：

function greet(name) {
var message = "Hello, " + name;
console.log(message);
}

greet(“Alice”); // 调用函数，创建函数执行上下文

在这个示例中，当调用 greet(“Alice”) 时，会创建一个新的函数执行上下文用于执行 greet 函数内部的代码。这个执行上下文包含了 name 参数和 message 变量，以及其他所需的信息。一旦函数执行完毕，这个执行上下文将会被销毁。

什么是Ajax，如何实现一个简单的Ajax请求

Ajax