面试前端八股文十问十答第八期

面试前端八股文十问十答第八期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）call、apply、bind 实现

这三个函数都是 JavaScript 中用于调用函数的方法，它们的作用如下：

• call: 调用一个函数，其参数是一个对象和一系列参数列表。
• apply: 与 call 类似，但参数列表是一个数组。
• bind: 创建一个新的函数，其中指定的对象将是该函数的上下文，可以预先设置一些参数。

以下是这三个方法的简单实现：

// call 实现
Function.prototype.myCall = function(context, ...args) {
    context = context || window;
    const fn = Symbol();
    context[fn] = this;
    const result = context[fn](...args);
    delete context[fn];
    return result;
}

// apply 实现
Function.prototype.myApply = function(context, argsArray) {
    context = context || window;
    const fn = Symbol();
    context[fn] = this;
    const result = context[fn](...argsArray);
    delete context[fn];
    return result;
}

// bind 实现
Function.prototype.myBind = function(context, ...args) {
    const self = this;
    return function(...innerArgs) {
        return self.apply(context, args.concat(innerArgs));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2）new 实现

new 关键字用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。下面是一个简单的 new 的实现：

function myNew(constructor, ...args) {
    const obj = Object.create(constructor.prototype);
    const result = constructor.apply(obj, args);
    return result instanceof Object ? result : obj;
}
1
2
3
4
5

3）异步

在 JavaScript 中，异步编程是通过回调函数、Promise 和 async/await 来实现的。下面是这些异步编程方法的简要说明：

• 回调函数：通过在函数的参数中传递一个函数来处理异步操作的结果。
• Promise：Promise 是 JavaScript 异步编程的一种解决方案，它表示一个异步操作的最终完成或失败，并且其最终的值可能是一个未来的值。
• async/await：async 函数使函数返回一个 Promise 对象，而 await 关键字暂停异步函数的执行，等待 Promise 对象的解析。

这些是 JavaScript 中常用的异步编程方法，可以根据具体的需求选择最适合的方法。

4）浏览器的垃圾回收机制

浏览器的垃圾回收机制是为了管理内存的分配和释放，防止内存泄漏和提高内存利用率而设计的。主要有以下几种方式：

• 标记清除（Mark-and-Sweep）：这是最常见的垃圾回收算法之一。它通过标记对象，并且清除没有标记的对象来进行垃圾回收。垃圾收集器会从根对象开始，标记所有能够访问到的对象，然后清除掉未标记的对象。
• 引用计数（Reference Counting）：该算法会跟踪记录每个对象被引用的次数。当对象的引用次数为零时，垃圾收集器会立即释放对象的内存。这种方式容易导致循环引用的问题，因此在现代浏览器中很少使用。
• 清除算法（Sweeping）：该算法会检查堆中的所有对象，并且标记已经不再使用的对象，然后进行清除。这种方式简单，但可能会导致停顿时间过长。
• 分代回收（Generational Garbage Collection）：这是一种结合了多种回收算法的高效方式。它将内存分为不同的代，通常是新生代和老生代。对于新生代的对象，采用标记-复制算法，而对于老生代的对象，采用标记-清除算法。

5）实现一个 EventEmitter 类

EventEmitter 是 Node.js 中核心模块之一，用于处理事件的订阅与发布。以下是一个简单的 EventEmitter 类的实现：

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
    }

    emit(event, ...args) {
        const listeners = this.events[event];
        if (listeners) {
            listeners.forEach(listener => listener(...args));
        }
    }

    off(event, listener) {
        const listeners = this.events[event];
        if (listeners) {
            this.events[event] = listeners.filter(fn => fn !== listener);
        }
    }
}

// 示例用法
const emitter = new EventEmitter();

const callback1 = () => console.log('Callback 1 invoked');
const callback2 = () => console.log('Callback 2 invoked');

emitter.on('event', callback1);
emitter.on('event', callback2);

emitter.emit('event'); // 输出：Callback 1 invoked 和 Callback 2 invoked

emitter.off('event', callback1);

emitter.emit('event'); // 只输出：Callback 2 invoked
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

6）cookie

在Web开发中，cookie 是一种存储在客户端的小型文本文件，用于跟踪用户和存储用户相关的信息。它通常由服务器发送给客户端，并且客户端会在后续的请求中将 cookie 信息发送回服务器。

要在 JavaScript 中操作 cookie，可以使用 document.cookie 属性。以下是一些常见的操作：

• 设置 cookie：document.cookie = "name=value; expires=date; path=path; domain=domain; secure";
• 获取 cookie：const cookieValue = document.cookie;
• 删除 cookie：可以通过设置 cookie 的过期时间为过去的时间来删除 cookie。

需要注意的是，cookie 存在一些限制，例如每个域名下的 cookie 数量和大小都是有限制的，通常每个域名下的 cookie 总大小不能超过 4KB，单个 cookie 大小不能超过 4KB。因此，在使用 cookie 时需要注意遵守这些限制。

7）localStorage 和 sessionStorage

localStorage 和 sessionStorage 都是 HTML5 提供的客户端存储数据的方式，它们可以在客户端保存持久化数据，以便在会话间或页面刷新后仍然可用。它们之间的主要区别在于数据的生命周期和作用域：

• localStorage：存储在 localStorage 中的数据没有过期时间，除非被清除，否则会一直保存在客户端。它的作用域是整个源（origin），即协议、主机名和端口号都相同的页面可以共享同一个 localStorage。
• sessionStorage：存储在 sessionStorage 中的数据只在当前会话期间有效，关闭浏览器标签页或窗口后数据将被清除。与 localStorage 不同，sessionStorage 的作用域限于当前会话，即同一个页面打开的不同标签页之间不共享数据。

8）HTTP 状态码

HTTP 状态码是服务器对客户端请求的响应的一种方式，用于传达请求的处理结果。常见的 HTTP 状态码包括：

• 1xx（信息）：表示请求已被接收，继续处理。
• 2xx（成功）：表示请求已成功被服务器接收、理解、并接受处理。
• 3xx（重定向）：表示需要客户端采取进一步的操作才能完成请求。
• 4xx（客户端错误）：表示客户端发送的请求有错误，例如请求的资源不存在或者未授权访问。
• 5xx（服务器错误）：表示服务器在处理请求时发生了错误，例如服务器崩溃或者服务器内部错误。

常见的状态码包括 200（OK）、301（永久重定向）、404（未找到）、500（服务器内部错误）等。

9）HTTP 缓存

HTTP 缓存是指在客户端或服务器上存储先前获取的资源副本，并在后续请求时重用这些资源副本，以减少网络流量和加快页面加载速度。主要的 HTTP 缓存策略包括：

• 强制缓存：在客户端缓存有效期内，客户端不会向服务器发送请求，直接使用缓存的资源。
• 协商缓存：客户端发送请求到服务器，服务器会根据请求的条件（如缓存标识、修改时间等）来决定是否返回新的资源。

10）强制缓存

强制缓存是一种 HTTP 缓存策略，其主要目的是在客户端缓存有效期内，客户端不会向服务器发送请求，而是直接使用缓存的资源。常用的强制缓存策略包括：

• Expires 头：服务器返回的响应中包含一个 Expires 头，指定了资源的过期时间。客户端在过期时间之前都会直接使用缓存的资源。
• Cache-Control 头：Cache-Control 头是 HTTP/1.1 中定义的，通过 max-age 指令来设置缓存的最长时间。例如，Cache-Control: max-age=3600 表示资源将在 3600 秒后过期，客户端在此期间直接使用缓存。

强制缓存可以通过这些方式来实现，在有效期内客户端不会向服务器发送请求，从而加快了页面加载速度并减少了网络流量。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

Github & Gitee 前后端总计已经 1000+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐