JavaScript常见面试题

1谈谈This对象的理解

• this总是指向函数的直接调用者（而非间接调用者）
• 如果有new关键字，this指向new出来的那个对象
• 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window

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

• 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
• 属性和方法被加入到 this 引用的对象中
• 新创建的对象由 this 所引用，并且最后隐式的返回 this

3 XML和JSON的区别？

数据体积方面

JSON相对于XML来讲，数据的体积小，传递的速度更快些。

数据交互方面

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

数据描述方面

JSON对数据的描述性比XML较差

传输速度方面

JSON的速度要远远快于XML

4 用过哪些设计模式？

工厂模式：

工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字

构造函数模式

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于

直接将属性和方法赋值给 this对象;

5 vue、react、angular

Vue.js 一个用于创建 web 交互界面的库，是一个精简的 MVVM。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters

AngularJS 是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富的 Angular指令

react React 仅仅是 VIEW 层是facebook公司。推出的一个用于构建UI的一个库，能够实现服务器端的渲染。用了virtual dom，所以性能很好。

6 Node的应用场景

特点：

1、它是一个Javascript运行环境

2、依赖于Chrome V8引擎进行代码解释

3、事件驱动

4、非阻塞I/O

5、单进程，单线程

优点：

高并发（最重要的优点）

缺点：

1、只支持单核CPU，不能充分利用CPU

2、可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

7 JS的基本数据类型和引用数据类型

• 基本数据类型：undefined、null、boolean、number、string、symbol
• 引用数据类型：object、array、function

8 介绍js有哪些内置对象

• Object 是 JavaScript 中所有对象的父对象
• 数据封装类对象：Object、Array、Boolean、Number 和 String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error

9 JavaScript有几种类型的值

• 栈：原始数据类型（Undefined，Null，Boolean，Number、String）
• 堆：引用数据类型（对象、数组和函数）
• 两种类型的区别是：存储位置不同；
• 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
• 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
• 在栈中的地址，取得地址后从堆中获得实体

10 null，undefined 的区别

undefined 表示不存在这个值。

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined

例如变量被声明了，但没有赋值时，就等于undefined

null 表示一个对象被定义了，值为“空值”

null : 是一个对象(空对象, 没有任何属性和方法)

例如作为函数的参数，表示该函数的参数不是对象；

在验证null时，一定要使用　=== ，因为 ==无法分别null 和　undefined

11 JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

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

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');var obj = str.parseJSON();var obj = JSON.parse(str);

• JSON对象转换为JSON字符串：

var last=obj.toJSONString();

var last=JSON.stringify(obj);

12 谈一谈let与var的区别

• let命令不存在变量提升，如果在let前使用，会导致报错
• 如果块区中存在let和const命令，就会形成封闭作用域
• 不允许重复声明，因此，不能在函数内部重新声明参数

13 希望获取到页面中所有的checkbox怎么做？

不使用第三方框架

 var domList = document.getElementsByTagName(‘input’)

 var checkBoxList = [];

 var len = domList.length; //缓存到局部变量

 while (len--) { //使用while的效率会比for循环更高

  if (domList[len].type == ‘checkbox’) {

      checkBoxList.push(domList[len]);

  }

 }

14 window.onload和$(document).ready

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

• window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕

function ready(fn){

      if(document.addEventListener) {        //标准浏览器

          document.addEventListener('DOMContentLoaded', function() {

              //注销事件, 避免反复触发

              document.removeEventListener('DOMContentLoaded',arguments.callee, false);

              fn();            //执行函数

          }, false);

      }else if(document.attachEvent) {        //IE

          document.attachEvent('onreadystatechange', function() {

             if(document.readyState == 'complete') {

                 document.detachEvent('onreadystatechange', arguments.callee);

                 fn();        //函数执行

             }

         });

     }

 };

15 addEventListener()和attachEvent()的区别

• addEventListener()是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法
• addEventListener()支持事件冒泡和事件捕获; - 而attachEvent()只支持事件冒泡
• addEventListener()的第一个参数中,事件类型不需要添加on; attachEvent()需要添加'on'
• 如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行, attachEvent()会按照事件绑定的顺序倒序执行

16 获取页面所有的checkbox

var resultArr= [];

var input = document.querySelectorAll('input');

for( var i = 0; i < input.length; i++ ) {

    if( input[i].type == 'checkbox' ) {

        resultArr.push( input[i] );

    }}//resultArr即中获取到了页面中的所有checkbox

17 怎么判断两个对象相等？

obj={

    a:1,

    b:2}

obj2={

    a:1,

    b:2}

obj3={

    a:1,

    b:'2'}

可以转换为字符串来判断

JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false

19 项目做过哪些性能优化？

• 减少 HTTP 请求数
• 减少 DNS 查询
• 使用 CDN
• 避免重定向
• 图片懒加载
• 减少 DOM 元素数量
• 减少DOM 操作
• 使用外部 JavaScript 和 CSS
• 压缩 JavaScript 、 CSS 、字体、图片等
• 优化 CSS Sprite
• 使用 iconfont
• 字体裁剪
• 多域名分发划分内容到不同域名
• 尽量减少 iframe 使用
• 避免图片 src 为空
• 把样式表放在link 中
• 把JavaScript放在页面底部

20 介绍JS有哪些内置对象

• 数据封装类对象：Object、Array、Boolean、Number、String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error
• ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

1jQuery 中的 bind(), live(), delegate(), on()的区别

• bind() 直接绑定在目标元素上
• live() 通过冒泡传播事件，默认document上，支持动态数据
• delegate() 更精确的小范围使用事件代理，性能优于 live
• on() 是最新的1.9版本整合了之前的三种方式的新事件绑定机制

2 针对 jQuery 的优化方法

• 缓存频繁操作DOM对象
• 尽量使用id选择器代替class选择器
• 总是从#id选择器来继承
• 尽量使用链式操作
• 使用时间委托 on绑定事件
• 采用jQuery的内部函数data()来存储数据
• 使用最新版本的 jQuery

3 jQuery 与 jQuery UI、jQuery Mobile 区别

jQuery 是 JS 库，兼容各种PC浏览器，主要用作更方便地处理 DOM、事件、动画、AJAX

jQuery UI 是建立在 jQuery 库上的一组用户界面交互、特效、小部件及主题

jQuery Mobile 以 jQuery 为基础，用于创建“移动Web应用”的框架

4 jQuery对象的特点

• 只有 JQuery对象才能使用 JQuery 方法
• JQuery 对象是一个数组对象