前端面试题总结-Javascript

1.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

2.JavaScript原型，原型链

虽然可以通过对象实例访问并修改保存在原型中的值，但却不能通过对象实例重写原型中的值。这样做会相当于在实例上创建了一个属性。

3.js的基本数据类型。

number,string,boolean,object,undefined

4.["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。

5.This对象

• this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
• 但是有一个总原则，那就是this指的是调用函数的那个对象。
• this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

6.事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
3. 功能:停止事件冒泡
       function stopBubble(e) {
           //如果提供了事件对象，则这是一个非IE浏览器
           if ( e && e.stopPropagation )
               //因此它支持W3C的stopPropagation()方法
               e.stopPropagation();
           else
               //否则，我们需要使用IE的方式来取消事件冒泡
               window.event.cancelBubble = true;
       }

7.什么是闭包（closure），为什么要用它？

• 在函数内部创建函数，并使用函数内部的变量就是闭包
• 变量的闭包:闭包的用处，如果构造函数中使用回调，并在内部调用this可以通过闭包
• var that = this;
• 函数的闭包:
• 可以返回函数
• 使用闭包会提升变量级别，并且不会在函数结束后自动清除，为避免内存溢出要手动清除

8."use strict";是什么意思 ? 使用它的好处和坏处分别是什么？

严格模式，使得书写规范，但是各浏览器严格程度不一样,node推荐使用,前端不推荐

9.如何判断一个对象是否属于某个类？

使用instanceof

10.new操作符具体干了什么呢?

• 1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

•    var obj  = {};
      obj.__proto__ = Base.prototype;

• 2、属性和方法被加入到 this 引用的对象中。

•    Base.call(obj);

• 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

11.Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

12.JSON

是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

13.js延迟加载的方式有哪些？

• defer和async
• 动态创建DOM方式（用得最多）
• 按需异步载入js(AMD,CMD)

14.模块化怎么做

立即执行函数,不暴露私有成员

15.AMD—require.js

详见此处

16.documen.write和 innerHTML的区别

• document.write只能重绘整个页面
• innerHTML可以重绘页面的一部分

17.call() 和 apply() 的区别

• call接受多个参数
• apply接受两个参数，第二个参数为数组
• 当调用一个函数时，可以赋值一个不同的 this 对象。this 引用当前对象，即 call 方法的第一个参数。

18.针对query的优化

1. 基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
2. 频繁操作的DOM，先缓存起来再操作。或者用Jquery的链式调用更好。

   var str=$("a").attr("href");

1. for (var i = size, length = arr.length; i < length; i++) {} 比 for (var i = size; i < arr.length; i++) {} 好

19.JavaScript中的作用域与变量声明提升

1. 在函数内是作用域
2. 函数内变量声明var则使用上一级变量，并依次向上查询，如果没有，此变量则为全局变量
3. setTimeout方法使用的this为全局变量
4. 将javascript中函数下面声明的变量提升到函数开头就是变量声明提升，最常见的就是函数

20.内存泄漏

• 消除声明的变量（不要使用delete）

•    var o = { x: 1 };
      o = null;

• 全局变量不会被回收，尽量不使用
• 如果使用的数据缓存在本地，确保清理一下缓存或使用老化机制，以避免大量不被重用的数据被存储。
• 确保解绑那些不再需要的事件监听器，尤其是那些即将被销毁的DOM对象所绑定的事件监听器。
• 闭包如果不及时清理会造成内存泄漏

21.如何编写高性能的Javascript

• 注意内存泄漏
• 可读性，继承模型和可维护性比性能更重要
• 雅虎14条军规:http://segmentfault.com/blog/trigkit4/1190000000656717
• 1. 启用Gzip压缩
  2. 减少HTTP请求数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
  3. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
  4. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
  5. 当需要设置的样式很多时设置className而不是直接操作style。
  6. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  7. 避免使用css表达式
  8. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
  9. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

22.如何判断当前脚本运行在浏览器还是node环境中？

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中