前端面试题（三）—-JS
JS相关问题
1.谈一谈JavaScript作用域链
当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。
作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。
2.如何理解JavaScript原型链
JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。
原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。
当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined
3.JavaScript如何实现继承？
构造继承
原型继承
实例继承
拷贝继承
原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性4.JavaScript的typeof返回哪些数据类型
Ｏbject number function boolean underfind;
5.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）隐式（== – ===）；
6.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
7.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
8.IE和DOM事件流的区别
执行顺序不一样、
参数不一样
事件加不加on
this指向问题
9.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
10.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
11.ajax请求时，如何解释json数据
使用eval parse,鉴于安全性考虑 使用parse更靠谱;
12.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
13.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包
闭包就是能够读取其他函数内部变量的函数。
14.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
15..”==”和“===”的不同
前者会自动转换类型，后者不会
16.编写一个b继承a的方法
function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name); //相当于new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}17.如何阻止事件冒泡和默认事件
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
return false18.下面程序执行后弹出什么样的结果?
function fn() {
this.a = 0;
this.b = function() {
alert(this.a)
}
}
fn.prototype = {
b: function() {
this.a = 20;
alert(this.a);
},
c: function() {
this.a = 30;
alert(this.a);
}
}
var myfn = new fn();
myfn.b();
myfn.c();19.谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
20.下面程序的结果
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);
//答案：`这里写代码片`
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,121.下面程序的输出结果
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();22.了解Node么？Node的使用场景都有哪些？
高并发、聊天、实时消息推送
23.介绍下你最常用的一款框架
jquery,rn,angular等;
24.对于前端自动化构建工具有了解吗？简单介绍一下
Gulp,Grunt等；
25.说一下什么是JavaScript的同源策略？
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
代码相关的问题
1.说说最近最流行的一些东西吧？常去哪些网站？
Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等
2.如果今年你打算熟练掌握一项新技术，那会是什么
via开发单页webapp的技术。
SAP能够是页面与页面之间无缝连接，避免出现白页，且带有动态效果，提高用户体验。同时SAP，有JavaScript渲染页面，然后在从服务器获取小量的数据显示，如此反复，请求的数据无需要服务器处理，减少服务器负荷。
SAP对技术要求高。要考虑首屏加载事件过长；动画效果要考虑低端手机；垃圾收集，需要自己释放资源，避免页面变卡。
其他
1.HTTP状态码知道哪些？
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
2.你有哪些性能优化的方法？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
3.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
4.哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
5.线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
.编写一个数组去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}构造函数，也就是创建自定义对象的函数。
HTML5中加入了localstorage特性，用于作为本地存储来使用，解决了cookie存储空间不足的问题。localstorage会可以将第一次请求的数据直接存储到本地。相当于一个5m大小的针对于前端的数据库。相比于cookie可以节约带宽。但是这个却是只有在高版本的浏览器中才支持的。局限性：浏览器不统一。ie8以上支持。目前所有浏览器都会把localstorage值类型限定为string类型。对常见的json对象类型要进行转换。在浏览器隐私模式下不可读取。本质是对字符串的读取，如果存储内容过多的话会消耗内存空间。会导致页面变卡。localstorage不能被爬虫抓到。属于永久性存储。sessionstorage属于当会话结束后其中的键值对会被清空。
-需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。
• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）
将数据存到 session中，管你前进后退还是刷新，数据依然在，关闭窗口后再进页面才会清空数据
再理一下实现思路，①页面滚动，将滚动位置存到session中 → ②再次进到页面中，到session中取出上次保存的浏览位置 → ③滚动到对应位置