JS常问面试题

1. typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别

typeof是一个运算符，用于检测数据的类型，比如基本数据类型 undefined、string、number、boolean，以及引用数据类型object、function，但是对于正则表达式、日期、数组这些引用数据类型及null，它会全部识别为object； instanceof同样也是一个运算符，判断前者是否为后者的实例。它与isPrototypeOf的区别就是它是用来检测构造函数的原型是否存在于指定对象的原型链当中；而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。

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

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
apply：最多只能有两个参数——新this对象和一个数组argArray , 即使只有一个参数，也要写进数组里。
call：它可以接受多个任意参数，第一个参数与apply一样，后面则是一串参数列表。

3.全局函数eval()有什么作用？

eval()只有一个参数，如果传入的参数不是字符串，它直接返回这个参数。如果参数是字符串，它会把字符串当成javascript代码进行编译。如果编译失败则抛出一个语法错误(syntaxError)异常。如果编译成功，则开始执行这段代码，并返回字符串中的最后一个表达式或语句的值，如果最后一个表达式或语句没有值，则最终返回undefined。如果字符串抛出一个异常，这个异常将把该调用传递给eval()。

4.描述以下变量的区别：null，undefined或undeclared

null 表示"没有对象"，即该处不应该有值，转为数值时为0。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
undeclared：js语法错误，没有申明直接使用，js无法找到对应的上下文。

5. == 和 === 有什么区别？

首先，== equality 等同，=== identity 恒等。==，两边值类型不同的时候，要先进行类型转换，再比较。===，不做类型转换，类型不同的一定不等。

先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等：
如果类型不同，就不相等;
如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能用isNaN()来判断）
如果两个都是字符串，每个位置的字符都一样，那么相等；否则不相等。
如果两个值都是true，或者都是false，那么相等。
如果两个值都引用同一个对象或函数，那么相等, 否则不相等。
如果两个值都是null，或者都是undefined，那么相等。

再说 ==，根据以下规则： 如果两个值类型相同，进行 === 比较。 如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
如果一个是null、一个是undefined，那么相等。
如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
任何其他组合，都不相等。

6. 什么是事件代理/事件委托？

事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间。

7.什么是事件冒泡？什么是事件捕获？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，其中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE), 用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

8.如何阻止冒泡？

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。例如： window.event? window.event.cancelBubble = true : e.stopPropagation();
return false也可以阻止冒泡。

9.如何阻止默认事件？

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false，比如：
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
}
return false也能阻止默认行为。

10.简述javascript中this的指向

第一准则是：this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。
• 普通的函数调用，函数被谁调用，this就是谁。
• 构造函数的话，如果不用new操作符而直接调用，那即this指向window。用new操作符生成对象实例后，this就指向了新生成的对象。
• 匿名函数或不处于任何对象中的函数指向window 。
• 如果是call，apply等，指定的this是谁，就是谁。

11.原生对象和宿主对象

原生对象是ECMAScript规定的对象，所有内置对象都是原生对象，比如Array、Date、RegExp等；
宿主对象是宿主环境比如浏览器规定的对象，用于完善是ECMAScript的执行环境，比如Document、Location、Navigator等。

12.基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，有6种，包括null、undefined、string、boolean、number、symbol；
引用数据类型指的是有多个值构成的对象，包括object、array、date、regexp、function等。
主要区别：
• 声明变量时不同的内存分配：前者由于占据的空间大小固定且较小，会被存储在栈当中，也就是变量访问的位置；后者则存储在堆当中，变量访问的其实是一个指针，它指向存储对象的内存地址。
• 也正是因为内存分配不同，在复制变量时也不一样。前者复制后2个变量是独立的，因为是把值拷贝了一份；后者则是复制了一个指针，2个变量指向的值是该指针所指向的内容，一旦一方修改，另一方也会受到影响。
• 参数传递不同：虽然函数的参数都是按值传递的，但是引用值传递的值是一个内存地址，实参和形参指向的是同一个对象，所以函数内部对这个参数的修改会体现在外部。原始值只是把变量里的值传递给参数，之后参数和这个变量互不影响。

13.请尽可能详尽的解释AJAX的工作原理

ajax简单来说是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
ajax的优点
• 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
• 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
• 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求。
• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
• ajax对浏览器后退机制造成了破坏，也就是说用户无法通过浏览器的后退按钮回到前一次操作的页面。虽然有些浏览器解决了这个问题，比如Gmail，但它也并不能改变ajax的机制，它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
• 安全问题。技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。
• 另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
• 一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的。

14.get和post有什么区别？

其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法。底层实现都是基于TCP/IP协议。所谓区别，只是浏览器厂家根据约定，做得限制而已。
• get是通过明文发送数据请求，而post是通过密文；
• get传输的数据量有限，因为url的长度有限，post则不受限；
• get请求的参数只能是ASCII码，所以中文需要URL编码，而post请求传参没有这个限制
• get产生一个TCP数据包；post产生两个TCP数据包。对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于post，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

15.请指出document.onload和document.ready两个事件的区别

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

16.什么是三元表达式？“三元”表示什么意思？

三元表达式：表达式一?表达式二:表达式三。三元 : 三个操作对象。
在表达式boolean-exp ? value0 : value1 中，如果“布尔表达式”的结果为true，就计算“value0”，而且这个计算结果也就是操作符最终产生的值。如果“布尔表达式”的结果为false，就计算“value1”，同样，它的结果也就成为了操作符最终产生的值。

17.请解释一下JavaScript的同源策略

同源策略，即拥有相同的协议（protocol），端口（如果指定），主机（域名）的两个页面是属于同一个源。 然而在IE中比较特殊，IE中没有将端口号加入同源的条件中，因此上图中端口不同那一项，在IE中是算同源的。

18.什么是跨域？有什么方法解决跨域带来的问题？

跨域需要针对浏览器的同源策略来理解，同源策略指的是请求必须是同一个端口，同一个协议，同一个域名，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
受浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
解决方法： jsonp

19.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。
AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

20. 什么是原型?

原型链：简单来讲就是原型组成的链，比如函数的原型是Function，Function的原型是Object，Object的原型仍然是Object，一直追溯到最终的原型对象。
函数通过prototype来追溯原型对象，对象通过_proto_来追溯原型对象。
通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的选择。这时就该用上原型了。
在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。

21. 什么是闭包？使用场景是？

闭包就是能够读取其他函数内部变量的函数，通常是函数嵌套时产生，它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在外部函数调用后被自动清除。

22.如果用户持续点击一个按钮，如何只提交一次请求，且不影响后续使用(节流)？

何为节流 : 触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用，一般用于http请求。
解决原理 : 对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

    function conso(){
          console.log('is run');
    }
    var btnUse=true;
    $("#btn").click(function(){
         if(btnUse){
             conso();
             btnUse=false;
         }
         setTimeout(function(){
             btnUse=true;
         },1500) //点击后相隔多长时间可执行
	})

23.如何防抖？

何为防抖 : 多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行，一般用于scroll事件。
解决原理 : 对处理函数进行延时操作，若设定的延时到来之前再次触发事件，则清除上一次的延时操作定时器，重新定时。

let timer;
window.onscroll  = function () {
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(function () {
        //滚动条位置
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
        timer = undefined;
    },200)
}