前端面试重要问题总结（前端100问小结）（五）
第 41 题：下面代码输出什么
var a = 10;
(function () {
console.log(a)
a = 5
console.log(window.a)
var a = 20;
console.log(a)
})()
依次输出：undefined -> 10 -> 20
解析：
在立即执行函数中，var a = 20; 语句定义了一个局部变量 a，由于js的变量声明提升机制，局部变量a的声明会被提升至立即执行函数的函数体最上方，且由于这样的提升并不包括赋值，因此第一条打印语句会打印undefined，最后一条语句会打印20。
由于变量声明提升，a = 5; 这条语句执行时，局部的变量a已经声明，因此它产生的效果是对局部的变量a赋值，此时window.a 依旧是最开始赋值的10。
执行解析步骤：
var a = undefined;
a = 10;
(function () {
// 变量提升（预解析）
var a = undefined;
console.log(a); // 输出undefined
a = 5;
console.log(window.a); // 找window(全局)对象的a, 输出10
a = 20;
console.log(a); // 输出20
})()
第 42 题：实现一个 sleep 函数
题目讨论
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
const sleep = (time) => {
return new Promise(resolve => setTimeout(resolve, time))
}
sleep(1000).then(() => {
// 这里写你的骚操作
})
async function sleepAsync() {
console.log('fuck the code')
await sleep(1000)
console.log('fuck the code again')
}
sleepAsync()
4种方式
//Promise
const sleep = time => {
return new Promise(resolve => setTimeout(resolve,time))
}
sleep(1000).then(()=>{
console.log(1)
})
//Generator
function* sleepGenerator(time) {
yield new Promise(function(resolve,reject){
setTimeout(resolve,time);
})
}
sleepGenerator(1000).next().value.then(()=>{console.log(1)})
//async
function sleep(time) {
return new Promise(resolve => setTimeout(resolve,time))
}
async function output() {
let out = await sleep(1000);
console.log(1);
return out;
}
output();
//ES5
function sleep(callback,time) {
if(typeof callback === 'function')
setTimeout(callback,time)
}
function output(){
console.log(1);
}
sleep(output,1000);
第 43 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果
[3, 15, 8, 29, 102, 22].sort((a, b) => return a - b)
第 44 题：介绍 HTTPS 握手过程
也可移步到此
1.客户端使用https的url访问web服务器,要求与服务器建立ssl连接
2.web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
3.客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
4.客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
5.之后服务器与客户端使用秘钥加密传输
总结：
对称加密以及非对称加密来解决：保密性
数字签名：认证、不可抵赖
单向Hash算法：完整性
第 45 题：HTTPS 握手过程中，客户端如何验证证书的合法性
详细过程
校验证书的颁发机构是否受客户端信任。
通过 CRL 或 OCSP 的方式校验证书是否被吊销。
对比系统时间，校验证书是否在有效期内。
通过校验对方是否存在证书的私钥，判断证书的网站域名是否与证书颁发的域名一致。
第 46 题：输出以下代码执行的结果并解释为什么
var obj = {
'2': 3,
'3': 4,
'length': 2,
'splice': Array.prototype.splice,
'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
根据MDN的说法理解，push方法应该是根据数组的length来根据参数给数组创建一个下标为length的属性，我们可以做以下测试：
根据这个测试我们发现，push方法影响了数组的length属性和对应下标的值。
正如如下所说：
在对象中加入splice属性方法，和length属性后。这个对象变成一个类数组。
我们使用题目中的代码时得到了这个结果：
这个时候控制台输出的是一个数组，但是实际上它是一个伪数组，并没有数组的其他属性和方法，我们可以通过这种方法验证：
所以我认为题目的解释应该是：
使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1
2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1
3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印
4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
第一第二步还可以具体解释为：因为每次push只传入了一个参数，所以 obj.length 的长度只增加了 1。push方法本身还可以增加更多参数，详见MDN
第 47 题：双向绑定和 vuex 是否冲突
题目讨论
在严格模式中使用Vuex，当用户输入时，v-model会试图直接修改属性值，但这个修改不是在mutation中修改的，所以会抛出一个错误。当需要在组件中使用vuex中的state时，有2种解决方案：
1、在input中绑定value(vuex中的state)，然后监听input的change或者input事件，在事件回调中调用mutation修改state的值
2、使用带有setter的双向绑定计算属性。见以下例子（来自官方文档）：
call 比 apply 的性能好, 我的理解是内部少了一次将 apply 第二个参数解构的操作
尤其是es6 引入了 Spread operator (延展操作符) 后，即使参数是数组，可以使用 call
let params = [1,2,3,4], xx.call(obj, …params)
第 49 题：为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
作用：工作中，用于前端监控，比如曝光等等，谷歌和百度的都是用的1x1 像素的透明 gif 图片；
why?
1.没有跨域问题，一般这种上报数据，代码要写通用的；（排除ajax）
2.不会阻塞页面加载，影响用户的体验，只要new Image对象就好了；（排除3.JS/CSS文件资源方式上报）
4.在所有图片中，体积最小；（GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节））
5.能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
6.触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
7.跨域友好
8.执行过程无阻塞
9.相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
第 50 题：（百度）实现 (5).add(3).minus(2) 功能。
例： 5 + 3 - 2，结果为 6
Number.prototype.add = function(n) {
return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
return this.valueOf() - n;
};