JS的100道经典面试题（三）只看这四篇就够了，收藏起来以后偷偷看
年轻人你不讲武德，耗子尾汁~~~
总结就是为了形成自己的js知识网，提升自己，加油！
开始干
51、谈性能优化问题
- 代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
- 缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
- 请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
- 请求带宽：压缩文件，开启GZIP，代码层面的优化
- 用hash-table来优化查找，少用全局变量
- 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
- 用setTimeout来避免页面失去响应
- 缓存DOM节点查找的结果
- 避免使用CSS Expression
- 避免全局查询
- 避免使用with(with会创建自己的作用域，会增加作用域链长度)
- 多个变量声明合并
- 避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
- 尽量避免写在HTML标签中写Style属性
51、解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数；Ajax是页面无刷新请求数据操作
52、javascript的本地对象，内置对象和宿主对象
- 本地对象为array obj regexp等可以new实例化
- 内置对象为gload Math 等不可以实例化的
- 宿主为浏览器自带的document,window 等
53、document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
54、==和===的不同
前者会自动转换类型 值判断数值 不判断类型
let a = 12;
let b = '12'
console.log(a==b) //true
后者先比较数值后比较数据类型都一样时才一样
let a = 12;
let b = '12'
console.log(a===b) //false
55、javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
56、Ajax你以前用过么?简单介绍一下
AJAX = 异步 JavaScript 和 XML。 xmlhttprequest
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
57、 Ajax可以做异步请求么?
可以。Ajax请求默认是异步的.如果想同步把async设置为false就可以了默认是true。如果是jquery $.ajax({ url: some.php, async: false, success : function(){ } }); 如果是原生的js xmlHttp.open(“POST”,url,false)。
58、一网站如果有大量的人登陆访问。那么会产生很多的session，如果你是程序员你该怎么办。
session默认保存在内存中，内存资源宝贵，session数据量大导致内存利用率高，以下方案解决session内存存储问题：
（1）可以设置session超时时间，达到超时时间session自动清空
<session-config>
<session-timeout>20</session-timeout>
</session-config>
（2）将session中的数据序列化到硬盘中；
不使用session，使用cookie（此方法存在安全性问题）
59、Ajax如何实现异步定时5秒刷新？
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
60、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式。
方法一：
localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。
标签页1：
1.<input id="name">
2.<input type="button" id="btn" value="提交">
3.<script type="text/javascript">
4. $(function(){
5. $("#btn").click(function(){
6. var name=$("#name").val();
7. localStorage.setItem("name", name);
8. });
9. });
10.</script>
标签页2：
[html] view plain copy
1.<script type="text/javascript">
2. $(function(){
3. window.addEventListener("storage", function(event){
4. console.log(event.key + "=" + event.newValue);
5. });
6. });
7.</script>
方法二：
使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
标签页1：
1.<input id="name">
2.<input type="button" id="btn" value="提交">
3.<script type="text/javascript">
4. $(function(){
5. $("#btn").click(function(){
6. var name=$("#name").val();
7. document.cookie="name="+name;
8. });
9. });
10.</script>
标签页2：
[html] view plain copy
1.<script type="text/javascript">
2. $(function(){
3. function getCookie(key) {
4. return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
5. }
6. setInterval(function(){
7. console.log("name=" + getCookie("name"));
8. }, 10000);
9. });
10.</script>
61、页面可见性（Page Visibility）API 可以有哪些用途？
页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。 因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是…，(把浏览器最小化，所有的页面就都不可见了)。
API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。 不同页面之间来回切换，触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。
document.addEventListener("visibilitychange", function(){
if(document.hidden){
document.title ="hidden";
}else {
document.title = "visibile";
}
})
我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示visiable ,当我们看另一个页面时，标题显示hidden;
动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。
62、JavaScript原型，原型链 ？
- js原型？
js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。
也就是说：当生产一个function对象的时候，就有一个原型prototype。
举个栗子：
是不是还看到了一个_proto_的属性？！骚年，你的眼睛不错~待会在解释prototype和_proto_的基友关系！
prototype的属性值是一个对象，是属性的集合，是属性的集合，是属性的集合，
Js原型链是实现继承的主要方法。其基本思想是：利用原型让一个引用类型继承另一个应用类型的属性和方法。
简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
首先，我觉得有必要先解释一下prototype 和_proto_之间的关系。
每一个基本对象都有自己的_proto_属性，而每一个函数对象都有自己的prototype原型（函数对象也属于基本对象，所以也有_proto_）,每当去定义一个prototype的时候，就相当于把该实例的__proto__指向一个结构体，那么这个被指向结构体就称为该实例的原型。 我们还是来看图吧~比较清晰：
var foo = {
x: 10,
y: 20
};
解析：当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了_proto_的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）。
63、Javascript创建对象的几种方式？
javascript是一种基于prototype的面向对象语言 ，与java有非常大的区别，无法通过类来创建对象。那么，既然是面象对象的，如何来创建对象呢？
一、通过”字面量“方式创建。
方法：将成员信息写到{}中，并赋值给一个变量，此时这个变量就是一个对象。
例如：
var person = (name:'dongjc', work:function() {
console.log('write coding')});
如果{}中为空，则将创建一个空对象：
var person = {
} //创建空对象
演示代码：
<script>
var person = {
name: "dongjc",
age: 32,
Introduce: function () {
alert("My name is " + this.name + ".I'm " + this.age)
}
};
person.Introduce();
</script>
我们还可以给对象丰富成员信息。
对象.成员名称 = 值;
对象[成员名称] = 值;
也可以获取对象的成员信息。
对象.成员名称;
对象[成员名称];
<script type="text/javascript">
var person = {
name: "dongjc",
age: 32,
Introduce: function () {
alert("My name is " + this.name + ".I'm " + this.age); }
};
person.worker = 'coding'; //丰富成员信息
</script>
二、通过”构造函数“方式创建。
方法：
var obj = new 函数名();
这与通过类创建对象有本质的区别。通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象。
<script type="text/javascript"> function Person() {
this.name = "dongjc"; //通过this关键字设置默认成员
var worker = 'coding'; //没有this关键字，对象创建后，该变量为非成员
this.age = 32;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age); }; alert("My name is " + this.name + ".I'm " + this.age);
}; var person = new Person();
person.Introduce();
</script>
此代码一共会两次跳出对话框，原因在于创建对象是自动执行了该函数。
注意：this关键字的使用。这里的this与php中话法意思类似，指调用该函数的对象，这里指的是person。
三、通过object方式创建。
方法：先通过object构造器new一个对象，再往里丰富成员信息。
var obj = new Object();
实例代码：
<script type="text/javascript">
var person = new Object();
person.name = "dongjc";
person.age = 32;
person.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
person.Introduce();
</script>
64、Javascript作用链域?
JavaScript中所有的量都是存在于某一个作用域中的
除了全局作用域, 每一个作用域都是存在於某个作用域中的
在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止
例如
var A;//全局作用域
function B()
{
var C;//C位于B函数的作用域
function D()
{
var E;//E位于D函数的作用域
alert(A)
}
}
当alert(A)时, JS引擎沿着D的作用域, B的作用域, 全局作用域的顺序进行查找.
这三个作用域组成的有序集合就成为作用域链
至于为什么叫链, 你可以理解和链表有相似之处, 深层的作用域会能够访问到上层作用域, 就如同链表中两个连续节点能够单向访问一样
65、什么是window对象? 什么是document对象?
简单来说，document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
所有的全局函数和对象都属于Window 对象的属性和方法。
document 对 Document 对象的只读引用。
[window对象]
它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。
属性
defaultStatus 缺省的状态条消息
document 当前显示的文档(该属性本身也是一个对象)
frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
history 窗口的历史列表(该属性本身也是一个对象)
length 窗口内的框架数
location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location (因为这是当前显示文档的位置)
name 窗口打开时,赋予该窗口的名字
opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
self 当前窗口或框架的同义词
status 状态条中的消息
top 包含当前框架的最顶层浏览器窗口的同义词
window 当前窗口或框架的同义词,与self相同
方法
alert() 打开一个Alert消息框
clearTimeout() 用来终止setTimeout方法的工作
close() 关闭窗口
confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
focus() 把指定的窗口带到前台(另一个新方法)
open() 打开一个新窗口
prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序
Onload() 页面载入时触发
Onunload() 页面关闭时触发
[document 对象]
该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
属性
alinkColor 活动链接的颜色(ALINK)
anchor 一个HTMI锚点,使用标记创建(该属性本身也是一个对象)
anchors array 列出文档锚点对象的数组()(该属性本身也是一个对象)
bgColor 文档的背景颜色(BGCOLOR)
cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
fgColor 文档的文本颜色(标记里的TEXT特性)
form 文档中的一个窗体()(该属性本身也是一个对象)
forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
lastModified 文档最后的修改日期
linkColor 文档的链接的颜色,即标记中的LINK特性(链接到用户没有观察到的文档)
link 文档中的一个标记(该属性本身也是一个对象)
links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
title 文档的标题((TITLE>)
vlinkColor 指向用户已观察过的文档的链接文本颜色,即标记的VLINK特性
方法
clear 清除指定文档的内容
close 关闭文档流
open 打开文档流
write 把文本写入文档
writeln 把文本写入文档,并以换行符结尾
区别:
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
66、写一个通用的事件侦听器函数
1. markyun.Event = {
2. // 页面加载完成后
3. readyEvent : function(fn) {
4. if (fn==null) {
5. fn=document;
6. }
7. var oldonload = window.onload;
8. if (typeof window.onload != 'function') {
9. window.onload = fn;
10. } else {
11. window.onload = function() {
12. oldonload();
13. fn();
14. };
15. }
16. },
17. // 视能力分别使用dom0||dom2||IE方式 来绑定事件
18. // 参数： 操作的元素,事件名称 ,事件处理程序
19. addEvent : function(element, type, handler) {
20. if (element.addEventListener) {
21. //事件类型、需要执行的函数、是否捕捉
22. element.addEventListener(type, handler, false);
23. } else if (element.attachEvent) {
24. element.attachEvent('on' + type, function() {
25. handler.call(element);
26. });
27. } else {
28. element['on' + type] = handler;
29. }
30. },
31. // 移除事件
32. removeEvent : function(element, type, handler) {
33. if (element.removeEnentListener) {
34. element.removeEnentListener(type, handler, false);
35. } else if (element.datachEvent) {
36. element.detachEvent('on' + type, handler);
37. } else {
38. element['on' + type] = null;
39. }
40. },
41. // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
42. stopPropagation : function(ev) {
43. if (ev.stopPropagation) {
44. ev.stopPropagation();
45. } else {
46. ev.cancelBubble = true;
47. }
48. },
49. // 取消事件的默认行为
50. preventDefault : function(event) {
51. if (event.preventDefault) {
52. event.preventDefault();
53. } else {
54. event.returnValue = false;
55. }
56. },
57. // 获取事件目标
58. getTarget : function(event) {
59. return event.target || event.srcElement;
60. },
61. // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
62. getEvent : function(e) {
63. var ev = e || window.event;
64. if (!ev) {
65. var c = this.getEvent.caller;
66. while (c) {
67. ev = c.arguments[0];
68. if (ev && Event == ev.constructor) {
69. break;
70. }
71. c = c.caller;
72. }
73. }
74. return ev;
75. }
76. };
67、[“1”, “2”, “3”].map(parseInt) 答案是多少？
[1,NaN,NaN]
68、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
事件处理机制：IE是事件冒泡、火狐是 事件捕获；
ie：event.cancelBubble = true 或者 return false
火狐: event.stopPropagation() 或者 return false
69、什么是闭包（closure），为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：
（1）函数内再嵌套函数
（2）内部函数可以引用外层的参数和变量
（3）参数和变量不会被垃圾回收机制回收
HTML:
<!-- li节点的onclick事件都能正确的弹出当前被点击的li索引 -->
<ul id="testUL">
<li> index = 0</li>
<li> index = 1</li>
<li> index = 2</li>
<li> index = 3</li>
</ul>
JS:
<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
nodes[i].onclick = (function(i){
return function() {
console.log(i);
} //不用闭包的话，值每次都是4 })(i);
}
</script>
然后我们看看下面的一段代码，这是对闭包作用的非常直白的描述:
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
70、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
除了正常运行模式，ECMAscript 5添加了第二种运行模式：“严格模式”（strict mode）。
顾名思义，这种模式使得Javascript在更严格的条件下运行。
为什么用严格模式
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
进入标志
"use strict";
如何调用
（1）针对单个脚本
<script>
"use strict";
console.log("这是严格模式。");
</script>
（2）针对单个函数
function strict(){
"use strict";
return "这是严格模式。";
}
function notStrict() {
return "这是正常模式。";
}
语法与行为改变
严格模式对Javascript的语法和行为，都做了一些改变。
5.1 全局变量显式声明
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
"use strict";
v = 1; // 报错，v未声明
for(i = 0; i < 2; i++) {
// 报错，i未声明
}
因此，严格模式下，变量都必须先用var命令声明，然后再使用。 禁止this关键字指向全局对象
function f(){
return !this;
}
// 返回false，因为"this"指向全局对象，"!this"就是false
function f(){
"use strict";
return !this;
}
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。
//因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。
function f(){
"use strict";
this.a = 1;
};
f();// 报错，this未定义
禁止删除变量
严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
"use strict";
var x;
delete x; // 语法错误
var o = Object.create(null, {
'x': {
value: 1,
configurable: true
}});
delete o.x; // 删除成功
对象不能有重名的属性
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
"use strict";
var o = {
p: 1,
p: 2
}; // 语法错误
函数不能有重名的参数
正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。
"use strict";
function f(a, a, b) {
// 语法错误
return ;
}
71、如何判断一个对象是否属于某个类？
javascript中检测对象的类型的运算符有：typeof、constructor、instanceof。
typeof：typeof是一个一元运算符，返回结果是一个说明运算数类型的字符串。如：“number”，“string”，“boolean”，“object”，“function”，“undefined”（可用于判断变量是否存在）。 但 typeof 的能力有限，其对于Date、RegExp、Array类型返回的都是"object"。所以它只在区别对象和原始类型的时候才有用。要区一种对象类型和另一种对象类型，必须使用其他的方法。
instanceof 运算符：instanceof 运算符要求其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object 为 null，则返回 false。instanceof方法可以判断变量是否是数组类型，但是只限同一全局环境之内，在一个页面有多个iframe的情况下，instanceof失效。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);
console.log(auto instanceof Car);
// expected output: true
console.log(auto instanceof Object);
// expected output: true
constructor 属性: JavaScript中，每个对象都有一个constructor属性，它引用了初始化该对象的构造函数，常用于判断未知对象的类型。如给定一个求知的值 通过typeof运算符来判断它是原始的值还是对象。如果是对象，就可以使用constructor属性来判断其类型。
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
/输出
This is an Array
</script>
Object.prototype.toString.call()：该方法是目前为止发现的判断一个对象类型的最好的办法。
72、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
74、js延迟加载的方式有哪些？
js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法：
（1）使用setTimeout延迟方法的加载时间
延迟加载js代码，给网页加载留出更多时间
<script type="text/javascript" >
function A(){
$.post("/lord/login",{
name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延迟1秒
})</script>
（2）让js最后加载
例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
（3）上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在