近年来，从事web前端开发的程序员越来越多，都需要使用JavaScript，这篇文章主要整理一些最常见的javascript面试题以及答案。

介绍JavaScript的数据类型

function A() {}
let a = new A();
a instanceof A     //true,因为 Object.getPrototypeOf(a) === A.prototype;

Object.prototype.toString.call(null)//"[object Null]"
Object.prototype.toString.call(undefined)//"[object Undefined]"
Object.prototype.toString.call(Object)//"[object Function]"

(function(x, y){
    alert(x + y);  
})(2, 3);

hoisted(); // logs "foo"
function hoisted() {
  console.log('foo');
}

notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
   console.log('bar');
};

console.log([] == []) // false
console.log([] == ![]) // true
console.log([] !== [])  // true
console.log(NaN != NaN) // true
console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(1 == true) // true
console.log(null > 0) // false
console.log(true + 1) // 2
console.log(undefined + 1) // NaN
console.log({} + 1) // [object Object]1
console.log([] + {}) // [object Object]
console.log([2,3] + [1,2])  // 2,31,2

window.event.cancelBubble = true；
e.stopPropagation();

function stopDefault( e ) { 
 if ( e && e.preventDefault )         
   e.preventDefault(); //IE中阻止函数器默认动作的方式  
 else          
   window.event.returnValue = false; 
}

var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)
function fn1 () {
  console.log('我是方法1')  
}
function fn2 () {
  console.log('我是方法2')  
}

闭包的概念：闭包就是能读取其他函数内部变量的函数。

1. 避免全局变量的污染
2. 希望一个变量长期存储在内存中（缓存变量）

缺点：

1. 内存泄露（消耗）
2. 常驻内存，增加内存使用量

使用场景：封装功能时(需要使用私有的属性和方法)，函数防抖、函数节流、函数柯里化、给元素伪数组添加事件需要使用元素的索引值。

造成内存泄露的原因

new操作符具体干了什么呢?

1) 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2) 属性和方法被加入到 this 引用的对象中。

3) 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

javascript中this的指向

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。

普通的函数调用，函数被谁调用，this就是谁。

构造函数的话，如果不用new操作符而直接调用，那即this指向window。用new操作符生成对象实例后，this就指向了新生成的对象。

匿名函数或不处于任何对象中的函数指向window 。

如果是call，apply等，指定的this是谁，就是谁。

谈谈this的理解

1) this总是指向函数的直接调用者（而非间接调用者）

2) 如果有new关键字，this指向new出来的那个对象

3) 在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。

eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

call，apply，bind的区别

call apply bind都可以改变函数调用的this指向。

函数.call(对象,arg1,arg2....)
函数.apply(对象，[arg1,arg2,...])
var ss=函数.bind(对象,arg1,arg2,....)

1.第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域），然后根据指定的作用域，调用该函数。

2.都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

3.call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。

4.改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向。

Javascript作用链域

注意：JS没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。

Javascript原型链

在javascript中，实例对象与原型之间的链接，叫做原型链。Javascript解析引擎在读取一个Object的属性的值时，会沿着原型链向上寻找，如果最终没有找到，则该属性值为undefined；如果最终找到该属性的值，则返回结果。

继承（6种方式）以及优缺点

1.原型链继承

2.构造函数继承

3.组合继承（原型链继承+构造函数继承）

4.原型式继承

5.寄生继承

6.组合寄生继承

代码示例：

//借助构造函数实现继承：缺点是父构造函数的原型链继承不了，若要全部继承除非将所有属性和方法定义在构造函数中
function Parent1 () {
  this.name = 'parent1';
}
function Child1 () {
  //这么做的好处是定义在父构造函数中的引用类型的属性，对于子构造函数的每个实例来说是独立的
  //并且在子构造函数实例化时，可以给父构造函数传参
  Parent.call(this);
  this.type = 'child1';
}

//借助原型链实现继承：缺点是继承的引用类型属性是共享的，子构造函数的实例更改会影响其他实例上的这个属性，比如 play 属性
function Parent2 () {
  this.name = 'parent2';
  this.play = [1, 2, 3];
}
function Child2 () {
  this.type = 'Child2';
}
Child2.prototype = new Parent2();

//组合方式：缺点是会执行两次父构造函数
function Child3 () {
  //执行第一次
  Parent2.call(this);
  this.type = 'Child3';
}
Child3.prototype = new Parent2(); //执行第二次

//组合优化1，不需要再将定义在父构造函数中的属性和方法再继承一次，只需要继承原型链上的
Child3.prototype = Parent2.prototype;
//缺点是无法区分一个实例是子函构造函数实例化的还是父构造函数实例化的
let s1 = new Child3();
//s1.constructor 指向了 Parent2，而不是 Child3，因为 Child3 原型对象的属性 constructor 继承了 Parent2 原型对象上的
//如果你强行执行 Child3.prototype.constructor = Child3 的话，也会将 Parent2.prototype.constructor 改成 Child3

//组合优化2，通过 Object.create() 创建一个中间对象，将两个原型对象区别开来，并且继承父构造函数的原型链
Child3.prototype = Object.create(Parent2.prototype);
Child3.prototype.constructor = Child3;
//即 Child3.prototype.__proto__ === Parent2.prototype 为 true
//如此 Child3.prototype 和 Parent2.prototype 被隔离开，是两个对象，不会相互影响
//这种方式为理想继承方式

请解释变量声明提升

通过var声明的变量会被提升至作用域的顶端。不仅仅是变量，函数声明也一样会被提升。

当同一作用域内同时出现变量和函数声明提升时，变量仍然在函数前面。

函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

什么是window对象? 什么是document对象?

window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。

document.onload和document.ready两个事件的区别

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

Js的浅拷贝和深拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝

// 第一层为深拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 ...

JSON.parse(JSON.stringify())

递归函数

function cloneObject(obj) {
  var newObj = {} //如果不是引用类型，直接返回
  if (typeof obj !== 'object') {
    return obj
  }
  //如果是引用类型，遍历属性
  else {
    for (var attr in obj) {
      //如果某个属性还是引用类型，递归调用
      newObj[attr] = cloneObject(obj[attr])
    }
  }
  return newObj
}

JavaScript里arguments究竟是什么？

Javascrip中国每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。
在函数代码中，使用特殊对象arguments，开发者无需明确指出参数名，通过使用下标就可以访问相应的参数。

function test() { 
 var s = ""; 
 for (var i = 0; i < arguments.length; i++) { 
  alert(arguments[i]);             
  s += arguments[i] + ","; 
 }
 return s; 
} 
test("name", "age");//name,age 

arguments虽然有一些数组的性质，但其并非真正的数组，只是一个类数组对象。其并没有数组的很多方法，不能像真正的数组那样调用.jion(),.concat(),.pop()等方法。

什么是"use strict";?使用它的好处和坏处分别是什么？

在代码中出现表达式-"use strict"; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。

坏处：

• 同样的代码，在"严格模式"中，可能会有不一样的运行结果；
• 一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

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

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

常用解决方案：

• 跨域资源共享（CORS）
• nginx代理跨域
• nodejs中间件代理跨域
• jsonp跨域

解释什么是Json

(1)JSON 是一种轻量级的数据交换格式。

(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。

(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

解释jsonp的原理，以及为什么不是真正的ajax

Json是通过动态创建script标签，回调函数的方式实现的，而Ajax是页面无刷新请求数据操作。

原生Js的实现：

(function (window,document) {
    "use strict";
    var jsonp = function (url,data,callback) {
        // 1.将传入的data数据转化为url字符串形式
        // {id:1,name:'fly63'} => id=1&name=fly63
        var dataString = url.indexof('?') == -1? '?': '&';
        for(var key in data){
            dataString += key + '=' + data[key] + '&';
        };
        // 2 处理url中的回调函数
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
        dataString += 'callback=' + cbFuncName;
        // 3.创建一个script标签并插入到页面中
        var scriptEle = document.createElement('script');
        scriptEle.src = url + dataString;
        // 4.挂载回调函数
        window[cbFuncName] = function (data) {
            callback(data);
            // 处理完回调函数的数据之后，删除jsonp的script标签
            document.body.removeChild(scriptEle);
        }
        // 5.append到页面中
        document.body.appendChild(scriptEle);
    }
    window.$jsonp = jsonp;// 因为jsonp是一个私有函数外部不能调用，所有jsonp函数作文window对象的一个方法，供外部调用
})(window,document)

谈谈Cookie的弊端?

（1）Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

（2）安全性问题。如果cookie被 人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

（3）有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）

通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，提高了server的http请求的解析速度。

描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage和localStorage是HTML5 Web Storage api提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

• Firefox每个域名cookie限制为50个。
• Opera每个域名cookie限制为30个。
• Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
• Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
• InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

localstorage不能手动删除的时候，什么时候过期

除非被清除，否则永久保存 clear()可清楚

sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

什么是函数柯里化

函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

柯里化的目的是，减少代码冗余，以及增加代码的可读性。下面看一个与柯里化有关的经典例子：

// 实现一个add方法，使计算结果能够满足类似如下的预期：
// add(1)(2)(3) = 6;
// add(1, 2, 3)(4) = 10;
// add(1)(2)(3)(4)(5) = 15;
var add_currying=function(...rest){
  var sum=0;
  for(let item of rest){
   sum+=item;
  }
  var add_back = (...rest) => {
    for(let item of rest){
      sum+=item;
    }
    return add_back;
 };
 add_back.toString = () => sum;
 return add_back;
}
console.log(add_currying(1,2,3)); //6
console.log(add_currying(1,2)(3,4)); //10
console.log(add_currying(1,2)(3)(4,5)); //15
console.log(add_currying(1)(2)(3)(4)(5)(6)); //21
//打印出来会自动使用toString，即使是写var a=add_currying(1,2,3)也会自动调用此方法（默认将函数语句以字符串打出）
//而为了打印出我们想要的结果我们就需要自己重写toString方法
//如果不用es6的三点运算符就只能使用以前的Array.prototype.slice.call(arguments)方法

js如何处理防抖和节流？

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

函数防抖（debounce）：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
如下，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

function debounce(fn, wait) { 
 var timeout = null; 
 return function() { 
  if(timeout !== null) clearTimeout(timeout);           
  timeout = setTimeout(fn, wait); 
 } 
} 
// 处理函数 
function handle() {      
 console.log(Math.random()); 
} 
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000)); 函数节流

函数节流（throttle）：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。
如下，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

var throttle =function(func, delay) { 
 var prev = Date.now(); 
 return function() { 
  var context = this;
  var args = arguments; 
  var now = Date.now(); 
  if (now - prev >= delay) { 
   func.apply(context, args);                           
   prev = Date.now();
  } 
 } 
}
function handle() {              
 console.log(Math.random()); 
}         
window.addEventListener('scroll', throttle(handle, 1000)); 

JS里垃圾回收机制是什么，常用的是哪种，怎么处理的？

JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
JS中最常见的垃圾回收方式是标记清除。
工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

1. 垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。
2. 去掉环境中的变量以及被环境中的变量引用的变量的标记。
3. 再被加上标记的会被视为准备删除的变量。
4. 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。
5. 
   

那些操作会造成内存泄漏

全局变量、闭包、DOM清空或删除时，事件未清除、子元素存在引用

什么是虚拟DOM

文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变慢。

vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（VNode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM的 内存中执行计算和操作，而不是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构。

一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就是为什么基于虚拟 DOM 的框架（例如 Vue 和 react）如此突出的原因。

Ajax使用

所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
创建Ajax的过程：
1) 创建XMLHttpRequest对象（异步调用对象）

var xhr = new XMLHttpRequest();

2) 创建新的Http请求（方法、URL、是否异步）

xhr.open(‘get’,’example.php’,false);

3) 设置响应HTTP请求状态变化的函数。
onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。
4) 发送http请求

xhr.send(data);

5) 获取异步调用返回的数据
注意：
1) 页面初次加载时，尽量在web服务器一次性输出所有相关的数据，只在页面加载完成之后，用户进行操作时采用ajax进行交互。
2) 同步ajax在IE上会产生页面假死的问题。所以建议采用异步ajax。
3) 尽量减少ajax请求次数
4) ajax安全问题，对于敏感数据在服务器端处理，避免在客户端处理过滤。对于关键业务逻辑代码也必须放在服务器端处理。

Ajax的原生写法

function ajax() {
	//创建一个 XHR 对象
	let oAjax = window.XMLHttpRequest ? (new XMLHttpRequest()) : (new window.ActiveXobject('Microsoft.XMLHTTP'));
	//返回一个函数，这是函数柯里化操作，不用每次调用 ajax 都判断浏览器环境
	//但是会占用更多的内存，因为总是会保存外部函数的作用域
	return function(url, fnSucc, fnFaild) {
		//只要 XHR 对象的 readyState 属性的值发生改变，就触发这个事件
		oAjax.onreadystatechange = function() {
			// readyState 属性是 0-4 的值，当为 4 时，表示已经接收到全部响应数据，并可以在客户端使用
			if (oAjax.readyState === 4) {
				//响应的 HTTP 状态
				let s = oAjax.status;
				if (s === 200 || s === 206 || s === 304) {
					//将响应主体被返回的文本作为参数传给这个函数，并执行这个函数
					if (fnSucc) fnSucc(oAjax.responseText);
				} else {
					if (fnFaild) fnFaild(oAjax.status);
				}
			}
		};
		//启动一个请求，准备发送
		oAjax.open('GET', url, true);
		//发送请求
		oAjax.send(null);
	}
}

ajax请求的时候get 和post方式的区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

• GET在浏览器回退时是无害的，而POST会再次提交请求。

• GET产生的URL地址可以被Bookmark，而POST不可以。

• GET请求会被浏览器主动cache，而POST不会，除非手动设置。

• GET请求只能进行url编码，而POST支持多种编码方式。

• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

• GET请求在URL中传送的参数是有长度限制的，而POST么有。

• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

• GET参数通过URL传递，POST放在Request body中。

Javascript中，执行时对象查找时，永远不会去查找原型的函数？

Object.hasOwnProperty(proName)：是用来判断一个对象是否有你给出名称的属性。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

JS延迟加载的方式有哪些？

defer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。
async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。

同步和异步的区别?

同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。

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

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

若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset="utf-8"或"gbk"。

比如：http://www.fly63.com/a.html 中嵌入了一个http://www.fly63.com/test.js

a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候

<script src="http://www.fly63.com/test.js" charset="utf-8"></script>

模块化开发怎么做？

（1）定义封装的模块
（2）定义新模块对其他模块的依赖
（3）可对其他模块的引入支持。在JavaScript中出现了一些非传统模块开发方式的规范。 CommonJS的模块规范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。AMD是异步模块定义，所有的模块将被异步加载，模块加载不影响后边语句运行。

AMD与CMD规范区别？

1. 1) 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
2. 2) CMD 推崇依赖就近，AMD 推崇依赖前置。
3. 3) AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。

解释页面的回流与重绘

浏览器的滚动距离

可视区域距离页面顶部的距离

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

可视区的大小

(1)innerXXX（不兼容ie）

window.innerHeight 可视区高度，包含滚动条宽度
window.innerWidth 可视区宽度，包含滚动条宽度

document.documentElement.clientWidth可视区宽度，不包含滚动条宽度
document.documentElement.clientHeight可视区高度，不包含滚动条宽度

节点的种类有几种，分别是什么？

(1)元素节点：nodeType ===1;

(2)文本节点：nodeType ===3;

(3)属性节点：nodeType ===2;

innerHTML和outerHTML的区别

innerHTML(元素内包含的内容）

outerHTML(自己以及元素内的内容）

document.write和innerHTML的区别

document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘

document.innerHTML 将内容写入某个Dom节点，不会重绘

offsetWidth offsetHeight和clientWidth clientHeight的区别

DOM操作

（1）创建新节点

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

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

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

BOM 和 DOM 的关系

BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。

DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。

JS是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

数组对象有哪些原生方法，列举一下

pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight、forEach、map、filter、every、some

pop：删除并返回数组最后一个元素（改变原数组）；
push：返回添加完成后的数组的长度（改变原数组）；
shift：移除并返回数组的第一个元素（改变原数组）；
unshift:在数组头部插入一个元素
slice：slice(下标，个数)返回裁剪后的数组（不改变原数组）；
splice：插入，删除或替换数组的元素
concat：合并数组返回组合数组（不改变原数组）；
join：将数组用标识符链接成字符串返回拼接好的字符串（不改变原数组）；
reverse：翻转数组（改变原数组）；
toString:将数组转换成一个字符串；
split：把字符串分割开，以数组方式储存；
forEach：主要用于遍历数组；
every：主要用于检查数组中每个元素是否符合函数的条件，如果其中有一个不符合，则返回false；
indexOf：主要用于在数组中查找元素，并把元素的位置返回来。

字符串方法

charAt()：根据下标找到对应值

charCodeAt()：通过下标值找到对应字符Unicode编码

indexOf()：通过字符查找对应下标（首次出现）

lastIndexOf()：通过字符找最后一次出现的下标值

slice()：截取字符串，2个参数，（起始位置，结束位置）

split()：把字符串按分隔符分割成数组

substring()：截取字符串，（起始位置，结束位置）

substr()：截取指定位置和长度的字符串，（起始位置，长度）

toLowerCase()：字符串转为小写

toUpperCase()：字符串转成大写

trim()：去掉字符串前后所有空格

JS中的Array.splice()和Array.slice()方法有什么区别

话不多说，来看第一个例子：

var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组
console.log(arr.slice(2,7));//2,3,4,5,6
console.log(arr.splice(2,7));//2,3,4,5,6,7,8
//由此我们简单推测数量两个函数参数的意义,
slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置)
splice(start,length)第一个参数开始位置,第二个参数截取长度

接着看第二个：

var x=y=[0,1,2,3,4,5,6,7,8,9]
console.log(x.slice(2,5));//2,3,4
console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组并未改变
//接下来用同样方式测试splice
console.log(y.splice(2,5));//2,3,4,5,6
console.log(y);//[0,1,7,8,9]显示原数组中的数值被剔除掉了

slice和splice虽然都是对于数组对象进行截取,但是二者还是存在明显区别,函数参数上slice和splice第一个参数都是截取开始位置,slice第二个参数是截取的结束位置(不包含),而splice第二个参数(表示这个从开始位置截取的长度),slice不会对原数组产生变化,而splice会直接剔除原数组中的截取数据!

如何在JS中动态添加/删除对象的属性？

咱们可以使用object.property_name = value向对象添加属性，delete object.property_name 用于删除属性。

例如：

let user = new Object();
// adding a property
user.name='Anil';
user.age  =25;
console.log(user);
delete user.age;
console.log(user);

图片的懒加载和预加载

预加载：常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。

function loadImage(url, callback){
    var img = new Image(); //创建一个Image对象，实现图片预下载
    img.src = url;
    if (img.complete){
         // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }
    img.onload = function (){
    //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来
    };
}

懒加载：主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut、setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

什么是回调

回调函数是作为参数或选项传递给某个方法的普通JS函数。它是一个函数，在另一个函数完成执行后执行，因此称为回调。在JS中，函数是对象，因此，函数可以接受函数作为参数，并且可以由其他函数返回。

宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像windows这样的对象，但是Node.js环境提供像Node List这样的对象。

原生对象:这些是JS中的内置对象。它们也被称为全局对象，因为如果使用JS，内置对象不受是运行环境影响。

渐进增强与优雅降级

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

Web Worker和Web Socket？

web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。
web worker：运行在后台的JavaScript，不影响页面的性能。

创建worker：var worker = new Worker(url);
向worker发送数据：worker.postMessage(data);
接收worker返回的数据：worker.onmessage
终止一个worker的执行：worker.terminate();

浏览器的线程

线程与进程的区别

一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

说说你对语义化的理解？

1.去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。

4.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

为什么利用多个域名来提供网站资源会更有效？

1.CDN缓存更方便

2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）

3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢

4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

你如何组织，优化自己的代码？

对内：模块模式；对外：继承

代码重用

避免全局变量（命名空间，封闭空间，模块化mvc…）

拆分函数避免函数过于臃肿

注释

前端模块化和组件化

模块化：可复用，侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

组件化：可复用，更多关注的UI部分，页面的每个部件，比如头部，弹出框甚至确认按钮都可以成为一个组件，每个组件有独立的HTML、css、js代码。

http的cache机制及作用？

定义：浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
cache的作用：
1、减少延迟，让你的网站更快，提高用户体验。
2、避免网络拥塞，减少请求量，减少输出带宽。
实现手段：
Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

HTTP 常见的状态码

400 客户端请求有语法错误，不能被服务器所理解
403 服务器收到请求但是拒绝提供服务|
200 客户端请求成功|
404 请求资源不存在 eg:输入错误的URL |
500 服务器发生不可预期的错误 |
503 服务器当前不能处理客户端请求，一段时间后可能恢复正常

JS 中的主要有哪几类错误

JS有三类的错误:

加载时错误：加载web页面时出现的错误(如语法错误)称为加载时错误，它会动态生成错误。

运行时错误：由于滥用html语言中的命令而导致的错误。

逻辑错误：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的

列出JS中的一些设计模式

设计模式是软件设计中常见问题的通用可重用解决方案，以下是一些设计模式是：

创建模式：该模式抽象了对象实例化过程。

结构型模式：这些模式处理不同的类和对象以提供新功能。

行为模式：也称发布-订阅模式，定义了一个被观察者和多个观察者的、一对多的对象关系。

并行设计模式：这些模式处理多线程编程范例。

架构设计模式：这些模式用于处理架构设计。

es6的新特性

解释一下什么是箭头函数？

箭头函数是在es6或更高版本中编写函数表达式的简明方法。箭头函数不能用作构造函数，也不支持this，arguments，super或new.target关键字，它最适合非方法函数。 通常，箭头函数看起来像 const function_name =（）=> {}。

const greet=()=>{console.log('hello');}
greet();

普通函数和箭头函数的区别

1、普通函数
可以通过bind、call、apply改变this指向
可以使用new
2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor

解释一下什么是 promise ？

promise是js中的一个对象，用于生成可能在将来产生结果的值。 值可以是已解析的值，也可以是说明为什么未解析该值的原因。

promise 可以有三种状态:

一个等待状态的promise对象能够成功后返回一个值，也能失败后带回一个错误，当这两种情况发生的时候，处理函数会排队执行通过then方法会被调用。

resolve和reject分别是两个函数,当在回调中调用时,会改变promise实例的状态,resolve改变状态为成功,reject为失败。

手写promise 

function Promise(exector) {
	let _this = this;
	//status表示一种状态
	let status = “pending“;
	let value = undefined;
	let reason = undefined;
	//成功
	function resolve(value) {
		if (status == “pending“) {
			_this.value = value;
			_this.status = “resolve“;
		}
	}
	//执行失败
	function reject(value) {
		if (status == “pending“) {
			_this.value = value;
			_this.status = “reject“
		}
	}
	//异步操作
	try {
		exector(resolve, reject)
	} catch (e) {
		reject(e)
	}
	//测试then
	Promise.prototype.then = function(reject, resolve) {
		let _this = this;
		if (this.status == “resolve“) {
			reject(_this.value)
		}
		if (this.status == “reject“) {
			resolve(_this.reason)
		}
	}
} 
//new Promise测试
let promise = new Promise((reject,resolve)=>{
    resolve(“return resolve“);
});
promise.then(data => {
	console.log(`success${data}`);
}, err => {
	console.log(`err${data}`);
})

promise、async有什么区别

1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别：async/await让代码更像同步，进一步优化了代码

介绍各种异步方案

（1）回调函数（异步回调）

回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。

（2）promise 

promise对象是commonJS工作组提出的一种规范，一种模式，目的是为了异步编程提供统一接口。

（3）async/await

（4）事件监听

采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

（5）发布/订阅

module.exports 和 exports 之间有什么区别？

module和exports是Node.js给每个js文件内置的两个对象。可以通过console.log(module)和console.log(exports)打印出来。如果你在main.js中写入下面两行，然后运行$ node main.js:

console.log(exports);//输出：{}
console.log(module);//输出：Module {..., exports: {}, ...} （注：...代表省略了其他一些属性）

从打印咱们可以看出，module.exports和exports一开始都是一个空对象{}，实际上，这两个对象指向同一块内存。这也就是说module.exports和exports是等价的（有个前提：不去改变它们指向的内存地址）。

例如：exports.age = 18和module.export.age = 18，这两种写法是一致的（都相当于给最初的空对象{}添加了一个属性，通过require得到的就是{age: 18}）。

import 和 exports 是什么？

import和exports 帮助咱们编写模块化的JS代码。使用import和exports，咱们可以将代码分割成多个文件。import只允许获取文件的某些特定变量或方法。可以导入模块导出的方法或变量。

 //index.js
 import name,age from './person'; 
 console.log(name);
 console.log(age);

 //person.js
 let name ='Sharad', occupation='developer', age =26;
 export { name, age}; 

for in 和 for of 的区别

1、for...in 循环：只能获得对象的键名，不能获得键值；for...of 循环：允许遍历获得键值

2、对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错，列如：

var obj = {
   'name':'Jim Green',
   'age': 12
 }
 for(let key of obj) {
   console.log('for of obj', key)
 } // Uncaught TypeError: obj is not iterable

3、for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 则不会这样，列如：

let arr = [1, 2, 3]
arr.set ='world'  // 手动添加的键
Array.prototype.name ='hello'  // 原型链上的键
for(let itemin arr) {
  console.log('item', item)
}
/*
  item 0
  item 1
  item 2
  item set
  item name
*/
for(let value of arr) {
  console.log('value', value)
}
/*
  value 1
  value 2
  value 3
*/

4、forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效；for...of 循环可以与break、continue 和 return 配合使用，跳出循环

5、无论是 for...in 还是 for...of 都不能遍历出 Symbol 类型的值，遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

总之，for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

怎么理解ES6中Proxy的？使用场景?

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。语法如下

let p = new Proxy(target, handler);

handler解析

关于handler拦截属性，有如下：

get(target,propKey,receiver)：拦截对象属性的读取， 依次为目标对象、属性名和 proxy 实例本身，最后一个参数可选
set(target,propKey,value,receiver)：拦截对象属性的设置
has(target,propKey)：拦截propKey in proxy的操作，返回一个布尔值
deleteProperty(target,propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值
ownKeys(target)：拦截Object.keys(proxy)、for...in等循环，返回一个数组
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc），返回一个布尔值
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作

Reflect

若需要在Proxy内部调用对象的默认行为，建议使用Reflect，其是ES6中操作对象而提供的新 API
基本特点：只要Proxy对象具有的代理方法，Reflect对象全部具有，以静态方法的形式存在，修改某些Object方法的返回结果，让其变得更合理（定义不存在属性行为的时候不报错而是返回false）

es6中的generator函数的理解

Generator函数可以说是Iterator接口的具体实现方式。Generator 最大的特点就是可以控制函数的执行。

语法上，Generator 函数是一个状态机，封装了多个内部状态。
形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

链接: https://www.fly63.com/article/detial/10572