[JavaScript知识库] JavaScript最全面试题

闭包的作用

闭包最大的作用就是隐藏变量，闭包的一大特性就是内部函数总是可以访问其所在的外部函数

中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后

基于此特性， JavaScript 可以实现私有变量、特权变量、储存变量等

我们就以私有变量举例，私有变量的实现方法很多，有靠约定的（变量名前加 _ ） , 有靠 Proxy

代理的，也有靠 Symbol 这种新数据类型的。

闭包的优点

可以隔离作用域，不造成全局污染

闭包的缺点

由于闭包长期驻留内存，则长期这样会导致内存泄露

如何解决内存泄露：将暴露全外部的闭包变量置为 null

适用场景

封装组件， for 循环和定时器结合使用 ,for 循环和 dom 事件结合 . 可以在性能优化的过程

中 , 节流防抖函数的使用 , 导航栏获取下标的使用

2.谈谈你对原型链的理解？

原型对象

绝大部分的函数(少数内建函数除外)都有一个 prototype属性,这个属性是原型对象用来创建新对象实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性

原型链

原因是每个对象都有?__proto__?属性，此属性指向该对象的构造函数的原型

3.说一下JS继承（含ES6的）

JS 继承实现方式也很多，主要分 ES5 和 ES6 继承的实现

先说一下 ES5 是如何实现继承的

ES5 实现继承主要是基于 prototype 来实现的，具体有三种方法

一是 原型链继承 ：即 B.prototype=new A()

二是借 用构造函数继承 (call 或者 apply 的方式继承 )

三 是组合继承

4.说一下JS原生事件如何绑定

JS 原生绑定事件主要为三种：

一是 html 事件处理程序

二是 DOM0 级事件处理程序

三是 DOM2 级事件处理程序

html 事件现在早已不用了，就是在 html 各种标签上直接添加事件，类似于 css 的行内样

式，缺点是不好维护，因为散落在标签中 , 也就是耦合度太高

5.说一下JS原生常用dom操作方法？

查找：

getElementByid,

getElementsByTagName,

querySelector,

querySelectorAll

插入：

appendChild,insertBefore

删除：

removeChild

克隆：

cloneNode

设置和获取属性：

setAttribute(“ 属性名 ”,” 值 ”)

getAttibute(“ 属性名 ”)

6.说一下ES6新增特性?

1. 新增了块级作用域 (let,const)

2. 提供了定义类的语法糖 (class)

3. 新增了一种基本数据类型 (Symbol)

4. 新增了变量的解构赋值

5. 函数参数允许设置默认值，引入了 rest 参数，新增了箭头函数

6. 数组新增了一些 API ，如 isArray / from / of 方法 ; 数组实例新增了 entries() ， keys() 和 values() 等

方法

7. 对象和数组新增了扩展运算符

8. ES6 新增了模块化 (import/export)

9. ES6 新增了 Set 和 Map 数据结构

10. ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例

11. ES6 新增了生成器 (Generator) 和遍历器 (Iterator)

7.JS设计模式有哪些(单例模式观察者模式等)

JS 设计模式有很多，但我知道的有单例模式，观察者模式

单例模式：

就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果

不存在就创建了再返回，这就确保了一个类只有一个实例对象。在 JavaScript 里，单例作为一个命

名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

观察者模式 :

观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象

需要改变的时候，就应该考虑使用观察者模式。

总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化

8.说一下你对JS面试对象的理解？

JS 面向对象主要基于 function 来实现的，通过 function 来模拟类，通过 prototype 来实现类方法的共享，跟其他语言有着本质的不同，自从有了ES6 后，把面向对象类的实现更像后端语言的实现了，通过 class 来定义类，通过extends 来继承父类，其实 ES6 类的实现本质上是一个语法糖，不过对于开发简单了好多

9.说一下JS数组常用方法（至少6个）

1.　Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变

2.　Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变

3.　Array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。

4.　Array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。

5.　Array.concat(arr1,arr2…)，合并两个或多个数组，生成一个新的数组。原数组不变。

6.　Array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

7.　Array.reverse()，将数组倒序。原数组改变。

8.　Array.sort()，对数组元素进行排序。按照字符串UniCode码排序，原数组改变。

9.Array.map(function)，原数组的每一项执行函数后，返回一个新的数组。原数组不变。（注意该方法和forEach的区别）。

10.Array.slice() 按照条件查找出其中的部分内容

11.Array.splice(index,howmany,arr1,arr2…) ，用于添加或删除数组中的元素。从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。

12.Array.forEach(function)，用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。

13.Array.filter(function)，过滤数组中，符合条件的元素并返回一个新的数组

14.Array.every(function)，对数组中的每一项进行判断，若都符合则返回true，否则返回false。

15.Array.some(function)，对数组中的每一项进行判断，若都不符合则返回false，否则返回true。

16.Array.reduce(function)，reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

17.indexOf() 检测当前值在数组中第一次出现的位置索引

原数组改变的方法有：push pop shift unshift reverse sort splice forEach
不改变原数组的方法有：concat map filter join every some indexOf slice

10.说一下JS数组内置遍历方法有哪些和区别？

forEach

这个方法是为了取代 for 循环遍历数组的，返回值为 undefined

item 代码遍历的每一项 ,

index: 代表遍历的每项的索引，

arr 代表数组本身

filter

是一个过滤遍历的方法，如果返回条件为 true ，则返回满足条件为 true 的新数组

map

这个 map 方法主要对数组的复杂逻辑处理时用的多，特别是 react 中遍历数据，也经常用到，

写法和 forEach 类似

some

这个 some 方法用于只要数组中至少存在一个满足条件的结果，返回值就为 true, 否则返回

fasel, 写法和 forEach 类似

every

这个 every 方法用于数组中每一项都得满足条件时，才返回 true ，否则返回 false, 写法和

forEach 类似

11.说一下JS作用域

JS 作用域也就是 JS 识别变量的范围，作用域链也就是 JS 查找变量的顺序

先说作用域， JS 作用域主要包括全局作用域、局部作用域和 ES6 的块级作用域

全局作用域：也就是定义在 window 下的变量范围，在任何地方都可以访问，

局部作用域：是只在函数内部定义的变量范围

块级作用域：简单来说用 let 和 const 在任意的代码块中定义的变量都认为是块级作用域中的变

量，例如在 for 循环中用 let 定义的变量，在 if 语句中用 let 定义的变量等等

注 : 1. 尽量不要使用全局变量，因为容易导致全局的污染，命名冲突，对 bug 查找不利。

2. 而所谓的作用域链就是由最内部的作用域往最外部 , 查找变量的过程 . 形成的链条就是作用域链

12.说一下从输入URL到页面加载完中间发生了什么？

大致过程是这样的：

1. 通过 DNS 服务器： url=>ip 地址；

2. 到达 ip 地址对应的服务器；

3. 服务器接收用户的请求；

4. 把处理后的结果返回给客户端；

5. 客户端把结果渲染到浏览器即可，最后页面显示出来

输入了一个域名 , 域名要通过 DNS 解析找到这个域名对应的服务器地址 (ip), 通过 TCP 请求链接服务 , 通过 WEB服务器 (apache) 返回数据 , 浏览器根据返回数据构建 DOM 树 , 通过 css 渲染引擎及 js 解析引擎将页面渲染出来, 关闭 tcp 连接

13.说一下JS事件代理（也称事件委托）是什么，及实现原理？

JS 事件代理就是通过给父级元素（例如： ul ）绑定事件，不给子级元素 ( 例如： li) 绑定事件，然后当点击子级元素时，通过事件冒泡机制在其绑定的父元素上触发事件处理函数，主要目的是为了提升性能，因为我不用给每个子级元素绑定事件，只给父级元素绑定一次就好了, 在原生 js 里面是通过 event 对象的 targe属性实现

jq 方式实现相对而言简单 $(“ul”).on(“click”,“li”,function(){// 事件逻辑 }) 其中第二个参数指的是触发事件的具体目标，特别是给动态添加的元素绑定事件，这个特别起作用

14.说一下js数据类型有哪些？

js 数据类型有：

基本数据类型

umber

string

Boolean

null

undefined

symbol （ ES6 新增）

复合类型有

Object

function

15.说一下 call,apply,bind区别?

call,apply,bind 主要作用都是改变 this 指向的，但使用上略有区别，说一下区别

call 和 apply 的主要区别是在传递参数上不同， call 后面传递的参数是以逗号的形式分开的， apply

传递的参数是数组形式 [Apply 是以 A 开头的 , 所以应该是跟 Array( 数组 ) 形式的参数 ]

bind 返回的是一个函数形式，如果要执行，则后面要再加一个小括号例如： bind(obj, 参数 1, 参数

2,)(),bind 只能以逗号分隔形式，不能是数组形式

16.JavaScript的作用域链理解

JavaScript 属于静态作用域，即声明的作用域是根据程序正文在编译时就确定的，有时也称为词法作用域。

其本质是 JavaScript 在执行过程中会创造可执行上下文，可执行上下文中的词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，这些引用串联起来一直指向全局的词法环境，因此形成了作用域链。

17.ES6模块与CommonJS模块有什么区别？

ES6 Module 和 CommonJS 模块的区别：

CommonJS 是对模块的浅拷贝， ES6 Module 是对模块的引用 , 即 ES6 Module 只存只读，不能改变

其值，具体点就是指针指向不能变，类似 const

import 的接口是 read-only （只读状态），不能修改其变量值。即不能修改其变量的指针指向，但

可以改变变量内部指针指向 , 可以对 commonJS 对重新赋值（改变指针指向），但是对 ES6 Module

赋值会编译报错。

ES6 Module 和 CommonJS 模块的共同点：

CommonJS 和 ES6 Module 都可以对引入的对象进行赋值，即对对象内部属性的值进行改变。

18.null与undefined的区别是什么？

null 表示为空，代表此处不应该有值的存在，一个对象可以是 null ，代表是个空对象，而 null 本身也是对象。

undefined 表示『不存在』， JavaScript 是一门动态类型语言，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefined 的意义所在

19.箭头函数的this指向哪里？

箭头函数不同于传统 JavaScript 中的函数 , 箭头函数并没有属于自己的 this, 它的所谓的 this 是捕获其所在上下文的 this 值，作为自己的 this 值 , 并且由于没有属于自己的 this, 而箭头函数是不会被 new 调用的，这个所谓的this 也不会被改变 .

20.async/await是什么？

async 函数，就是 Generator 函数的语法糖，它建立在 Promises 上，并且与所有现有的基于 Promise 的

API 兼容。

1. Async— 声明一个异步函数 (async function someName(){...})

自动将常规函数转换成 Promise ，返回值也是一个 Promise 对象

只有 async 函数内部的异步操作执行完，才会执行 then 方法指定的回调函数

异步函数内部可以使用 await

2. Await— 暂停异步的功能执行 (var result = await someAsyncCall() 😉

放置在 Promise 调用之前， await 强制其他代码等待，直到 Promise 完成并返回结果

只能与 Promise 一起使用，不适用与回调

只能在 async 函数内部使用

21.async/await相比于Promise的优势？

代码读起来更加同步， Promise 虽然摆脱了回调地狱，但是 then 的链式调用也会带来额外的阅读负

担

Promise 传递中间值非常麻烦，而 async/await 几乎是同步的写法，非常优雅

错误处理友好， async/await 可以用成熟的 try/catch ， Promise 的错误捕获非常冗余

调试友好， Promise 的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断

点，如果你在一个 .then 代码块中使用调试器的步进 (step-over) 功能，调试器并不会进入后续

的 .then 代码块，因为调试器只能跟踪同步代码的『每一步』

22.JavaScript的基本类型和复杂类型是储存在哪里的？

基本类型储存在栈中，但是一旦被闭包引用则成为常住内存，会储存在内存堆中。

复杂类型会储存在内存堆中。

23.简述同步与异步的区别？

同步：

浏览器访问服务器请求，用户看得到页面刷新，重新发请求 , 等请求完，页面刷新，新内容出

现，用户看到新内容 , 进行下一步操作

代码从上往下依次执行，执行完当前代码，才能执行下面的代码。（阻塞）

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内

容也会出现，用户看到新内容

代码从上往下依次执行，没执行完当前代码，也能执行下面的代码。（非阻塞）

24.JavaScript垃圾回收原理？

在 javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收；

如果两个对象互相引用，而不再被第 3 者所引用，那么这两个互相引用的对象也会被回收。

25.请描述值类型(基本数据类型)和引用类型的区别？

值类型

占用空间固定，保存在栈中（当一个方法执行时，每个方法都会建立自己的内存栈，在这个方

法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自

然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；栈中存储的是基础变量以及

一些对象的引用变量，基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组

或者对象的地址，这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。）

保存与复制的是值本身

使用 typeof 检测数据的类型

基本类型数据是值类型

引用类型

占用空间不固定，保存在堆中（当我们在程序中创建一个对象时，这个对象将被保存到运行时

数据区中，以便反复利用（因为对象的创建成本通常较大），这个运行时数据区就是堆内存。

堆内存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变

量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有当一个对象没有任

何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。）

保存与复制的是指向对象的一个指针

使用 instanceof 检测数据类型

使用 new() 方法构造出的对象是引用型

26.深拷贝和浅拷贝的区别？如何实现？

浅拷贝 只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。浅拷贝只复制对象的第一层属性

但 深拷贝 会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

对对象的属性进行递归复制

浅拷贝

使用 Object.assign({},obj) 第一个参数是一个空对象，第二个参数是你要复制的对象；通过这

个方法我们知道浅拷贝不能修改基础的数据类型，可以修改引用的数据类型；

ES6 中的 ... 扩展运算符来进行浅拷贝的实现；

Object.assign() 实现

深拷贝

对象只有一层的话可以使用上面的： Object.assign() 函数

转成 JSON 再转回来

用 JSON.stringify 把对象转成字符串，再用 JSON.parse 把字符串转成新的对象。

使用Object.create()方法

直接使用 var newObj = Object.create(oldObj) ，可以达到深拷贝的效果。

27.浏览器是如何渲染页面的？

渲染的流程如下：

1. 解析 HTML 文件，创建 DOM 树。

自上而下，遇到任何样式（ link 、 style ）与脚本（ script ）都会阻塞（外部样式不阻塞后续外部脚本的加

载）。

2. 解析 CSS 。优先级：浏览器默认设置 < 用户设置 < 外部样式 < 内联样式 <HTML 中的 style 样式；

3. 将 CSS 与 DOM 合并，构建渲染树（ Render Tree ）

4. 布局和绘制，重绘（ repaint ）和重排（ reflow ）

28.什么是JavaScript原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是 prototype ( 原型 ) ，当我们访问一个对象的属性时

如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又

会有自己的 prototype ，于是就这样一直找下去，也就是我们平时所说的原型链的概念

关系： instance.constructor.prototype = instance.__proto__

特点：

JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的

原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

当我们需要一个属性的时， Javascript 引擎会先看当前对象中是否有这个属性，如果没有的

就会查找他的 Prototype 对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

29.json和jsonp的区别?

son 返回的是一串 json 格式数据；而 jsonp 返回的是脚本代码（包含一个函数调用）

jsonp 的全名叫做 json with padding ，就是把 json 对象用符合 js 语法的形式包裹起来以使其他的网站可以请求到，也就是将json 封装成 js 文件传过去。

30.如何阻止冒泡？

event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。

31.如何阻止默认事件？

event.preventDefault()方法
取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）

form表单如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。a元素中href连接，如果调用此方法是，连接不会被打开。

return false
这个方法比较暴力，它会同时阻止事件冒泡和默认事件，写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；

可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

32.JavaScript事件流模型都有什么？

“ 事件冒泡 ”: 事件开始由最具体的元素接受，然后逐级向上传播

“ 事件捕捉 ”: 事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM 事件流 ”: 三个阶段 : 事件捕捉，目标阶段，事件冒泡

33.请你谈谈cookie的弊端？

缺点 :

1.Cookie 数量和长度的限制。每个 domain 最多只能有 20 条 cookie ，每个 cookie 长度不能超过

4KB ，否则会被截掉。

2. 安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，

因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。

3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

34.哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每

个对象的其他对象的数量。如果一个对象的引用数量为 0( 没有其他对象引用过该对象 ) ，或对该对象的

惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环 ( 在两个对象彼此引用且彼此保留时，就会产生一个循环 )

35.如何优化自己的代码?

代码重用

避免全局变量 ( 命名空间，封闭空间，模块化 mvc..)

拆分函数避免函数过于臃肿

36.JavaScript 中的强制转型是指什么？

在 JavaScript 中，两种不同的内置类型间的转换被称为强制转型。强制转型在 JavaScript 中有两种形式：显式和隐式。

强制类型转型指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

37.解释 JavaScript 中的相等性。

JavaScript 中有严格比较和类型转换比较：

严格比较（例如 === ）在不允许强制转型的情况下检查两个值是否相等；

抽象比较（例如 == ）在允许强制转型的情况下检查两个值是否相等。

一些简单的规则：

如果被比较的任何一个值可能是 true 或 false ，要用 === ，而不是 == ；

如果被比较的任何一个值是这些特定值（

0 、 “” 或 [] ），要用 === ，而不是 == ；

在其他情况下，可以安全地使用 == 。它不仅安全，而且在很多情况下，它可以简化代码，并且提

升代码可读性

38.你能解释一下 ES5 和 ES6 之间的区别吗？

ECMAScripts5,即ES5，是ECMAScripts的第五次修订，于2009年完成标准化ECMAScripts6，即ES6，是ECMAScripts的第六次修订，于2025年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

39.解释 JavaScript 中“undefined”和“not defined”之间的区别？

在 JavaScript 中，如果你试图使用一个不存在且尚未声明的变量， JavaScript 将抛出错误 “var name is not defined”，让后脚本将停止运行。但如果你使用 typeof undeclared_variable ，它将返回 undefined。

当我们试图访问一个被声明但未被定义的变量时，会出现 undefined 错误。

当我们试图引用一个既未声明也未定义的变量时，将会出现 not defined 错误。

40.匿名和命名函数有什么区别？

匿名函数通常是某一个事件触发后进行触发的。
命名函数可以进行预先的封装，在需要使用的地方通过调用函数名运行。

41.什么是 JavaScript 中的提升操作?

提升（ hoisting ）是 JavaScript 解释器将所有变量和函数声明移动到当前作用域顶部的操作。

有两种类型的提升：

变量提升 —— 非常少见

函数提升 —— 常见

无论 var （或函数声明）出现在作用域的什么地方，它都属于整个作用域，并且可以在该作用域内的任何地方访问它。