JavaScript 前端核心面试题详解：从基础类型到原型链

前言

若将面试题按性质分类，主要可划分为“技术类”与“非技术类”两大板块。在技术类面试题中，通常进一步细分为多个子类别：

1. 移动端与 PC 端布局相关
2. JavaScript 核心基础相关
3. 衍生框架相关
4. 项目实际应用相关

根据面试中出现频率的统计，以下两类题目几乎是 100% 会被问到的：“移动端与 PC 端布局类”以及“JavaScript 核心基础类”。本次内容重点选取了这两大类中难度较高的“JavaScript 核心基础类”题目进行深度分析与解答，供求职者面试前复习参考。

特别说明：

如果在面试中遇到上述题型无法作答，必须正视自身知识体系的短板，并需心服口服地刻苦钻研，直至完全掌握。毕竟，要成为一名合格的“WEB 前端工程师”，必须扎实掌握以下 JavaScript 核心基础知识，否则只能被视为“冒牌”工程师。

JavaScript 基础类型与运算符

一、JavaScript 的 typeof 返回哪些数据类型？

分析：

此题旨在考察 JavaScript 的基本功。只要对 typeof 运算符有基本了解，解答难度不大。在回答时，建议结合理论知识与实际编码经验进行阐述。此外，为了体现面试的严谨性，回答中应包含 ES2015 新增的数据类型。

建议回复：

首先，JavaScript 中的数据主要分为两大类型：

1. 基础类型（原始类型）
2. 引用类型

· 基础类型包括：Number、String、Boolean、Null、Undefined、Symbol（Symbol 是 ES2015 中新增的类型）。

· 引用类型涵盖：Object。typeof 运算符以字符串形式返回类型信息，需注意其返回结果与 JavaScript 定义的类型存在细微差异。typeof 可能返回七种值：“number”、“string”、“boolean”、“object”、"symbol"、“function”及“undefined”。

typeof 运算符以字符串形式返回类型信息。需要注意的是，typeof 返回的类型与 JavaScript 定义的类型之间存在细微差异。typeof 可能返回七种值：“number”、“string”、“boolean”、“object”、“symbol”、“function”和“undefined”。

alert(typeof null);
alert(typeof undefined);
alert(typeof NaN);
alert(NaN == undefined);
alert(NaN == NaN);
var str = "123abc";
alert(typeof str++);
alert(str);

二、请写出以下代码运算结果：

分析：

建议回复：

本题主要考察 typeof 对值的类型判断，输出结果依次为：

alert(typeof null); // object
alert(typeof undefined); // undefined
alert(typeof NaN); // number
alert(NaN == undefined); // false
alert(NaN == NaN); // false
var str = "123abc";
alert(typeof str++); // number
alert(str); // NaN

三、例举至少 3 种强制类型转换和 2 种隐式类型转换?

分析：

类型转换的概念看似宽泛，但此题明确限定了回答范围。

建议回复：

1. 强制类型转换：明确调用内置函数，将一种类型的值强制转换为另一种类型。主要的强制类型转换方法包括：Boolean()、Number()、String()、parseInt()、parseFloat()。

2. 隐式类型转换：在使用算术运算符时，运算符两边的数据类型可以是任意的，例如字符串可以与数字相加。不同数据类型之所以能进行运算，是因为 JavaScript 引擎在运算前会自动执行隐式类型转换。主要的隐式类型转换场景包括：+、–、==、!。

事件流与 BOM 对象

四、JavaScript 的事件流模型都有什么？

建议回复：

事件流描述了从页面接收事件的顺序。DOM 结构呈树形，当页面中某个元素触发事件时，事件会从最顶层的 window 对象开始，向下传播至目标元素。在此过程中，途经的所有祖先节点若绑定了相应事件处理函数，则会依次执行。当事件到达目标元素并执行其绑定函数（若有）后，事件会向上传播回 window 元素，同样会触发途经祖先节点的事件处理函数（若已绑定）。

事件流包含三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

事件捕获阶段：事件由顶层对象触发，逐级向下传播，直至目标元素；

处于目标阶段：事件发生在绑定事件的元素上；

事件冒泡阶段：事件由具体元素先接收，然后逐级向上传播，直至不具体的元素（window）。

五、BOM 对象有哪些，列举 window 对象？

建议回复：

1. window 对象是 JavaScript 的最顶层对象，其他 BOM 对象均为 window 对象的属性；
2. document 对象，即文档对象；
3. location 对象，包含浏览器当前 URL 信息；
4. navigator 对象，包含浏览器本身的信息；
5. screen 对象，包含客户端屏幕信息；
6. history 对象，包含浏览器访问的历史信息；

AJAX 原理与 HTTP 状态码

六、请简述 AJAX 及基本步骤？

分析：

对于此类纯概念题，建议在面试前重新手写一遍原生 AJAX 函数的封装过程。务必在理解的基础上进行记忆，以便在面试中能有良好的发挥。

建议回复：

简述 AJAX：AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是一种创建交互式网页应用的开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以实现网页的异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX 基本步骤：

1. 初始化 ajax 对象
2. 连接地址，准备数据
3. 发送请求
4. 接收数据（正在接收，尚未完成）
5. 接收数据完成

//初始化ajax对象
var xhr = xhr = new XMLHttpRequest();
//连接地址，准备数据
xhr.open(“方式”,”地址”,是否为异步);
//接收数据完成触发的事件
xhr.onload =function(){}
//发送数据
xhr.send();

七、HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

分析：

“带着理解去记忆”是应对概念题的最佳策略，此外多查看延展知识点也大有裨益。

建议回复：

• 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
• 302：请求的资源临时从不同的 URI 响应请求。由于这种重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。
• 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
• 403：服务器已经理解请求，但是拒绝执行它。
• 404：请求失败，请求所希望得到的资源未被在服务器上发现。
• 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

同步异步与 GET/POST 请求

八、同步和异步的区别?

分析：

这又是一道概念题。

建议回复：

• 首先，同步与异步和阻塞、非阻塞并没有直接关系。同步与异步主要关注事情完成后如何处理，或者说关注的是一种消息通信机制。
• 在同步情况下，是由处理消息者自己去等待消息是否被触发；
• 而在异步情况下，是由触发机制来通知处理消息者；

举例：比如在上课时，你问老师一个问题，这个问题可能需要花费一点时间去思考，这个时候老师可能：

• 思考，思考……，好了，有答案了；
• 这个问题需要一点时间，你先做点别的，等我想好了，去找你。

第一种情况就是同步，第二种情况就是异步。因此，同步与异步是从被请求方的角度来看的，即被请求者使用什么方式来告知处理结果。

• 阻塞与非阻塞，主要是对于请求者而言的。
• 阻塞：发出请求后等待结果返回，然后再处理后续的事情；
• 非阻塞：发出请求后不等待结果返回，可以接着做后续的事情；

举例，还是上一个例子：

• 老师在使用同步思考的时候，你可以静静等待老师给出答案，也可以边做自己的事情边等待老师的回答，当然这时候你需要时刻去关注老师是否已经想好了，在程序中需要进行轮询了。
• 老师使用异步的方式，这个时候老师告诉你可以先去做别的，好了就通知你，那么你可以去做点别的，然后监听事件就行，当然你也可以很轴，我就不做别的！我要一直等着老师“想好了”的事件发生。
• 因此，同步可以是阻塞的也可以是非阻塞的，异步也是如此。

九、GET和POST的区别，何时使用POST？

分析：

数据交互类的概念题在面试中被问到的概率极高，这也反映了其在实际工作中的实用价值。因此，没有其他捷径，只有好好学习，好好背诵！

建议回复：

GET和POST的区别：

GET：一般用于查询数据，使用 URL 传递参数。由于浏览器对地址栏长度有限制，因此对使用 get 方式所发送信息的数量有限制。同时，浏览器会记录（历史记录、缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制。浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL 编码格式、二进制格式的字符串，形式多样。

在以下情况中，请使用 POST 请求：

1. 以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
2. 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
3. 向服务器发送大量数据（数据大小限制区别）；
4. 上传文件图片时（数据类型区别）；

十、 AJAX 的局限性?

建议回复：

1. AJAX 不支持浏览器 back 按钮。
2. 安全问题：AJAX 暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。搜索引擎不会执行你的 JS 脚本，只会操作你的网页源代码；
4. 跨域请求有一定限制。解决方式：jsonp；

对象创建与数据类型处理

十一、new 操作符具体干了什么呢?

分析：

原理概念题。

建议回复：

当使用 new 操作符调用构造函数时，函数实际会经历如下步骤：

1. 创建一个新对象；
2. 把函数中上下文（作用域）对象 this 指向该对象；
3. 执行代码，通过 this 给新对象添加属性或方法；
4. 返回对象；

十二、null 和 undefined 的区别？

分析：

经典的概念题。

建议回复：

null：null 表示空值，转为数值时为 0；

undefined：undefined 表示“缺少值”，即此处应该有一个值，但是还没有定义。

1. 变量被声明了，但没有赋值时，就等于 undefined。
2. 对象没有赋值的属性，该属性的值为 undefined。
3. 函数没有返回值时，默认返回 undefined。

十三、JavaScript 原型，原型链 ? 有什么特点？

建议回复：

JavaScript 原型：每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。这个对象的作用在于当使用函数创建实例的时候，这些实例都会共享原型上的属性和方法。

原型链：在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（[[Prototype]]）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止；如果查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

十四、实现对数组进行乱序

分析：

这道题检验了数组的 sort() 方法。因为是乱序，所以还需要用到 Math.random() 产生随机数，以打乱排序规律。

建议回复：

在写代码前，先把实现原理介绍一下，然后再开始写代码：

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sign = 1; 
a.sort(function(a, b) {
 return Math.random() - 0.5
});

十五、实现一个函数 clone()，可以对 JavaScript 中的5种主要的数据类型（包括 Number、String、Object、Array、Boolean）进行值复制。

分析：

这道题考察了以下知识点：

1. 使用 typeof 判断值得类型；
2. 使用 toString 区分数组和对象；
3. 递归函数的使用；

建议回复：

function clone(obj) {
 //判断是对象，就进行循环复制
 if (typeof obj === 'object' && typeof obj !== 'null') {
  // 区分是数组还是对象，创建空的数组或对象
  var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
  for (var k in obj) {
   // 如果属性对应的值为对象，则递归复制
   if(typeof obj === 'object' && typeof obj !== 'null'){
    o[k] = clone(obj[k])
   }else{
    o[k] = obj[k];
   }
  }
 }else{ //不为对象，直接把值返回
  return obj;
 }
 return o;
}

总结

以上就是给大家总结关于 Javascript 前端面试题的全部内容了，后续看到再继续补充，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，请大家继续关注本站。