JavaScript面试题三千问---下篇

31.IE 的事件处理和 W3C 的事件处理有哪些区别？

绑定事件：

W3C：targetEl.addEventLIstener(‘click’,handler,false);
IE：targetEl.attachEvent(‘onclick’,handler);

删除事件：

W3C：targetEl.removeEventListener(‘click’,handler,false);
IE：targetEl.detachEvent(‘onclick’,handler);

事件对象：

W3C：var e = arguments.callee.caller.arguments[0];
IE：window.evnet;

事件目标：

W3C：e.target;
IE：window.evnet.srcElement;

阻止事件默认行为：

W3C：e.preventDefault();
IE：window.evnet.returnValue = false;

阻止事件传播：

W3C：e.stopPropagation();
IE：window.evnet.cancelBubble = true;

32.事件的 target 与 currentTarget 的区别

target 只会出现在事件流的目标阶段
currentTarget 可能出现在事件流的任何阶段
当事件流处在目标阶段时，二者的指向相同
当事件流处于捕获或冒泡阶段时，currentTarget 指向当前时间活动的对象(一般为父级)

33.如何派发事件(dispatchEvent)？

W3C：使用 dispatchEvent 方法
IE：使用 fireEvent 方法

var fireEvent = function(element, event){if (document.createEventObject){var mockEvent = document.createEventObject();return element.fireEvent('on' + event, mockEvent)}else{var mockEvent = document.createEvent('HTMLEvents');mockEvent.initEvent(event, true, true);return !element.dispatchEvent(mockEvent);}
}

34.什么是函数节流？介绍一下应用场景和原理

函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。只有当上一次函数执行后达到规定的时间间隔，才能进行下一次调用。但要保证一个累计最小调用间隔（否则拖拽类的节流都将无连续效果）
函数节流用于 onresize, onscroll 等短时间内会多次触发的事件
函数节流的原理：使用定时器做时间节流。当触发一个事件时，先用 setTimout 让这个事件延迟一小段时间再执行。如果在这个时间间隔内又触发了事件，就 clearTimeout 原来的定时器，再 setTimeout 一个新的定时器重复以上流程。

函数节流简单实现：

function throttle(method, context) {clearTimeout(methor.tId);method.tId = setTimeout(function(){method.call(context);}， 100); // 两次调用至少间隔 100ms
}
// 调用
window.onresize = function(){throttle(myFunc, window);
}

35.区分什么是"客户区坐标"、“页面坐标”、“屏幕坐标”

客户区坐标：鼠标指针在可视区中的水平坐标(clientX)和垂直坐标(clientY)
相对于浏览器左上角为原点
页面坐标：鼠标指针在页面布局中的水平坐标(pageX)和垂直坐标(pageY)
相对于 Document 对象即文档窗口的左上角为原点
屏幕坐标：设备物理屏幕的水平坐标(screenX)和垂直坐标(screenY)

36.如何获得一个 DOM 元素的绝对位置

elem.offsetLeft：返回元素相对于其定位父级左侧的距离
elem.offsetTop：返回元素相对于其定位父级顶部的距离
elem.getBoundingClientRect()：返回一个 DOMRect 对象，包含一组描述边框的只读属性，单位为像素(px)

37.分析[‘1’,‘2’,‘3’].map(parseInt) 答案是多少

答案：[1,NaN,NaN]
parseInt(string,radix)第二个参数 radix 表示进制。省略 radix 或 radix = 0，则数字将以十进制解析
map每次为 parseInt 传3个参数(elem,index,array)，其中 index 为数组索引
因此，map 遍历[‘1’,‘2’,‘3’]，相应 parseInt 接收参数如下

parseInt('1', 0);  // 1
parseInt('2', 1);  // NaN
parseInt('3', 2);  // NaN

所以，parseInt 参数 radix 不合法，导致返回值为 NaN

38.new 操作符的作用

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

39.解释下面代码的意思

[].forEach.call($$("*"), function(el){el.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
})

解释：获取页面所有的元素，遍历这些元素，为他们添加 1 像素随机颜色的轮廓(outline)

$$(sel) // 次函数被许多现代浏览器命令行支持，等价于 document.querySelectorAll(sel)
[].forEach.call(NodeLists) // 使用 call 函数将数组遍历函数 forEach 应到节点元素列表
el.style.outline = “1px solid #333” // 样式 outline 位于盒模型之外，不影响元素布局位置
Math.random() * (1 << 24) // 表示一个位于 0 到 16777216 之间的随机浮点数
~~Math.random() * (1 << 24) // 作用相当于 parseInt 取整
(~~(Math.random()*(1<<24))).toString(16) // 转换为一个十六进制

40.JavaScript 实现异步编程的方法

回调函数
事件监听
发布/订阅
Promises 对象
Async 函数 [ES7]

41.web 开发中会话跟踪的方法有哪些？

cookie
session
url 重写
隐藏 input
ip 地址

42.什么是闭包（closure），为什么要使用闭包？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链

闭包的特性：

函数内在嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收

43.JavaScript 中的"use strict"是什么意思？

use strict 是一种 ECMAscript 5 添加的（严格）运行模式，这种模式使得 JavaScript 在更严格的条件下运行，使 JS 编码更加规范化，消除 JavaScript 语法的一些不合理、不严谨之处，减少一些怪异行为

44.如何判断一个对象是否属于某个类？

// 使用instanceof （待完善）if(a instanceof Person){alert('yes');}

45.js 延迟加载的方式有哪些？

defer 和 async、动态创建 DOM 方式、按需异步载入 js

46.defer 和 async

defer 并行加载 js 文件，会按照页面上 script 标签的顺序执行
async 并行加载 js 文件，下载完成立即执行，不会按照页面上的 script 标签的顺序执行

47.Ajax 是什么？如何创建一个 Ajax？

ajax 的全称为：Asynchronous Javascript And XML
异步传输+js+XML
所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果他会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验

创建 XMLHttpRequest 对象，也就是创建一个异步调用对象
建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 和验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
用 JavaScript 和 DOM 实现局部刷新

48.同步和异步的区别

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求，等请求完毕，页面刷新，新内容出现，用户看到新内容，进行下一步操作
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完毕，页面不刷新，新内容也会出现，用户看到新内容

49.document.write 和 innerHTML 的区别

document.wirte 只能重绘整个页面
innerHTML 可以重绘页面的一部分

50.DOM 操作怎么添加、删除、移动、复制、创建和查找节点？

创建新节点

createDocumentFragment() // 创建一个 DOM 片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点

添加、替换、删除、插入

appendChild()
replaceChild()
removeChild()
insertBefore() // 在已有的子节点前插入新的子节点

查找

getElementsByTagName() // 通过标签名称查找
getElementsByName() // 通过元素的 Name 属性查找
getElementById() // 通过元素的 id 属性查找

51.哪些操作会造成内存泄漏？

内存泄漏指任何对象在不再拥有或不需要之后仍然存在
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0，或对该对象的唯一引用是循环的，那么该对象的内存即可回收
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）会引起内存泄漏

52.渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容

53.JavaScript 垃圾回收方法

标记清除（mark and sweep）

这是 JavaScript 最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数（reference counting）

在低版本 IE 中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1，如果该变量的值变成了另外一个，则这个值得引用次数减 1，当这个值的引用次数变为 0 的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间

54.介绍几种设计模式

工厂模式：

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是 new 关键字。将所有实例化的代码集中在一个位置防止代码重复
工厂模式解决了重复实例化的问题，但还有一个问题，那就是识别问题，因为根本无法搞清楚他们到底哪个是对象的实例

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();obj.name = name;obj.age = age;obj.profession = profession;obj.move = function () {return this.name + ' at ' + this.age + ' engaged in ' + this.profession;};return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

构造函数模式：

使用构造函数的方法，可以很好地解决上述两个问题，该模式与工厂模式的不同之处在于
构造函数没有显示的创建对象（new Object()）
直接将属性和方法赋值给 this 对象
没有 return 语句

55.闭包的作用？

使用闭包主要是为了设计私有变量和方法。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，增大内存使用量，使用不当很容易会造成内存泄漏。在 js 中，函数即闭包，只有函数才会产生作用域的概念
闭包有三个特性：

函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收

56.什么是 JavaScript 的同源策略？

同源策略是客户端脚本的重要的安全度量标准。它最早出自 Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
指一段脚本只能读取来自同一来源的窗口和文档的属性

57.实现一个函数 clone，可以对 JavaScript 中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制

function deepClone(obj) {if (!isObject(obj)) {throw new Error('obj 不是一个对象！')}let isArray = Array.isArray(obj)let cloneObj = isArray ? [] : {}for (let key in obj) {cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]}return cloneObj
}

注意：for…in 法不支持拷贝 function、date、reg 和 err

// 代理法
function deepClone(obj) {if (!isObject(obj)) {throw new Error('obj 不是一个对象！')}let isArray = Array.isArray(obj)let cloneObj = isArray ? [...obj] : { ...obj }Reflect.ownKeys(cloneObj).forEach(key => {cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]})return cloneObj
}

58.说说严格模式的限制

变量必须先声明在使用
函数的参数不能有同名属性
不能使用 with 语句
不能对只读属性赋值
不能使用前缀 0 表示八进制数
不能删除不可删除的属性
不能删除变量 delete prop，只能删除属性 delete global[prop]
eval 不会在他的外层作用域引入变量
eval 和 arguments 不能被重新赋值
arguments 不会自动反映函数参数的变化
不能使用 arguments.callee
不能使用 arguments.caller
禁止 this 指向全局对象
不能使用 fn.caller 和 fn.arguments 获取函数调用的堆栈
增加了保留字，如：protected、static、interface

59.如何删除一个 cookie？

将时间设为当前时间往前
setDate() 方法用于设置一个月的某一天

var date = new Date();
date.setDate(date.getDate() - 1);//真正的删除

expires 的设置

 document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

60.编写一个求字符串长度的方法

function GetBytes(str){var len = str.length;var bytes = len;for(var i=0; i<len; i++){if (str.charCodeAt(i) > 255) bytes++;}return bytes;}

61.什么是事件代理？

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能

62.attribute 和 property 的区别

attribute 是 dom 元素在文档中作为 html 标签拥有的属性
property 是 dom 元素在 js 中作为对象拥有的属性
对于 html 的标准属性来说，attribute 和 property 是同步的，时会自动更新的
但是对于自定义的属性来说，他们是不同步的

63.页面编码和被请求的资源编码不一致如何处理？

后端响应头设置 charset
前端页面设置 charset

64.把 `<script>` 放在 `</body>` 之前和之后有什么区别？浏览器会如何解析它们？

按照 HTML 标准，在结束后出现<script>或任何元素的开始标签，都是解析错误虽然不符合 HTML 标准，但浏览器会自动容错，使实际效果与写在</body>之前没有区别浏览器的容错机制会忽略<script>之前的，视作<script>仍在 body 体内。省略</body>和</html>闭合标签符合 HTML 标准，服务器可以利用这一标准

65.把 `<script>` 放在 `</head>` 中会有什么问题？

在浏览器渲染页面之前，它需要通过解析HTML标记然后构建DOM树。在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。

还有一点是需要我们注意的，那就是外部引入的脚本(script)会阻塞浏览器的并行下载，HTTP/1.1规范表明，浏览器在每个主机下并行下载的组件不超过两个(也就是说，浏览器一次只能够同时从同一个服务器加载两个脚本)；如果你网站的图片是通过多个服务器提供的，那么按道理来说，你的网站可以一次并行下载多张图片。但是，当我们网站在加载脚本的时候；浏览器不会再启动任何其它的下载，即使这些组件来自不同的服务器。

66.异步加载 JS 的方式有哪些？

设置<script>属性 async = “async”
动态创建 script DOM：document.createElement(‘script’)
XmlHttpRequest 脚本注入
异步加载库 LABjs
模块加载器 Sea.js

67.JavaScript 中，调用函数有哪几种方式？

方法调用模式 Foo.foo(arg1,arg2);
函数调用模式 foo(arg1,arg2);
构造器调用模式 (new Foo())(arg1,arg2);
call/apply 调用模式 Foo.foo.call(that,arg1,arg2);
bind 调用模式 Foo.foo.bind(that)(arg1,arg2)();

68.简单实现 function.bind 函数

if (!Function.prototype.bind) {Function.prototype.bind = function(that) {var func = this, args = arguments;return function() {return func.apply(that, Array.prototype.slice.call(args, 1));}}}// 只支持 bind 阶段的默认参数：func.bind(that, arg1, arg2)();// 不支持以下调用阶段传入的参数：func.bind(that)(arg1, arg2);

69.列举 JavaScript 数组和对象的原生方法

数组：

arr.concat(arr1,arr2,…);
arr.join(",");
arr.sort(fn);
arr.push(e1,e2,en);
arr.shift();
unshift(e1,e2,en);
arr.revarse();
arr.slice(start,end);
arr.splice(index,count,e1,e2,en);
arr.indexOf(el);
arr.includes(el);

对象：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
onject.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);

70.Array.slice() 与 Array.splice() 的区别

slice:

读取数组指定的元素，不会对原数组进行修改
语法：arr.slice(start,end);

splice:

操作数组指定的元素，会修改数组，返回被修改后的数组
语法：arr.splice(index,count,[insert Elements]);
index 是操作的起始位置
count = 0 插入元素，count > 0 删除元素
[insert Element] 向数组插入的新元素

71.JavaScript 对象声明周期

当创建一个对象时，JavaScript 会自动为该对象分配适当的内存
垃圾回收器定期扫描对象，并计算引用了该对象的其他对象的数量
如果被引用数量为 0，或唯一引用是循环的，那么该对象的内存即可回收

72.JavaScript 中，1 和 Number(1) 有什么区别

var a = Number(1) // 1
var b = new Number(1)  // Number {[[PrimitiveValue]]: 1}
typeof (a) // number
typeof (b) // object
a == b // true

var a = 1 是一个常量，而 Number(1) 是一个函数
new Number(1) 返回的是一个对象
a == b 为 true 是因为在求值过程中，总是会强制转为原始数据类型，例如下面的代码：

typeof 123 // "number"
typeof new Number(123) // "object"
123 instanceof Number // false
(new Number(123)) instanceof Number // true
123 === new Number(123) // false

73.console.log(!!(new Bollean(false))) 输出什么

true

布尔的包装对象 Boolean 的对象实例，对象只有在 null 与 undefined 时，才会认定为布尔的 false 值，布尔包装对象本身是个对象，对象->布尔都是 true，所以 new Boolean(false)其实是布尔的 true，看下面这段代码:

if(new Boolean(false)){alert('true!!');
}

只有使用了 valueOf 后才是真正的转换布尔值，与上面包装对象与原始资料转换说明的相同:

!!(new Boolean(false))  //true
(new Boolean(false)).valueOf() //false

74.为什么 JS 是单线程而不是多线程？

单线程是指 JavaScript 在执行的时候，有且只有一个主线程来处理所有的任务
目的是为了实现与浏览器交互
我们设想一下，如果 JavaScript 是多线程的，现在我们在浏览器中同时操作一个 DOM，一个线程要求浏览器在这个 DOM 中添加节点，而另一个线程却要求浏览器删掉这个 DOM 节点，那这个时候浏览器就会很郁闷，他不知道应该以哪个线程为准。所以为了避免此类现象的发生，降低复杂度，JavaScript 选择只用一个主线程来执行代码，以此来保证程序执行的一致性。

75.浏览器中的 Event Loop

主线程运行的时候会生成堆（heap）和栈（stack）
js 从上到下解析方法，将其中的同步任务按照执行顺序排列到执行栈中
当程序调用外部的 API 时，比如 ajax、setTimeout 等，会将此类异步任务挂起，继续执行执行栈中的任务，等异步任务返回结果后，再按照执行顺序排列到事件队列中
主线程先将执行栈中的同步任务清空，然后检查事件队列中是否有任务，如果有，就将第一个事件对应的回调推到执行栈中执行，若在执行过程中遇到异步任务，则继续将这个异步任务排列到事件队列中
主线程每次将执行栈清空后，就去事件队列中检查是否有任务，如果有，就每次取出一个推到执行栈中执行，这个过程是循环往复的… …，这个过程被称为“Event Loop 事件循环”