JavaScript面试题----基础篇

	**前面Lie编写了关于前端css的面试题，那么在HTML中除了css以外，还存在JavaScript今天Lie就为大家带来关于JavaScript 的面试题。**

一、JavaScript 的 typeof 返回哪些数据类型？
分析：
这道题检验的是 JS 基本功， JS 基础课程里就有讲，只要对 typeof 运算符是了解的，就没有太大难度。具体在回答的时候，再结合理论知识和编码过程中实际情况进行回答即可
建议回复：
首先，JavaScript 中一共有两大数据类型：

1. 基础类型
2. 引用类型
   • 基础类型包括：Number、String、Boolean、Null、Undefined、
   • 引用类型包括：Object typeof 运算符把类型信息以字符串形式返回，需要注意的是 typeof 返回的类型和 JavaScript 定义的类型有细微的差异。 typeof 返回七种可能的值：“number”、“string”、“boolean”、“object”、“function”和“undefined”。

---

二、请写出以下运算结果：
alert(typeof null);
alert(typeof undefined);
alert(typeof NaN);
alert(NaN == undefined);
alert(NaN == NaN);
var str = “123abc”;
alert(typeof str++);
alert(str);
分析：
这道题与“题目一”是连环扣，当“题目一”回答完后，通过此题再一次强化运算符和数据类型的基本功。
建议回复：
本题主要是考察 typeof 判断值的类型，它们输出的结果依次是：
alert(typeof null); // object
alert(typeof undefined); // undefined
alert(typeof NaN); // number
alert(NaN == undefined); // false
alert(NaN == NaN); // false
var str = “123abc”;
alert(typeof str++); // number
alert(str); // NaN

---

三、例举至少 3 种强制类型转换和 2 种隐式类型转换?
分析：
类型转换听起来可能有点宽泛，但这道题明确给出了回答的范围~
建议回复：

1. 强制类型转换： 明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat
2. 隐式类型转换： 在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有：+、–、==、!

---

四、JavaScript 的事件流模型都有什么？
建议回复：
事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的 window 对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）

事件流包含三个阶段：
• 事件捕捉阶段
• 处于目标阶段
• 事件冒泡阶段

1. 事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；
2. 处于目标阶段：处在绑定事件的元素上；
3. 事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

---

五、BOM 对象有哪些，列举 window 对象？
分析：
建议回复：

1. window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2. location 对象，浏览器当前URL信息；
3. navigator 对象，浏览器本身信息；
4. screen 对象，客户端屏幕信息；
5. history 对象，浏览器访问历史信息；

---

六、请简述 AJAX 及基本步骤？
分析：
。对于这种纯概念题，建议面试前再写一遍原生 AJAX 函数的封装过程，一定要在理解的基础上去背，才会在面试时有良好发挥。
建议回复：
• 简述 AJAX：AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX 基本步骤：

1. 初始化ajax对象
2. 连接地址，准备数据
3. 发送请求
4. 接收数据（正在接收，尚未完成）
5. 接收数据完成
   //初始化ajax对象
   var xhr = new XMLHttpRequest();
   //连接地址，准备数据
   xhr.open(“方式”,”地址”,是否为异步);
   //接收数据完成触发的事件
   xhr.onload =function(){}
   //发送数据
   xhr.send();

---

七、HTTP 状态消息 200 302 304 403 404 500 分别表示什么？
分析：
外一在面试时考官不仅仅只是让你背诵、而是给你一个场景让你做问答题呢？——所以，“带着理解去记忆” 是对付概念题最好的法宝，此外多看看延展的知识点，也是有益无害。
建议回复：

1. 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
2. 302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。
3. 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
4. 403：服务器已经理解请求，但是拒绝执行它。
5. 404：请求失败，请求所希望得到的资源未被在服务器上发现。
6. 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

---

八、同步和异步的区别?
分析：
概念题
建议回复：
• 首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后，如何进行处理、或者说关注的是一种消息通信机制。
• 同步的情况下，是由处理消息者自己去等待消息是否被触发；
• 而异步的情况下是由触发机制来通知处理消息者；
举例： 比如你问老师一个问题，这个问题可能需要花费一点时间去思考，这个时候老师可能：

1. 思考，思考……，好了，有答案了；
2. 这个问题需要一点时间，你先做点别的，等我想好了，去找你。
   第一种就是同步，第二种就是异步。所以同步异步可以说是对被请求方来说的，被请求者使用什么方式来告知处理结果。
   • 阻塞非阻塞，主要是对于请求者而言的。
   • 阻塞：发出请求等待结果返回，然后再处理后续的事情；
   • 非阻塞：发出请求不等待结果返回，可以接着做后续的事情；
   举例，还是上一个例子：
3. 老师在使用同步思考的时候，你可以静静的等待老师给出答案，也可以边做自己的事情边等待老师的回答，当然这时候你需要时刻去关注老师是否已经想好了，在程序中需要进行轮询了。
4. 老师使用异步的方式，这个时候老师告诉你可以先去做别的，好了就通知你，那么你可以去做点别的，然后监听事件就行，当然你也可以很轴，我就不做别的！我要一直等着老师“想好了”的事件发生。
   所以同步可以是阻塞的也可以是非阻塞的，异步也是如此。

---

九、GET和POST的区别，何时使用POST？
分析：
像是数据交互类的概念题在面试时被问到的机率之多，也反应出它在工作中的实用价值。所以没别的，好好学吧，好好背！
建议回复：
GET和POST的区别：
GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。
POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。
在以下情况中，请使用 POST 请求：

1. 以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
2. 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
3. 向服务器发送大量数据（数据大小限制区别）；
4. 上传文件图片时（数据类型区别）；

---

十、 AJAX 的局限性?

建议回复：

1. AJAX 不支持浏览器 back 按钮。
2. 安全问题 AJAX 暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操作你的网页源代码；
4. 跨域请求有一定限制。解决方式：jsonp；

---

十一、new 操作符具体干了什么呢?
分析：
原理概念题
建议回复：
当使用 new 操作符调用构造函数，函数实际会经历如下步骤：

1. 创建一个新对象；
2. 把函数中上下文（作用域）对象this指向该对象；
3. 执行代码，通过this给新对象添加属性或方法；
4. 返回对象；

---

十二、null 和 undefined 的区别？
分析：
经典的概念题，要回答好的确需要功底扎实。
建议回复：
•
null： null表示空值，转为数值时为0；
•
•
undefined：undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
•

1. 变量被声明了，但没有赋值时，就等于undefined。
2. 对象没有赋值的属性，该属性的值为undefined。
3. 函数没有返回值时，默认返回undefined。

---

十三、JavaScript 原型，原型链 ? 有什么特点？
分析：
建议回复：
JavaScript 原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。
原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

---

十四、实现对数组进行乱序
分析：
这道题检验了数组的 sort() 方法，因为是乱序，所以还需要用到 Math.random() 产生随机数，课上案例随机排了照片墙有提及。
建议回复：
在写代码前，先把实现原理介绍一下，然后再开始写代码：
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sign = 1;
a.sort(function(a, b) {
return Math.random() - 0.5
});

---

十五、什么是闭包，闭包有优势和弊端。
什么是闭包
闭包是在父子函数嵌套时，子函数能访问父函数中的变量，父函数不能访问子涵数中的变量。
闭包的好处有两点：
一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
使用闭包的注意点：
• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
十五、call和.apply的区别是什么？
call方法:
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 this指向。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 对于apply和call两者在作用上是相同的，但两者在参数上有以下
区别：
对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call方法的参数传递方法如下 func.call(func1,var1,var2,var3)
对应的apply写法为：func.apply(func1,[var1,var2,var3])；
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。
十六、= = 和 = = =有什么不同？
== 只做值的判断 === 值和类型都要进行判断
十七、内存泄露的几种情况:
(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
解决方法如下：

(2)、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。 解决方法如下： function bindEvent(){ var obj=document.createElement("XXX"); obj.οnclick=function(){ //Even if it's a empty function } obj=null; }

十八、document load 和document ready的区别
document.onload 是在结构和样式,外部js以及图片加载完才执行js
document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)

十九、事件委托是什么？
利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！如何阻止事件冒泡ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
如何阻止默认事件
return false；(2) ev.preventDefault()
二十、解释下JavaScript中this是如何工作的?
this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。
1.如果是call，apply,with，指定的this是谁，就是谁。
2.普通的函数调用，函数被谁调用，this就是谁。
二十一、JavaScript中如何检测一个变量是一个String类型
1、Object.prototype.toString.call(str)
2、typeof str
3、str instanceof String 返回true/false
二十二、跨域请求资源的方法，请解释JSONP的工作原理以及它为什么不是真正的AJAX
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。JSONP方式无法发送post请求，AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

	**JavaScript 的面试题比css的面试题难度更大，但这只是一些基础，希望各位小主能够认真了解，Lie就先行告退咯。**