常见面试题总结1

用户4601367184978
97 阅读4分钟

一些面试题分享，面试前准备了好久，面试时也常常很难把答案描述清楚，这篇文章我会记录一些常见的面试题，并且用简单的语言表述清楚答案

1、JS在new一个新对象时都经过了哪些操作？

1、创建一个新对象；
2、该对象执行](即__proto__)链接；
3、将构造函数的作用域赋值给新对象(this指向该新对象)；
4、执行构造函数中的代码(给该对象添加属性、方法)；
5、若无显式返回对象或函数，才返回新对象。

2、什么是闭包？有什么作用？适用场景是什么样的？

闭包是指有权访问另一个函数作用域中变量的函数 创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。
闭包的作用如下：
1.让外部访问函数内部变量变成可能
2.变量会常驻在内存中
3.可以避免使用全局变量,防止全局变量污染;
适用场景：
1、小范围代替全局变量 2、访问私有变量的特权方法

3、什么是Ajax

AJAX（Asynchronous JavaScript and XML）是一种用于网页开发的技术，它允许在不需要完全刷新页面的情况下更新网页的部分内容。它使用JavaScript和XML（现在通常使用JSON代替XML）的组合来异步地向服务器发送和接收数据，意味着可以在后台进行而不会中断用户与页面的交互。

这种技术提供了更流畅的用户体验，因为它允许动态更新内容而无需整个页面刷新。常见的 AJAX 应用包括自动完成搜索框、实时更新社交媒体信息流和在不刷新页面的情况下提交表单数据等。

AJAX 依赖于 JavaScript 中的 XMLHttpRequest 对象来发送 HTTP 请求并处理服务器的响应。它可以发送 GET 和 POST 请求，允许与服务器进行各种类型的交互。
下面是一个简单的 AJAX 示例，它演示了如何通过 AJAX 从服务器获取数据并动态更新网页内容：

<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>点击按钮获取数据</h2>
<button onclick="getData()">获取数据</button>

<div id="result"></div> 

<script>
function getData() {
    // 1、创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 2、配置请求
    xhr.open("GET", "example-api-url", true);

    // 3、监听请求的响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 当响应成功返回时，更新网页内容
            var response = xhr.responseText;
            document.getElementById("result").innerHTML = response;
        }
    };

    // 4、发送请求
    xhr.send();
}
</script>

</body>
</html>

4、axios的封装是如何实现的？

axios是专注于网络请求的库，在项目中使用 Axios，可以通过封装一个自定义的 HTTP 客户端来简化请求的调用和处理，以下是一个简单的例子，展示了如何封装 Axios：

import axios from 'axios';
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 封装 GET 请求
export function getData() {
  return apiClient.get('/data');
}

// 封装 POST 请求
export function postData(data) {
  return apiClient.post('/data', data);
}

// 其他需要封装的请求...

export default apiClient;

在这个例子中，我们通过 axios.create 方法创建了一个自定义的 Axios 实例 apiClient。我们可以在创建时指定一些默认配置，例如 baseURL（基本 URL 地址）和 headers（请求头），这样在每个请求中就不需要重复定义这些配置。
接下来，我们可以根据需要封装各种请求的方法，例如 getData 和 postData。在这些封装的方法中，我们使用 apiClient 实例来发送请求，并返回 Promise 对象以便在调用时使用 .then 和 .catch 处理响应和错误。
在使用的地方，只需要导入这些封装的方法，然后调用即可。

5、防抖和节流

防抖（多次触发，只执行最后一次）：当事件被触发后，延迟n秒之后再执行回调，如果在这n秒内事件又被触发，则重新计时。
应用场景：用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完成后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。

// 防抖
function debounce(func, delay) {
    let timer = null;
    return function () {
        // 如果时间再次触发就清除定时器
        clearTimeout(timer);
        timer = setTimeout(function () {
            func.apply(this, arguments);
        }, delay);
    }
}

节流（规定时间内，只触发一次）：减少一段时间内事件的触发频率。
应用场景：鼠标连续不断的触发某事件（如点击）只在单位时间触发一次。

// 节流
function throttle(func, delay) {
    let flag = true;  // 通过闭包保存一个节流阀
    return function () {
        if (!flag) return;  // 如果有定时器在执行，则直接返回
        flag = false;
        setTimeout(function () {
            fn.apply(this, arguments);
            flag = true;
        }, delay);
    }
}
avatar
文章
阅读
粉丝