js面试题

1.事件委托

事件委托利用了事件冒泡，将子元素自己的事件交给父亲来处理。(子元素自己不绑定事件也不处理事件，委托给父元素来处理)

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

// good  事件委托
document.querySelector('ul').onclick = (event) => {
  var ev = event || window.event;
  var target = ev.target || ev.srcElement;//IE浏览器
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad  给每一个li绑定事件
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})

2.事件循环

事件循环是一个单线程循环，用于将任务队列中的回调函数(任务)调度入栈。如果调用栈中的任务执行完毕并且任务队列中有对应的回调函数(任务)，则将回调函数出队并推送到调用栈中执行。

宏任务：script setTimeout setInterval setImmediate, I/O, UI rendering。
微任务：process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)

事件循环的任务队列有宏任务队列和微任务队列，每次一个宏任务执行完毕的时候，都会把微任务队列中的微任务执行完毕之后才会再次执行下一个宏任务。

3.什么是Ajax,ajax常用属性和方法

Ajax(asynchronous JavaScript and XML) 是使用js向服务器发送请求的一种异步通信的机制。

Ajax的好处：

1.异步请求，可以不断向服务器发送请求

2.允许我们局部刷新页面

let xmlhttp
if (window.XMLHttpRequest) {
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp = new XMLHttpRequest()
} else {
	// IE6, IE5 浏览器执行代码
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
xmlhttp.onreadystatechange = () => {
	if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
		document.getElementById("myDiv").innerHTML = xmlhttp.responseText
	}
}
xmlhttp.open("GET", "/ajax/test.txt", true)
xmlhttp.send()

Ajax的常用方法

1.open方法：与服务器建立连接
2.send方法：向服务器发送数据
3.onreadystatechange：监听服务器响应的回调
4.responseText/responseXML：获取服务器响应的数据
5.readyState：ajax的状态码，4表示ajax响应已经完成

4.变量提升

用var声明的变化会被自动提升。let和const不会使变量提升。

用var声明的变量会被提升到当前作用域的最前面，只会提升变量的声明，不会提升变量的复制。

如果有函数的声明和变量的声明同名，则函数的提升会在变量的提升之前。

5.多个页面之间如何进行通信

有如下几个方式：

• cookie
• web worker
• localeStorage和sessionStorage
• url传参

6.eval是做什么的

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’);

7.$(document).ready()是个什么函数？为什么要用它

1.$(document).ready()这个函数是用来取代页面中的window.onload; 不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，而document.ready()是在dom准备就绪后执行。因此，使用document.ready()方法的执行速度比onload()的方法要快。

2.如果使用onload，那么页面中只能写一个onload函数，如果写多个，后面的onload会覆盖前面的onload。但是如果使用$(document).ready()，那么我们可以写多个。
8.简述创建函数的几种方式

第一种（函数声明）：
function sum1(num1,num2){
	return num1+num2;
}

第二种（函数表达式）：
var sum2 = function(num1,num2){
	return num1+num2;
}

第三种(匿名函数)：
function(){}:只能自己执行自己

第四种(new Function创建函数)
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

 9.documen.write 和 innerHTML 的区别

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

10.window.location.search 返回的是什么

答：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值。

返回值：?ver=1.0&id=timlq 也就是问号后面的！