JavaScript面试题

• 介绍JavaScript的基本数据类型。－－>［五种基本类型：Number，string，Boolean，Null，Undefinded；一种复杂类型：Object］

• 说说写JavaScript的基本规范？－－>

  1.不要在同一行声明多个变量。
  2.请使用 ===/!==来比较true/false或者数值
  3.使用对象字面量替代new Array这种形式
  4.不要使用全局函数。
  5.Switch语句必须带有default分支
  6.函数不应该有时候有返回值，有时候没有返回值。
  7.For循环必须使用大括号
  8.If语句必须使用大括号
  9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。

• JavaScript原型，原型链 ? 有什么特点？－－>1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。2.每个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
• JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？－－>基本数据类型存储在栈中，引用数据类型（对象）存储在堆中，指针放在栈中。两种类型的区别是：存储位置不同；原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
• Javascript如何实现继承？－－>构造继承，原型继承，（实例继承，拷贝继承）。构造函数继承可以将构造函数的属性拷贝给实例（＊.call(this,[])）。但是缺点是无法实现函数复用。原型继承可以实现函数复用，但是所有实例共享一个属性，任意一个实例改变原型属性都会改变其它实例的属性值。推荐采用构造函数继承传递属性（拷贝），原型继承传递方法.
• Javascript创建对象的几种方式？－－>1.对象字面量的方式p＝｛｝；2.用function来模拟无参的构造函数，再定义属性；3.用function模拟构造函数，利用this；4.利用工厂方式（内置对象Object）；5.利用原型方式来创建；6.混合方式来创建。
• Javascript作用链域?－－>当代码在一个环境中执行时，会创建变量对象的一个作用域链。如果是个函数，则将其活动对象作为变量对象。活动对象在最开始只包含一个arguments对象。而下一个变量对象则来自下一个包含环境。如此一直延续到全局执行环境，这种组织形式即为作用域链。内部函数可访问外部变量，外部变量无法访问内部函数。注意：js没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。
• 谈谈This对象的理解。－－>
  • this总是指向函数的直接调用者（而非间接调用者）；
  • 如果有new关键字，this指向new出来的那个对象；
  • 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
• eval是做什么的？－－>计算某个字符串，并执行其中的的 JavaScript 代码。eval(string)。应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
• 什么是window对象? 什么是document对象?－－>Window对象代表浏览器中打开的一个窗口。document对象代表整个HTML文档。实际上，document对象是window对象的对象属性。
• null，undefined的区别？－－>null表示一个对象被定义了，但存放的是空指针。undefined 表示这个值不存在。typeof（null）－object；typeof（undefined）－undefined。
• ["1", "2", "3"].map(parseInt) 答案是多少？－－> [1,NAN,NAN]
• 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？－－>IE为事件冒泡，Firefox同时支持事件捕获和冒泡事件。但并非所有浏览器都支持事件捕获。jQuery中使用event.stopPropagation()方法可阻止冒泡;（旧ie的方法 ev.cancelBubble = true;）
• 什么是闭包（closure），为什么要用它？－－>闭包指的是一个函数可以访问另一个函数作用域中变量的函数。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的参数和变量；参数和变量不会被垃圾回收机制回收。注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值。除非用立即执行函数来解决。
• javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？－－>use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。目前支持的浏览器为IE10+，Firefox 4+，Safari 5.1+和Chrome。默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;提高编译器效率，增加运行速度；为未来新版本的Javascript标准化做铺垫。
• 如何判断一个对象是否属于某个类？－－>使用instanceof 即if(a instanceof Person){alert('yes');}
• new操作符具体干了什么呢?－－>

  1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。p._proto_ = Base.prototype;
  2、属性和方法被加入到 this 引用的对象中。Base.call(p/this)
  3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

• 用原生JavaScript的实现过什么功能吗？
• Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？－－>Object.hasOwnProperty(proName)
• 对JSON的了解？－－>Js的一个严格子集。一种轻量级的数据交换格式，类似于XML。数据格式简单, 易于读写, 占用带宽小。两个函数：JSON.parse(str)<检查代码 str－－js对象>;JSON.stringify(obj);eval('('＋json＋')')<不会检查代码，会直接执行>
• [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？－－>获取页面中所有的元素，然后遍历每个元素，为元素的style属性增加一个颜色边框。详细参见http://sentsin.com/web/881.html。注：在javascript中，有好几个类似于数组但是并不是数组的对象，除了NodeLists，还有函数的参数集合arguments。
• js延迟加载的方式有哪些？－－>defer和async属性、动态创建DOM方式（用得最多）、按需异步载入js。注：（setTimeOut（js，time））
• Ajax 是什么? 如何创建一个Ajax？－－>ajax的全称：Asynchronous Javascript And XML。所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

  (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象 （考虑IE6的兼容性，new XMLHttpRequest（））;
  (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 （xhr.open("get"),"example.php",true）;
  (3)设置响应HTTP请求状态变化的函数
  (4)发送HTTP请求
  (5)获取异步调用返回的数据
  (6)使用JavaScript和DOM实现局部刷新

• 同步和异步的区别－－>同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

• 如何解决跨域问题?－－>。JSONP,CORS
  
  Ajax注意点：

       HTTP请求过程：1.建立TCP连接。2.Web浏览器向Web服务器发送请求命令。3.Web浏览器发送请求头信息。4.Web服务器应答。5.Web服务器发送应答头信息。6.Web服务器向浏览器发送数据。7.Web服务器关闭TCP连接。

　　 HTTP请求内容：1.HTTP请求的方法或动作。2.正在请求的URL。3.请求头，包含一些客户端环境信息。4.请求体，客户提交的查询字符串信息和表单信息。

　　GET 信息获取，使用URL传递参数，发送信息数量限制在2000字符内。获取的数据存放在cache中。

      POST 信息修改，对发送信息数量无限制。用send(data)，注意头文件setRequestHeader。

        request.onreadystatechange = function(){
                   if(request.readyState ==4){
                            if(request.status == 200){
                                 document.getElementById("searchResult").innerHTML =                                   
                                               request.responseText;
                                               }else{ alert("发生错误："＋request.status);}
                                                                }
                                                                 }

　　HTTP状态码（status）：1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中。

                         2XX：成功，表示用户请求被正确接收，理解和处理。

　　　　　　　　　3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。

　　　　　　　　　4XX：客户端错误，表示客户端提交的请求有错误。

　　　　　　　　　5XX：服务器错误，表示服务器不能完成对请求的处理。

　　readyState属性：0:请求未初始化；1:服务器连接已建立。2:请求已接收。3:请求处理中。4:请求完成。

　　JSON采用键值对来编写。json的长度和xml格式化比起来很短小。json读写的速度更快。json可以用js内建的方法直接解析，转换成js对象。

• 页面编码和被请求的资源编码如果不一致如何处理？－－>若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为charset="utf-8"或"gbk"。

• 模块化开发怎么做？－－>立即执行函数,不暴露私有成员。参考http://blog.chinaunix.net/uid-26672038-id-4112229.html

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？－－>

• requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）－－>谈一谈你对ECMAScript6的了解？ECMAScript6 怎么写class，为什么会出现class这种东西?异步加载的方式有哪些？－－>异步加载的方式有哪些？－－>1.defer（IE）。2.async（HTML5属性）。3.创建script，插入DOM中，加载完毕后callBack。

• DOM操作——怎样添加、移除、移动、复制、创建和查找节点?－－>;createDocumentFragment();createElement();createTextDode();appendChild();removeChild().
• .call() 和 .apply() 的作用和区别？——>这两个方法是属于function.prototype的方法属性。两个函数的目的都是为了借用别人的方法来调用,就像调用自己的一样.二者唯一的区别是调用方法格式不一样。fun.call(this,a,b,c,d)(this为当前对象，是未包含当前fun函数的对象，如此调用之后，this所指对象即拥有了fun函数，a,b,c,d是固有的属性)；而apply（）函数则是fun.call(this,arguments)(this的含义是相同的，关键是第二个参数arguments，这个是函数的固有属性，用来存放参数)。由此可见apply（）用于函数参数不确定的情况下使用。注意，this可替换成别的具体对象。
• ／／穿插一个比较好的博客http://www.feeldesignstudio.com/2015/05/front-end-interview-questions 里面的问题阐述如下：
• 数组和对象有哪些原生方法，列举一下？－－>LIFO 对应的push（）和pull（）；FIFO对应的shift（）和pop（）。重排序reverse（）和sort（）。toString（）。改变原数组的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift()；不改变原数组的方法：concat()、join()、slice()、toString()。

• JS 怎么实现一个类。怎么实例化这个类

• JavaScript中的作用域与变量声明提升？－－>1.全局作用域;2函数作用域（立即执行时）；3:eval作用域；切记无块级作用域。JS代码执行时，所有的变量和函数声明会先声明。1）VO（变量对象）初始化阶段按照如下顺序填充：函数参数（传入，若未传入，则初始化为参数值undefined）；函数声明（若冲突，则覆盖）；变量声明（初始化变量值均为undefined，若发生冲突，会忽略）。var e=function _e()，其中，e会被加入VO对象，而_e不会，所以无法用_e调用函数。即命名函数表达式的名字不可在外面被调用。2）VO赋值阶段，被执行的语句会执行赋指计算。注意，赋值的时候，变量赋值会覆盖已有变量的值。注意以下代码：alert(x);//function var x = 10; alert(x); //10 ;x=20; function x(){} alert(x);//20 if(true){var a=1}else{var b = true}; alert(a);//1  alert(b); //undefined.

• 如何编写高性能的Javascript？－－>阅读完高性能JS回答。

• 那些操作会造成内存泄漏？－－>闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

• JQuery的源码看过吗？能不能简单概况一下它的实现原理？

• jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

• jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

• jquery.extend 与 jquery.fn.extend的区别？－－>jQuery.extend(): 把两个或者更多的对象合并到第一个当中。扩展静态方法；jQuery.fn.extend():把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法。扩展实例方法；jQuery.extend()是直接用$调用，jQuery.fn.extend()是用$()调用，另外jQuery.extend()接收多个对象作为参数，如果只有一个参数，则把这个对象的属性方法附加到jQuery上，如果含有多个参数，则把后面的对象的属性和方法附加到第一个对象上。

• jQuery 的队列是如何实现的？队列可以用在哪些地方？－－>jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

• 谈一下Jquery中的bind(),live(),delegate(),on()的区别？－－>bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

• $("a").bind("click",function(){alert("ok");});

  live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

  $("a").live("click",function(){alert("ok");});

  delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

  $("#container").delegate("a","click",function(){alert("ok");})

  on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

  差别：

  .bind()是直接绑定在元素上

  .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

  .delegate()则是更精确的小范围使用事件代理，性能优于.live()

  .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

• jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）

• 针对 jQuery性能的优化方法？－－>1，总是从ID选择器开始继承;2，在class前使用tag(标签名)<使用一个tag name来限制(修饰)class ;就近的ID修饰>;3，将jQuery对象缓存起来，可以使用jQuery的链式操作加以改善。

• Jquery与jQuery UI有啥区别？

• JQuery一个对象可以同时绑定多个事件，这是如何实现的？

• 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？