前端面试（一）（转）-白红宇

前端面试（一）（转）

阅读量：4886 次

发布时间：2019-06-11

本文共 4669 字，大约阅读时间需要 15 分钟。

题目

考察频率指相关问题的考察频率，并非只是提到的点。

JavaScript基础

1、声明提升类问题（考察频率：高）

变量声明和函数声明都会提升，但函数会提升到变量前。具体解释可参考《你不知道的JavaScript（上卷）》

2、js存储方式（考察频率：中）

sessionStorage

localStorage

indexedDB

3、什么情况下会遇到跨域，怎么解决？（考察频率：高）

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。

jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端设置http header、后端在服务器上设置cors。

4、Promise中的执行顺序（考察频率：高）

let promise = new Promise(function(resolve, reject) {  console.log('Promise'); resolve(); }); promise.then(function() { console.log('resolved.'); }); console.log('Hi!'); // Promise // Hi! // resolved

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

5、JavaScript事件循环机制相关问题（考察频率：高）

事件循环机制的概念

关键字：单线程非阻塞、执行栈、事件队列、宏任务(setTimeout()、setInterval())、微任务(new Promise())

可参考：

宏任务、微任务、同步任务的执行顺序

setTimeout(function () { console.log(1); }); new Promise(function(resolve,reject){ console.log(2) resolve(3) }).then(function(val){ console.log(val); }) console.log(4); // 2 // 4 // 3 // 1

先按顺序执行同步任务，Promise新建后立即执行输出2，接着输出4，异步任务等同步任务执行完后执行，且同一次事件循环中，微任务永远在宏任务之前执行。这时候执行栈空了，执行事件队列，先取出微任务，输出3，最后取出一个宏任务，输出1。

6、for循环中的作用域问题（考察频率：高）

写出以下代码输出值，尝试用es5和es6的方式进行改进输出循环中的i值。

for (var i=1; i<=5; i++) {     setTimeout(function timer() { console.log(i); }, i*1000); }

输出5个6，因为回调函数在for循环之后执行，所有函数共享一个i的引用。

es5:

for (var i=1; i<=5; i++) {     (function(j) {         setTimeout(function timer() { console.log(j); }, j*1000); })(i); }

es6:

for (let i=1; i<=5; i++) {     setTimeout(function timer() { console.log(i); }, i*1000); }

7、闭包的作用（考察频率：中）

闭包的目的是外部函数可以访问内部函数的作用域（局部作用域）。比如访问到内部作用域的变量。

8、原型及原型链（考察频率：中）

参考小册《Web 前端面试指南与高频考题解析》

原型的理解

所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）

所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象

所有的函数，都有一个prototype属性，属性值也是一个普通的对象

所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值

原型链的理解

一段代码如下：

// 构造函数function Foo(name, age) {    this.name = name}Foo.prototype.alertName = function () { alert(this.name) } // 创建示例 var f = new Foo('zhangsan') f.printName = function () { console.log(this.name) } // 测试 f.printName() f.alertName() f.toString()

因为f本身没有toString()，并且f.__proto__（即Foo.prototype）中也没有toString。当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。

如果在f.__proto__中没有找到toString，那么就继续去f.__proto__.__proto__中寻找，因为f.__proto__就是一个普通的对象而已嘛！

f.__proto__即Foo.prototype，没有找到toString，继续往上找 f.__proto__.__proto__即Foo.prototype.__proto__。Foo.prototype就是一个普通的对象，因此Foo.prototype.__proto__就是Object.prototype，在这里可以找到toString。因此f.toString最终对应到了Object.prototype.toString 这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”。如果一直找到最上层都没有找到，那么就宣告失败，返回undefined。最上层是什么 —— Object.prototype.__proto__ === null

9、重绘和回流（考察频率：中）