千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
Js常见的面试题
一，js中有哪些内置对象？
答：
① 数据封装类对象：Object，Array，Boolean，Number，String
② 其他对象：Function ，Arguments，Math，Date，RegExp，Error
③ ES6新增对象：Symbol（标识唯一的ID），Map，Set，Promise，Reflect
补充：
（一）什么是数据封装类对象？===>一般称为包装类/包装对象
答：在JavaScript中，数据封装类对象是指通过构造函数创建的对象，用于封装数据和相关的方法。这些对象通常包含私有属性和公共方法，可以通过实例化对象来访问和操作这些属性和方法。
数据封装类对象的目的是将数据和操作数据的方法封装在一起，以提高代码的可维护性和重用性。通过封装，可以隐藏对象的内部实现细节，只暴露必要的接口给外部使用。我们都知道js分为基本数据类型和引用数据类型。
基本数据类型数据可以有属性吗？答案是没有，但是为什么基本数据类型却可以调用一些方法呢？
var str="hello world";
var long=str.length;
console.log(long); //得出结果为11
明明没有属性却可以调用length的属性，就是因为包装类的原因，函数在执行的前一刻发现你写的代码其实是存在问题的，但是因为js是解释型语言，系统会为你进行包装类的操作。js中提供了三种特殊的引用类型（String Number Boolean）每当我们给基本数据类型赋属性值时 后台都会给我们偷偷转换 调用包装类。为了更好的理解，请看例子：
例子1：
var str="hello word";
//var str = new String("hello world"); // 1.创建出一个和基本类型值相同的对象
//var long = str.length; // 2.这个对象就可以调用包装对象下的方法，并且返回结果给long变量
//str = null; // 3.之后这个临时创建的对象就被销毁了
var long=str.length; //因为str没有length属性 所以执行这步之前后台会自动执行以上三步操作
console.log(long); // （结果为:10）
例子2：
var a = 100;
console.log(a);
console.log(a instanceof Object);
console.log(a.toString());
console.log(a instanceof Object);
//a.toString执行到这一行的时候的步骤
1、a = new Number(a); 先把数字基本值转化为包装对象
2、a.toString; 调用的其实是包装对象的原型当中的toString方法
3、调用结束后自动再让a变回基本值 a = 100;
二，如何最小化重绘（repaint）和回流/重排（reflow）？
答：
① 需要对元素进行复杂的操作时，可以先隐藏（display：“none”），操作完成后再显示
② 需要创建多个DOM节点时，使用DocumentFragment创建完成后一次性的加入document
③ 缓存Layout属性值，如：var left=element.offsetLeft 这样，多次使用left 只会产生一次回流
④ 尽量避免用table布局（table元素一旦触发回流就会导致table里面所有的其他元素回流）
⑤ 如果需要修改多个元素的样式，可以将它们的样式修改放在一个批处理中，这样可以减少重绘和回流的次数。
补充：
（一）什么是重绘和回流？
答：
① 重绘:指的是当前元素的样式(背景颜色、字体颜色等)发生改变的时候(不改变布局，不影响其他的dom)，浏览器只需要把改变的元素重新的渲染一下即可，重绘对浏览器的性能影响较小，所以 一般不考虑。
② 回流/重排；指的是浏览器为了重新渲染部分或者全部的DOM而重新计算DOM中元素的位置和几何构造的过程。（重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
（二）浏览器解析HTML的基本过程？
答：
① 用户输入网址，浏览器向服务器发出请求，服务器返回html文件
② 浏览器载入html代码，发现标签内有一个标签引用外部css文件
③ 浏览器又发出css文件的请求，服务器返回这个css文件
④ 浏览器继续载入html中的部分的代码，并且css文件已经拿到手了，可以渲染页面
⑤ 浏览器在代码中发现一个标签引用关了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码
⑥ 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来渲染这部分代码
⑦ 浏览器发现了一个包含一行javascript代码的script标签，赶快运行它
⑧ javascript脚本执行了这条语句，命令浏览器隐藏代码中某个,杯具了，突然就少了一个元素，浏览器不得不重新渲染这部分代码
⑨ 终于等到的到来，浏览器泪流满面
⑩ 等等，还没完，用户点了一个界面中的“换肤”按钮，javascript让浏览器换了一个标签中的css的路径
⑪ 浏览器召集了在座的各位：”大伙需要收拾下行李，咱得重新来过”，浏览器向服务器请求了新的css文件，重新渲染页面当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面变慢的原因。
（三）缓存Layout属性值，如：var left=element.offsetLeft 这样，多次使用left 只会产生一次回流？什么意思呢？
答：这句话的意思是，当我们需要多次使用一个元素的偏移左边距（left）属性值时，可以将这个属性值缓存在一个变量中，这样就只会触发一次回流操作。
三， 说说你对javaScript中的作用域链的理解？
答：
JavaScript中的作用域链是指变量和函数的访问规则。当在一个函数内部访问一个变量时，JavaScript引擎会首先在当前函数的作用域中查找该变量，如果找不到，就会继续在外层函数的作用域中查找，如果找不到就会向上查找，直到找到该变量或者到达全局作用域。
作用域链的形成是由函数的嵌套关系决定的。每当一个函数被创建时，它会保存一个对其父函数作用域的引用。当在函数内部访问一个变量时，如果在当前函数的作用域中找不到该变量，JavaScript引擎会通过这个引用继续向上查找，直到找到该变量或者到达全局作用域。
这种嵌套的作用域链关系可以形成多层嵌套，每一层都有自己的作用域。当在内层函数中访问一个变量时，JavaScript引擎会按照作用域链的顺序依次查找，直到找到该变量或者到达全局作用域。
需要注意的是，作用域链是在函数定义时确定的，而不是在函数调用时确定的。这意味着函数内部可以访问外部函数的变量，但是外部函数不能访问内部函数的变量。这种机制称为词法作用域，也是JavaScript闭包的基础。
我认为作用域链的理解对于理解JavaScript中的变量作用域和闭包非常重要，它决定了变量的可见性和生命周期。
四， 什么是同源策略？为什么会产生跨域的问题？
答：
同源策略：指的是浏览器的一种机制，只允许在同源，也就是同协议，同域名，同端口的情况下才能进行数据交互。
我们在开发项目的过程中，往往一个项目的接口不止一个域，所以就需要进行跨域处理。这也就是跨域问题产生的由来
五， 常见的跨域方式有哪些？
答：
① JSONP（JSON with Padding）：主要依赖的是script标签不受同源策略的影响，src指向某一个接口的地址，同步需要传递callback回调函数名字，这样当接口调用成功后，本地创建的全局回调函数就会执行，且接收到数据。
② CORS（Cross-Origin Resource Sharing）：在服务器端设置响应头部，允许指定的域名访问资源。前端发送请求时，浏览器会自动在请求头中添加Origin字段，服务器根据该字段判断是否允许跨域访问。（Access-Control-Allow-origin：‘指定的ip地址’）
③ 代理服务器：前端通过向同域名下的代理服务器发送请求，由代理服务器转发请求到目标服务器，再将响应数据返回给前端。这种方式需要在服务器端配置代理服务器。（服务器之间没有跨域限制）
六， 说说你对闭包的理解？闭包使用的场景有哪些？
答：
闭包：是指一个函数可以访问并操作其外部函数的变量，即使外部函数已经执行完毕。原理就是通过将内部函数返回，从而使得内部函数可以继续访问外部函数的变量。
闭包常见的使用场景有如下3点：
① 保护变量：通过闭包可以将变量封装在函数内部，避免全局污染，提高代码的安全性。
② 延长变量的生命周期：当外部函数执行完毕后，内部函数仍然可以访问外部函数的变量，可以用于保存状态或者缓存数据。
③ 实现函数工厂：通过闭包可以动态生成函数，根据不同的参数生成不同的函数。
在使用闭包函数的过程中，应当注意以下3点
④ 内存泄漏：由于闭包会保留外部函数的变量，如果闭包没有被及时释放，可能会导致内存泄漏问题。因此，在不需要使用闭包时，应该手动解除对闭包的引用。
⑤ 变量共享：闭包中的变量是共享的，如果闭包中的变量被修改，会影响到其他使用该变量的地方。因此，在使用闭包时需要注意变量的修改。
⑥ 性能问题：闭包会占用更多的内存，因为它需要保留外部函数的变量。在使用闭包时需要权衡内存占用和代码的可读性。
