前端面试常问的基础性问题整理

面试官：谈谈你对this的理解

求职者：this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写。例如： this.alert() <=> window.alert()<=> alert(); 在全局作用域下直接调用函数，this指向window 对象函数调用，哪个对象调用就指向哪个对象 使用 new 实例化对象，在构造函数中的this指向实例化对象。 

面试官：那如何改变this指向呢？

求职者： 可使用call或apply改变this的指向 用于区分全局变量和局部变量，需要使用this

面试官：apply、call、bind区别和用法有哪些？

求职者：apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向。this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来。

bind（）也是改变函数体内this的指向;bind会创建一个新函数，称为绑定函数

bind与apply、call最大的区别就是：bind不会立即调用，其他两个会立即调用

面试官：new 操作符具体干了什么（手写代码）？

求职者：new共经历了四个过程。

var fn = function () { };
var fnObj = new fn();复制代码

1、创建了一个空对象

var obj = new object();复制代码

2、设置原型链

obj._proto_ = fn.prototype;复制代码

3、让fn的this指向obj，并执行fn的函数体

var result = fn.call(obj);复制代码

4、判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
}  复制代码

面试官：原型是什么？

求职者：在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

面试官：那原型链是什么？

求职者：JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

面试官：什么是闭包，为什么要用它（手写代码）？

求职者：我个人理解，闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。

    function  outer(){  
        var num=0;//内部变量  
       return  function add(){//通过return返回add函数，就可以在outer函数外访问了。  
            num++;//内部函数有引用，作为add函数的一部分了  
           console.log(num);  
        };  
    }  
    var func1=outer();//  
    func1();//实际上是调用add函数， 输出1  
    func1();//输出2  
    var func2=outer();  
    func2();// 输出1  
    func2();// 输出2  复制代码

闭包的作用

1.使用闭包可以访问函数中的变量。

2.可以使变量长期保存在内存中，生命周期比较长。

加分项

闭包不能滥用，否则会导致内存泄露，影响网页的性能。闭包使用完了后，要立即释放资源，将引用变量指向null。

面试官：事件是什么？如何阻止事件冒泡？

事件是什么？ 事件用于监听浏览器的操作行为，浏览器触发动作时被捕捉到而调用相应的函数。

事件执行三个阶段：

① 事件捕获阶段

② 处于目标阶段
③ 事件冒泡阶段
捕获型事件是自上而下，而冒泡型事件是自下而上的，而我们程序员通常要做的就是第二阶段，完成事件的动作。而第一、三阶段由系统封装自动调用完成。

冒泡阻止
event.stopPropagation()
IE浏览器
event.cancelBubble = true; 

面试官：对http请求有几部分组成

求职者：http请求由三部分组成，分别是：请求行、消息报头、请求正文

http响应请求由三大部分组成，分别是：状态行、消息报头、响应正文

面试官：post和get有什么区别

求职者：

GET 请求的 URL 中发送的，POST 请求的 HTTP 消息主体中发送的

GET能被缓存，POST不能缓存 。

GET后退按钮/刷新无害，POST数据会被重新提交

GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中

面试官：CSS3有哪些新特性

求职者：

1.CSS3的选择器

 2. @Font-face 特性 

3. 圆角 

4. 多列布局 （multi-column layout）

 5.阴影（Shadow） 

 6.CSS3 的渐变效果

 7.css弹性盒子模型 

8. CSS3制作特效 

9. Animation动画特效

10. Transforms 2D转换效果

11. Transition 对象变换时的过渡效果 ：

 transition-property 对象参与过渡的属性 

 transition-duration 过渡的持续时间 

 transition-timing-function 过渡的类型 

 transition-delay 延迟过渡的时间

面试官：cookies，sessionStorage 和localStorage区别是什么？

求职者：

相同点：都存储在客户端

 不同点： 

1. 存储大小 cookie数据大小不能超过4k。 

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

 2. 有效时间 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 

3.  数据与服务器之间的交互方式 cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

面试官：移动端rem和em区别是什么？

求职者：rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。

面试官：如何用rem自适应不同分辨率的手机？

求职者：使用rem布局的时候,为了兼容不同的分辨率,应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果

一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size

面试官：页面优化有哪些方法

求职者：

1. 尽量减少 HTTP 请求

2. 对图片压缩、cdn存储和缓存

3. 减少对DOM的操作

4. 对域名进行预解析

5.  预载入组件或延迟载入组件

6. 脚本放到 HTML 代码页底部

7. 使用工具压缩JavaScript和CSS文件

8. 使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。