JavaScript 为什么要进行变量提升，它导致了什么问题？
变量提升的表现是，无论在函数中何处位置声明的变量，好像都被提升到了函数的首部，可以在变量声明前访问到而不会报错。
造成变量声明提升的本质原因是 js 引擎在代码执行前有一个解析的过程，创建了执行上下文，初始化了一些代码执行时需要用到的对象。当访问一个变量时，会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它包含了函数的形参、所有的函数和变量声明，这个对象的是在代码解析的时候创建的。
首先要知道，JS 在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。
那为什么会进行变量提升呢？主要有以下两个原因：
（1）提高性能 在 JS 代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步，那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。
在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数），并且因为代码压缩的原因，代码执行也更快了。
（2）容错性更好
变量提升可以在一定程度上提高 JS 的容错性，看下面的代码：
a = 1;var a;console.log(a);
复制代码
如果没有变量提升，这两行代码就会报错，但是因为有了变量提升，这段代码就可以正常执行。
虽然，在可以开发过程中，可以完全避免这样写，但是有时代码很复杂的时候。可能因为疏忽而先使用后定义了，这样也不会影响正常使用。由于变量提升的存在，而会正常运行。
总结：
变量提升虽然有一些优点，但是他也会造成一定的问题，在 ES6 中提出了 let、const 来定义变量，它们就没有变量提升的机制。下面看一下变量提升可能会导致的问题：
var tmp = new Date();
function fn(){ console.log(tmp); if(false){ var tmp = 'hello world'; }}
fn(); // undefined
复制代码
在这个函数中，原本是要打印出外层的 tmp 变量，但是因为变量提升的问题，内层定义的 tmp 被提到函数内部的最顶部，相当于覆盖了外层的 tmp，所以打印结果为 undefined。
var tmp = 'hello world';
for (var i = 0; i < tmp.length; i++) { console.log(tmp[i]);}
console.log(i); // 11
复制代码
由于遍历时定义的 i 会变量提升成为一个全局变量，在函数结束之后不会被销毁，所以打印出来 11。
前端进阶面试题详细解答
NaN 是什么，用 typeof 会输出什么？
Not a Number，表示非数字，typeof NaN === 'number'
如何提⾼webpack 的打包速度?
（1）优化 Loader
对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，这是可以优化的。
首先我们优化 Loader 的文件搜索范围
module.exports = { module: { rules: [ { // js 文件才使用 babel test: /\.js$/, loader: 'babel-loader', // 只在 src 文件夹下查找 include: [resolve('src')], // 不会去查找的路径 exclude: /node_modules/ } ] }}
复制代码
对于 Babel 来说，希望只作用在 JS 代码上的，然后 node_modules 中使用的代码都是编译过的，所以完全没有必要再去处理一遍。
当然这样做还不够，还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间
loader: 'babel-loader?cacheDirectory=true'
复制代码
（2）HappyPack
受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。
HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了
module: { loaders: [ { test: /\.js$/, include: [resolve('src')], exclude: /node_modules/, // id 后面的内容对应下面 loader: 'happypack/loader?id=happybabel' } ]},plugins: [ new HappyPack({ id: 'happybabel', loaders: ['babel-loader?cacheDirectory'], // 开启 4 个线程 threads: 4 })]
复制代码
（3）DllPlugin
DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。DllPlugin 的使用方法如下：
// 单独配置在一个文件中// webpack.dll.conf.jsconst path = require('path')const webpack = require('webpack')module.exports = { entry: { // 想统一打包的类库 vendor: ['react'] }, output: { path: path.join(__dirname, 'dist'), filename: '[name].dll.js', library: '[name]-[hash]' }, plugins: [ new webpack.DllPlugin({ // name 必须和 output.library 一致 name: '[name]-[hash]', // 该属性需要与 DllReferencePlugin 中一致 context: __dirname, path: path.join(__dirname, 'dist', '[name]-manifest.json') }) ]}
复制代码
然后需要执行这个配置文件生成依赖文件，接下来需要使用 DllReferencePlugin 将依赖文件引入项目中
// webpack.conf.jsmodule.exports = { // ...省略其他配置 plugins: [ new webpack.DllReferencePlugin({ context: __dirname, // manifest 就是之前打包出来的 json 文件 manifest: require('./dist/vendor-manifest.json'), }) ]}
复制代码
（4）代码压缩
在 Webpack3 中，一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。
在 Webpack4 中，不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。
（5）其他
可以通过一些小的优化点来加快打包速度
resolve.extensions：用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
resolve.alias：可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
module.noParse：如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助
一般如何产生闭包
如何防御 XSS 攻击？
可以看到 XSS 危害如此之大， 那么在开发网站时就要做好防御措施，具体措施如下：
CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。
通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式
Loader 和 Plugin 有什么区别
Loader：直译为"加载器"。Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。 Plugin：直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
vue 实现双向数据绑定原理是什么？
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <!-- 引入vue文件 --> <div id="box"> <new-input v-bind:name.sync="name"></new-input> {{name}} <!-- 小胡子语法 --> <input type="text" v-model="name" /> </div> <script> Vue.component("new-input", { props: ["name"], data: function () { return { newName: this.name, }; }, template: `<label><input type="text" @keyup="changgeName" v-model="newName" /> 你的名字：</label>`, // 模板字符串 methods: { changgeName: function () { this.$emit("update:name", this.newName); }, }, watch: { name: function (v) { this.newName = v; }, }, // 监听 }); new Vue({ el: "#box", //挂载实例 data: { name: "nick", }, //赋初始值 }); </script> </body></html>
复制代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="text" v-mode="msg" /> <p v-mode="msg"></p> <script> const data = { msg: "你好", }; const input = document.querySelector("input"); const p = document.querySelector("p"); input.value = data.msg; p.innerHTML = data.msg; //视图变数据跟着变 input.addEventListener("input", function () { data.msg = input.value; }); //数据变视图变 let temp = data.msg; Object.defineProperty(data, "msg", { get() { return temp; }, set(value) { temp = value; //视图修改 input.value = temp; p.innerHTML = temp; }, }); data.msg = "小李"; </script> </body></html>
复制代码
数组扁平化
ES5 递归写法 —— isArray()、concat()
function flat11(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { res = res.concat(flat11(arr[i])); } else { res.push(arr[i]); } } return res;}
复制代码
如果想实现第二个参数（指定“拉平”的层数），可以这样实现，后面的几种可以自己类似实现：
function flat(arr, level = 1) { var res = []; for(var i = 0; i < arr.length; i++) { if(Array.isArray(arr[i]) || level >= 1) { res = res.concat(flat(arr[i]), level - 1); } else { res.push(arr[i]); } } return res;}
复制代码
ES6 递归写法 — reduce()、concat()、isArray()
function flat(arr) { return arr.reduce( (pre, cur) => pre.concat(Array.isArray(cur) ? flat(cur) : cur), [] );}
复制代码
ES6 迭代写法 — 扩展运算符(...)、some()、concat()、isArray()
ES6 的扩展运算符(...) 只能扁平化一层
function flat(arr) { return [].concat(...arr);}
复制代码
全部扁平化：遍历原数组，若arr中含有数组则使用一次扩展运算符，直至没有为止。
function flat(arr) { while(arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr;}
复制代码
toString/join & split
调用数组的 toString()/join() 方法（它会自动扁平化处理），将数组变为字符串然后再用 split 分割还原为数组。由于 split 分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型。
function flat(arr){ return arr.toString().split(',').map(item => Number(item)); // return arr.join().split(',').map(item => Number(item));}
复制代码
使用正则
JSON.stringify(arr).replace(/[|]/g, '') 会先将数组arr序列化为字符串，然后使用 replace() 方法将字符串中所有的[ 或 ] 替换成空字符，从而达到扁平化处理，此时的结果为 arr 不包含 [] 的字符串。最后通过JSON.parse() 解析字符串。
function flat(arr) { return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g,'') + "]");}
复制代码
类数组转化为数组
类数组是具有 length 属性，但不具有数组原型上的方法。常见的类数组有 arguments、DOM 操作方法返回的结果(如document.querySelectorAll('div'))等。
扩展运算符(...)
注意：扩展运算符只能作用于 iterable 对象，即拥有 Symbol(Symbol.iterator) 属性值。
Array.from()
let arr = Array.from(arrayLike);
复制代码
Array.prototype.slice.call()
let arr = Array.prototype.slice.call(arrayLike);
复制代码
Array.apply()
let arr = Array.apply(null, arrayLike);
复制代码
concat + apply
let arr = Array.prototype.concat.apply([], arrayLike);
复制代码
点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？
点击刷新按钮或者按 F5： 浏览器直接对本地的缓存文件过期，但是会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。
防抖
防抖(debounce)：触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。类似王者荣耀的回城功能，你反复触发回城功能，那么只认最后一次，从最后一次触发开始计时。
核心思想：每次事件触发就清除原来的定时器，建立新的定时器。使用 apply 或 call 调用传入的函数。函数内部支持使用 this 和 event 对象；
应用：防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。
实现：
function debounce(fn, delay) { // 利用闭包的原理 let timer = null; return function(...args){ if(timer) clearTimeout(timer); timer = setTimeout(() => { // 改变 this 指向为调用 debounce 所指的对象 fn.call(this, ...args); // fn.apply(this, args); }, delay); }}
复制代码
怎么解决白屏问题
什么是中间人攻击？如何防范中间人攻击？
中间⼈ (Man-in-the-middle attack, MITM) 是指攻击者与通讯的两端分别创建独⽴的联系, 并交换其所收到的数据, 使通讯的两端认为他们正在通过⼀个私密的连接与对⽅直接对话, 但事实上整个会话都被攻击者完全控制。在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。
攻击过程如下:
客户端发送请求到服务端，请求被中间⼈截获
服务器向客户端发送公钥
中间⼈截获公钥，保留在⾃⼰⼿上。然后⾃⼰⽣成⼀个伪造的公钥，发给客户端
客户端收到伪造的公钥后，⽣成加密 hash 值发给服务器
中间⼈获得加密 hash 值，⽤⾃⼰的私钥解密获得真秘钥,同时⽣成假的加密 hash 值，发给服务器
服务器⽤私钥解密获得假密钥,然后加密数据传输给客户端
变量提升
函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。
在创建执行上下文的过程中会做三件事：创建变量对象，创建作用域链，确定 this 指向，其中创建变量对象的过程中，首先会为 arguments 创建一个属性，值为 arguments，然后会扫码 function 函数声明，创建一个同名属性，值为函数的引用，接着会扫码 var 变量声明，创建一个同名属性，值为 undefined，这就是变量提升。
浅拷贝
// 这里只考虑对象类型function shallowClone(obj) { if(!isObject(obj)) return obj; let newObj = Array.isArray(obj) ? [] : {}; // for...in 只会遍历对象自身的和继承的可枚举的属性（不含 Symbol 属性） for(let key in obj) { // obj.hasOwnProperty() 方法只考虑对象自身的属性 if(obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj;}
复制代码
setTimeout 模拟 setInterval
描述：使用setTimeout模拟实现setInterval的功能。
实现：
const mySetInterval(fn, time) { let timer = null; const interval = () => { timer = setTimeout(() => { fn(); // time 时间之后会执行真正的函数fn interval(); // 同时再次调用interval本身 }, time) } interval(); // 开始执行 // 返回用于关闭定时器的函数 return () => clearTimeout(timer);}
// 测试const cancel = mySetInterval(() => console.log(1), 400);setTimeout(() => { cancel();}, 1000); // 打印两次1
复制代码
代码输出结果
var a = 1;function printA(){ console.log(this.a);}var obj={ a:2, foo:printA, bar:function(){ printA(); }}
obj.foo(); // 2obj.bar(); // 1var foo = obj.foo;foo(); // 1
复制代码
输出结果： 2 1 1
解析：
obj.foo()，foo 的 this 指向 obj 对象，所以 a 会输出 2；
obj.bar()，printA 在 bar 方法中执行，所以此时 printA 的 this 指向的是 window，所以会输出 1；
foo()，foo 是在全局对象中执行的，所以其 this 指向的是 window，所以会输出 1；
原型修改、重写
function Person(name) { this.name = name}// 修改原型Person.prototype.getName = function() {}var p = new Person('hello')console.log(p.__proto__ === Person.prototype) // trueconsole.log(p.__proto__ === p.constructor.prototype) // true// 重写原型Person.prototype = { getName: function() {}}var p = new Person('hello')console.log(p.__proto__ === Person.prototype) // trueconsole.log(p.__proto__ === p.constructor.prototype) // false
复制代码
可以看到修改原型的时候 p 的构造函数不是指向 Person 了，因为直接给 Person 的原型对象直接用对象赋值时，它的构造函数指向的了根构造函数 Object，所以这时候p.constructor === Object ，而不是p.constructor === Person。要想成立，就要用 constructor 指回来：
Person.prototype = { getName: function() {}}var p = new Person('hello')p.constructor = Personconsole.log(p.__proto__ === Person.prototype) // trueconsole.log(p.__proto__ === p.constructor.prototype) // true
复制代码
图片懒加载
与普通的图片懒加载不同，如下这个多做了 2 个精心处理：
图片全部加载完成后移除事件监听；
加载完的图片，从 imgList 移除；
let imgList = [...document.querySelectorAll('img')]let length = imgList.length
// 修正错误，需要加上自执行- const imgLazyLoad = function() {+ const imgLazyLoad = (function() { let count = 0
return function() { let deleteIndexList = [] imgList.forEach((img, index) => { let rect = img.getBoundingClientRect() if (rect.top < window.innerHeight) { img.src = img.dataset.src deleteIndexList.push(index) count++ if (count === length) { document.removeEventListener('scroll', imgLazyLoad) } } }) imgList = imgList.filter((img, index) => !deleteIndexList.includes(index)) }- }+ })()
// 这里最好加上防抖处理document.addEventListener('scroll', imgLazyLoad)
复制代码
实现 LazyMan
题目描述:
实现一个LazyMan，可以按照以下方式调用:LazyMan(“Hank”)输出:Hi! This is Hank!
LazyMan(“Hank”).sleep(10).eat(“dinner”)输出Hi! This is Hank!//等待10秒..Wake up after 10Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出Hi This is Hank!Eat dinner~Eat supper~
LazyMan(“Hank”).eat(“supper”).sleepFirst(5)输出//等待5秒Wake up after 5Hi This is Hank!Eat supper
复制代码
实现代码如下:
class _LazyMan { constructor(name) { this.tasks = []; const task = () => { console.log(`Hi! This is ${name}`); this.next(); }; this.tasks.push(task); setTimeout(() => { // 把 this.next() 放到调用栈清空之后执行 this.next(); }, 0); } next() { const task = this.tasks.shift(); // 取第一个任务执行 task && task(); } sleep(time) { this._sleepWrapper(time, false); return this; // 链式调用 } sleepFirst(time) { this._sleepWrapper(time, true); return this; } _sleepWrapper(time, first) { const task = () => { setTimeout(() => { console.log(`Wake up after ${time}`); this.next(); }, time * 1000); }; if (first) { this.tasks.unshift(task); // 放到任务队列顶部 } else { this.tasks.push(task); // 放到任务队列尾部 } } eat(name) { const task = () => { console.log(`Eat ${name}`); this.next(); }; this.tasks.push(task); return this; }}function LazyMan(name) { return new _LazyMan(name);}
复制代码
对虚拟 DOM 的理解
虚拟dom从来不是用来和直接操作dom对比的，它们俩最终殊途同归。虚拟dom只不过是局部更新的一个环节而已，整个环节的对比对象是全量更新。虚拟 dom 对于 state＝UI 的意义是，虚拟 dom 使 diff 成为可能（理论上也可以直接用 dom 对象 diff，但是太臃肿），促进了新的开发思想，又不至于性能太差。但是性能再好也不可能好过直接操作 dom，人脑连 diff 都省了。还有一个很重要的意义是，对视图抽象，为跨平台助力
其实我最终希望你明白的事情只有一件：虚拟 DOM 的价值不在性能，而在别处。因此想要从性能角度来把握虚拟 DOM 的优势，无异于南辕北辙。偏偏在面试场景下，10 个人里面有 9 个都走这条歧路，最后 9 个人里面自然没有一个能自圆其说，实在让人惋惜。
评论