JS面试题汇总（四），行业寒冬，BAT常见的20道前端面试题详解

最新推荐文章于 2024-11-07 13:38:59 发布

m0_60721823

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量914

点赞数 21

分类专栏： 2024年前端程序员文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_60721823/article/details/136839452

版权

2024年前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

// console.log(bb); // 报错 bb is not defined

// console.log(cc); // 报错 cc is not defined

} <

/script>

拓展：

var、let、const 的区别

var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
同一个变量只能使用一种方式声明，不然会报错

< script type = “text/javascript” >

// 块作用域

{

var a = 1;

let b = 2;

const c = 3;

// c = 4; // 报错

// let a = ‘a’; // 报错注：是上面 var a = 1; 那行报错

// var b = ‘b’; // 报错：本行报错

// const a = ‘a1’; // 报错注：是上面 var a = 1; 那行报错

// let c = ‘c’; // 报错：本行报错

var aa;

let bb;

// const cc; // 报错

console.log(a); // 1

console.log(b); // 2

console.log©; // 3

console.log(aa); // undefined

console.log(bb); // undefined

}

console.log(a); // 1

// console.log(b); // 报错

// console.log©; // 报错

// 函数作用域

(function A() {

var d = 5;

let e = 6;

const f = 7;

console.log(d); // 5

console.log(e); // 6 (在同一个{ }中,也属于同一个块，可以正常访问到)

console.log(f); // 7 (在同一个{ }中,也属于同一个块，可以正常访问到)

})();

// console.log(d); // 报错

// console.log(e); // 报错

// console.log(f); // 报错

/script>

34. null/undefined 的区别

参考答案：

null： Null 类型，代表“空值"，代表一个空对象指针，使用 typeof 运算得到 “object"，所以你可以认为它是一个特殊的对象值。

undefined： Undefined 类型，当一个声明了一个变量未初始化时，得到的就是 undefined。

35. JS 哪些操作会造成内存泄露

参考答案：

1）意外的全局变量引起的内存泄露

function leak() {

leak = “xxx”; //leak成为一个全局变量，不会被回收

}

2）闭包引起的内存泄露

function bindEvent() {

var obj = document.createElement(“XXX”);

obj.οnclick = function() {

//Even if it’s a empty function

};

}

闭包可以维持函数内局部变量，使其得不到释放。上例定义事件回调时，由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。

解决之道，将事件处理函数定义在外部，解除闭包, 或者在定义事件处理函数的外部函数中，删除对 dom 的引用。

//将事件处理函数定义在外部

function onclickHandler() {

//do something

}

function bindEvent() {

var obj = document.createElement(“XXX”);

obj.οnclick = onclickHandler;

}

//在定义事件处理函数的外部函数中，删除对dom的引用

function bindEvent() {

var obj = document.createElement(“XXX”);

obj.οnclick = function() {

//Even if it’s a empty function

};

obj = null;

}

3）没有清理的 DOM 元素引用

var elements = {

button: document.getElementById(“button”),

image: document.getElementById(“image”),

text: document.getElementById(“text”)

};

function doStuff() {

image.src = “http://some.url/image”;

button.click():

console.log(text.innerHTML)

}

function removeButton() {

document.body.removeChild(document.getElementById(‘button’))

}

4）被遗忘的定时器或者回调

var someResouce = getData();

setInterval(function() {

var node = document.getElementById(“Node”);

if (node) {

node.innerHTML = JSON.stringify(someResouce);

}

}, 1000);

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。

5）子元素存在引起的内存泄露

在这里插入图片描述

黄色是指直接被 js 变量所引用，在内存里，红色是指间接被 js 变量所引用，如上图，refB 被 refA 间接引用，导致即使 refB 变量被清空，也是不会被回收的子元素 refB 由于 parentNode 的间接引用，只要它不被删除，它所有的父元素（图中红色部分）都不会被删除。

6）IE7/8 引用计数使用循环引用产生的问题

function fn() {

var a = {};

var b = {};

a.pro = b;

b.pro = a;

}

fn();

fn()执行完毕后，两个对象都已经离开环境，在标记清除方式下是没有问题的，但是在引用计数策略下，因为 a 和 b 的引用次数不为 0，所以不会被垃圾回收器回收内存，如果 fn 函数被大量调用，就会造成内存泄漏。在 IE7 与 IE8 上，内存直线上升。

IE 中有一部分对象并不是原生 js 对象。例如，其内存泄漏 DOM 和 BOM 中的对象就是使用 C++以 COM 对象的形式实现的，而 COM 对象的垃圾回收机制采用的就是引用计数策略。因此，即使 IE 的 js 引擎采用标记清除策略来实现，但 js 访问的 COM 对象依然是基于引用计数策略的。换句话说，只要在 IE 中涉及 COM 对象，就会存在循环引用的问题。

var element = document.getElementById(“some_element”);

var myObject = new Object();

myObject.e = element;

element.o = myObject;

上面的例子在一个 DOM 元素（element)与一个原生 js 对象（myObject)之间创建了循环引用。其中，变量 myObject 有一个名为 e 的属性指向 element 对象；而变量 element 也有一个属性名为 o 回指 myObject。由于存在这个循环引用，即使例子中的 DOM 从页面中移除，它也永远不会被回收。

看上面的例子，有人会觉得太弱了，谁会做这样无聊的事情，但是其实我们经常会这样做

window.οnlοad = function outerFunction() {

var obj = document.getElementById(“element”):

obj.οnclick = function innerFunction() {};

};

这段代码看起来没什么问题，但是 obj 引用了 document. getElementById(“element”)，而 document. getElementById(“element”)的 onclick 方法会引用外部环境中的变量，自然也包括 obj，是不是很隐蔽啊。

最简单的解决方式就是自己手工解除循环引用，比如刚才的函数可以这样

myObject.element = null;

element.o = null;

window.οnlοad = function outerFunction() {

var obj = document.getElementById(“element”):

obj.οnclick = function innerFunction() {};

obj = null;

};

将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾回收器下次运行时，就会删除这些值并回收它们占用的内存。要注意的是，IE9+并不存在循环引用导致 Dom 内存泄漏问题，可能是微软做了优化，或者 Dom 的回收方式已经改变

解析：

1、JS 的回收机制

JavaScript 垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔, 周期性的执行。

到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用计数不太常用，标记清除较为常用。

2、标记清除（mark and sweep）

js 中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

function test() {

var a = 10; //被标记，进入环境

var b = 20; //被标记，进入环境

}

test(); //执行完毕之后a、b又被标记离开环境，被回收

3、引用计数(reference counting)

引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值（function object array）赋给该变量时，则这个值的引用次数就是 1。如果同一个值又被赋给另一个变量，则该值的引用次数加 1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减 1。当这个值的引用次数变成 0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为 0 的值所占用的内存。

function test() {

var a = {}; //a的引用次数为0

var b = a; //a的引用次数加1，为1

var c = a; //a的引用次数加1，为2

var b = {}; //a的引用次数减1，为1

}

4、如何分析内存的使用情况

Google Chrome 浏览器提供了非常强大的 JS 调试工具，Memory 视图 profiles 视图让你可以对 JavaScript 代码运行时的内存进行快照，并且可以比较这些内存快照。它还让你可以记录一段时间内的内存分配情况。在每一个结果视图中都可以展示不同类型的列表，但是对我们最有用的是 summary 列表和 comparison 列表。 summary 视图提供了不同类型的分配对象以及它们的合计大小：shallow size （一个特定类型的所有对象的总和）和 retained size （shallow size 加上保留此对象的其它对象的大小）。distance 显示了对象到达 GC 根（校者注：最初引用的那块内存，具体内容可自行搜索该术语）的最短距离。 comparison 视图提供了同样的信息但是允许对比不同的快照。这对于找到泄漏很有帮助。

5、怎样避免内存泄露

1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的；

3）避免创建过多的对象原则：不用了的东西要及时归还。

参考

36. 重排与重绘的区别，什么情况下会触发？

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。