引言：最近在刷面试题，了解出题的范围和频率，把一些容易出错的点再复习一下，同时分享出来，希望对大家有一点点帮助！
1、点（.） VS = 操作符优先级
let a = {n : 1};
let b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b.x);输出是什么呢？
undefined
{n: 2}
这里就涉及到点（.）和=号的优先级问题了，因为点（.）优先级比=号高，这段代码也就可以写成这样：
let a = {n : 1};
let b = a;
//a.x = a = {n: 2};
a.x ={n: 2}
a = {n: 2};
console.log(a.x);
console.log(b.x);总结：因为优先级的问题，a.x要先进行赋值操作，然后再执行a的赋值操作，日常开发中，这种连等的写法也很常见，一般这样写 a=b=c=0，当然这样写不会有什么歧义和毛病，但像上面例子中的这种情况，就会有意想不到的效果（估计这种效果也不是我们想要的），代码尽量要逻辑简单清晰，所以在使用连等的时候要小心，用起来方便，确不可滥用。
2、作用域
var a = 0,b = 0;
function A(a) {
A = function (b) {
console.log(a + b++)
}
console.log(a++)
}
A(1)
A(2)解析
var a = 0,b = 0;
function A(a) {
//A(1)调用运行情况：
/*
1.A函数被重置为：
function (b) {
console.log(a + b++)
}
2.执行打印console.log(a++)，因为此时的a是形参，形参的值是传入的1，所以打印1，而且形参a执行了++，此时值为2
*/
A = function (b) {
//A(2)调用情况
/*
这个a是采用的闭包，所以是2，b是形参也是2，所以打印的是4
*/
console.log(a + b++)
}
console.log(a++)
}
A(1)//A(1)调用
A(2)//A(2)调用3、变量提升
题目1：
var a = 10;
(function a(){
console.log(a)
a = 20;
console.log(window.a)
var a = 30
console.log(a)
})()等同于
var a = 10;
(function a(){
//内部作用域
var a;//var a = 30 中的声明被提升
console.log(a)//undefined
a = 20;//内部作用域的a赋值20
console.log(window.a)//window中的a依然是10
a = 30//内部作用域的a赋值30
console.log(a)//打印内部作用域中的a 30
})()题目2：
var name = '张三';
function fn() {
if (typeof name === 'undefined') {
var name = '李四';
console.log('辛苦了： ' + name);
} else {
console.log('吃饭没： ' + name);
}
}
fn();等同于
var name = '张三';
function fn() {
var name ;// var name = '李四'; 中的声明被提前到函数作用域里面
if (typeof name === 'undefined') {//此时成立
name = '李四';
console.log('辛苦了： ' + name);
} else {
console.log('吃饭没： ' + name);
}
}
fn();题目3：
var a=10,b=20,c=30;
function fn(a){
a=1;
var b=2;
c=3
}
fn(100)
console.log(a,b,c);等同于
var a=10,b=20,c=30;
function fn(a){
//函数调用，形成局部作用域，形参a在内部局部作用域 a=100
var b;//b在内部变量提升
a=1;//内部局部作用域 a设置为1
b=2;//内部局部作用域 b设置为2
c=3;//全局作用与c被设置值3
}
fn(100)
//可以看到只有c被局部作用域修改了
console.log(a,b,c);//10 20 3题目4：
if(!("a" in window)){
var a = 10
}
console.log(a);等同于
var a;//变量提升了
if(!("a" in window)){//"a" in window 成立了，所以这个条件不执行
a = 10
}
console.log(a);//'undefined题目5：
var fn = 'hello';
(function(fn){
console.log(fn);
var fn=fn||'world';
console.log(fn)
})(fn)
console.log(fn);等同于
var fn = 'hello';
(function(fn){
//内部作用域
//形参先被定义 所以fn=hello
//var fn;//var fn=fn||'world';变量提升到这里，但是会被忽略，因为形参的fn先被定义
console.log(fn);//打印hello
fn=fn||'world';//这句fn还是等于hello
console.log(fn)//打印hello
})(fn)//hello作为实参传入
console.log(fn);//打印hello
//最终结果是：hello hello hello题目6：
var n=10;
function fn(n){
console.log(n);
var n= 20;
console.log(n);
function n(){
}
console.log(n);
}
fn(n);
console.log(n);等同于
var n=10;
function fn(n){
//局部作用域
//n根据形参首先定义 n=10
//函数会提升，覆盖了n，此时n为函数
function n(){
}
//var n;//var n =20中的var n 被提升到此处，但是会被忽略
console.log(n);//打印函数
n= 20;//n被赋值为20
console.log(n);//打印20
//函数已经提升
console.log(n);//打印20
}
fn(n);//实参n=10传入调用
console.log(n);//打印10题目7：
function fn(fn){
console.log(fn);
var fn = 20;
console.log(fn);
function fn(){
console.log(fn);
}
}
fn(30);
var fn = 10;
console.log(fn);等同于
function fn(fn){
//局部作用域 fn被形参设置 fn为30
function fn(){//函数被提升到此次，并且fn设置为函数
console.log(fn);
}
var fn ;//var fn = 20;中的var变量提升到这里，但是会被忽略
console.log(fn);//打印函数
fn = 20;//赋值20
console.log(fn);//打印20
}
var fn;//var fn = 10;这句中的var变量提升到这里，但是会被忽略，因为已经存在函数 fn 了
fn(30);//执行函数
fn = 10;//赋值fn为10
console.log(fn);//打印10最终会依次打印出：fn函数 20 10
4、闭包相关
题目1：返回值（最常用）
function fn(){
var name="hello";
return function(){
return name;
}
}
var fnc = fn();
console.log(fnc())//hello
这个很好理解就是以闭包的形式将 name 返回。
题目2：函数赋值
var fn2;
function fn(){
var name="hello";
//将函数赋值给fn2
fn2 = function(){
return name;
}
}
fn()//要先执行进行赋值，
console.log(fn2())//执行输出fn2在闭包里面给fn2函数设置值，闭包的形式把name属性记忆下来，执行会输出 hello。
题目3：函数参数
function fn(){
var name="hello";
return function callback(){
return name;
}
}
var fn1 = fn()//执行函数将返回值（callback函数）赋值给fn1，
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}
fn2(fn1)//执行输出fn2用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出 hello
题目4：IIFE（自执行函数）
(function(){
var name="hello";
var fn1= function(){
return name;
}
//直接在自执行函数里面调用fn2，将fn1作为参数传入
fn2(fn1);
})()
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}直接在自执行函数里面将封装的函数fn1传给fn2，作为参数调用同样可以获得结果 hello
题目5：循环赋值
//每秒执行1次，分别输出1-10
for(var i=1;i<=10;i++){
(function(j){
//j来接收
setTimeout(function(){
console.log(j);
},j*1000);
})(i)//i作为实参传入
}题目6：getter和setter
function fn(){
var name='hello'
setName=function(n){
name = n;
}
getName=function(){
return name;
}
//将setName，getName作为对象的属性返回
return {
setName:setName,
getName:getName
}
}
var fn1 = fn();//返回对象，属性setName和getName是两个函数
console.log(fn1.getName());//getter
fn1.setName('world');//setter修改闭包里面的name
console.log(fn1.getName());//getter
第一次输出 hello 用setter以后再输出 world ，这样做可以封装成公共方法，防止不想暴露的属性和函数暴露在外部。
题目7：迭代器（执行一次函数往下取一个值）
var arr =['aa','bb','cc'];
function incre(arr){
var i=0;
return function(){
//这个函数每次被执行都返回数组arr中 i下标对应的元素
return arr[i++] || '数组值已经遍历完';
}
}
var next = incre(arr);
console.log(next());//aa
console.log(next());//bb
console.log(next());//cc
console.log(next());//数组值已经遍历完题目8：首次区分（相同的参数，函数不会重复执行）
var fn = (function(){
var arr=[];//用来缓存的数组
return function(val){
if(arr.indexOf(val)==-1){//缓存中没有则表示需要执行
arr.push(val);//将参数push到缓存数组中
console.log('函数被执行了',arr);
//这里写想要执行的函数
}else{
console.log('此次函数不需要执行');
}
console.log('函数调用完打印一下，方便查看已缓存的数组：',arr);
}
})();
fn(10);
fn(10);
fn(1000);
fn(200);
fn(1000);执行结果
可以明显的看到首次执行的会被存起来，再次执行直接取。
题目9：缓存
//比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算
var fn=(function(){
var cache={};//缓存对象
var calc=function(arr){//计算函数
var sum=0;
//求和
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
return sum;
}
return function(){
var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组
var key=args.join(",");//将args用逗号连接成字符串
var result , tSum = cache[key];
if(tSum){//如果缓存有
console.log('从缓存中取：',cache)//打印方便查看
result = tSum;
}else{
//重新计算，并存入缓存同时赋值给result
result = cache[key]=calc(args);
console.log('存入缓存：',cache)//打印方便查看
}
return result;
}
})();
fn(1,2,3,4,5);
fn(1,2,3,4,5);
fn(1,2,3,4,5,6);
fn(1,2,3,4,5,8);
fn(1,2,3,4,5,6);输出结果：
题目10：节流函数
节流函数的作用是在限定的时间内函数只执行一次，比如：
1.按钮提交（可以避免重复提交，当然不只这种方法，将按钮设置为不可用也可以）。
2.scroll、mousehover、mousemove等触发频率高的时候。
主要的原理就是在闭包内设置一个标记，在限定的时间内这个flag设置为true，函数再次点击则不让执行，setTimeout函数执行以后将flag设置为flase，就可以继续执行 。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="box" id="div_box" >
<button onclick="fn1()">test</button>
</div>
</body>
<script>
//节流函数
function throttle(fn,delay){
var flag=false;
var timer=null;
return function(){
var args=[].slice.call(arguments,0);//将参数转成数组
var context=this;
if(flag){//如果在限定的时间内 flag是true 则直接返回，不让执行
return;
}
flag=true; //函数正在控制中
//执行函数
fn.apply(context,args);
clearTimeout(timer);//清除定时器
timer =setTimeout(function(){
flag=false;//延时时间过了以后，放开函数控制
},delay)
}
}
function fn(){
console.log(123);
}
var fn1 = throttle(fn,2000);//绑定节流函数
</script>
</html>这里限定了按钮的点击时间，2000毫秒之内只有第一次会被执行，多次点击的话无效。
总结：闭包可以说无处不在，所以闭包这些场景，还是很值得研究一番。
5、原型与原型链
题目1：
function F() {
this.a = 1;
}
var obj = new F();
console.log(obj.prototype);//打印undefined 对象只有 __proto__属性没有prototype属性，函数才有题目2：
Object.prototype.a = 1;
var obj = {
b: 2
};
for(var i in obj) {
console.log(i); //能迭代出原型链里面的属性，所以会打印出 b和a
}题目3：
Object.prototype.a = 1;
var obj = {
b: undefined
};
console.log(obj.a);//1
console.log('b' in obj);//true //能找到处于原型链里面的bar属性
console.log(obj.hasOwnProperty('a'));//false 不是自身的属性
console.log(obj.hasOwnProperty('b'));//true 是自身的属性题目4：
function A(){
}
function B(a){
this.a = a;
}
function C(a){
if(a){
this.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
//实例对象都能访问构造函数的原型对象，可以明确的是以上3个都是能拿到a的
console.log(new A().a);//1 拿到的是原型上的a=1
console.log(new B().a);//undefined this.a = a;将new B()这个实例对象的a属性这是为undefined，所以拿到的是undefined
console.log(new C(2).a);//2 将new C(2)这个实例对象的a属性这是为2，所以拿到的是2题目5：
function A () {
}
A.prototype.n = 1;
var b = new A();//b实例对象已经建立原型连接
//原型对象指向被改变，不会切断b实例对象的
A.prototype = {
n: 2,
m: 3
}
var c = new A();//c实例对象将根据新的原型建立连接
console.log(b.n, b.m); //1 undefined 这里拿到是改变prototype之前的
console.log(c.n, c.m); //2 3 这里拿到是改变prototype之后的题目6：
var F = function(){};
Object.prototype.a = function(){
console.log('a')
}
Function.prototype.b = function(){
console.log('b')
}
var f = new F();
F.a(); //打印a 对象都能访问Object.prototype中的属性和方法
F.b(); //打印b F是函数，原型链 F => F.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
f.a(); //打印a 对象都能访问Object.prototype中的属性和方法
f.b(); //报错f.b is not a function 因f是F实例对象，原型链 f=>f.__proto__=>F.prototype=>F.prototype.__proto__ => Object.prototype总结：在JavaScript中，对象都有__proto__属性（隐式原型），指向构造该对象的构造函数的原型，而函数Function比较特殊，它除了和其他对象一样有__proto__属性，还有自己特有的属性----prototype称之为原型对象，原型对象有一个constructor属性，该属性指回该函数。
6、this的理解
实例1（new）：
function person(name){
this.name=name;
}
var p = new person("张三")
console.log(p);
var p1 = new person("李四")
console.log(p1);通过new来创建的对象，看他们的this，从下图中可以看到分别创建了新的对象。
实例2（硬绑定 call、apply）
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi.call(o);看下图的this打印，这个this绑定的就是对象o
实例3（上下文对象调用）
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi(); this打印如下图，直接绑定到person对象上
实例4（使用默认绑定）
var name='person';
function sayHi(){
console.log(this)
}
sayHi();打印的this是window
例外情况
var person = {
name:'person',
sayHi:function(){
console.log(this)
}
}
var o={name:'o1'};
person.sayHi.call(null);当用call、apply第一个参数传入null或者undefined的时候，会采用默认的绑定规则，this就指向window。
总结：
- 函数是否是用new来调用的？如果是的话this绑定新创建的对象。 var p = new Person();
- 函数是否通过call、apply来硬绑定调用的？如果是则this绑定的是指定的对象。 var p = sayHi.call(obj);
- 函数是否是被摸个上下文对象调用？如果是则this绑定这个上下文对象。 var p = obj.sayHi();
- 如果以上都不是的话，则使用默认绑定。 var p = sayHi();
箭头函数的this
箭头函数 被单独拎出来是有原因的，它是根据外层的作用域来决定 this 的，并且箭头函数的绑定是无法被修改的。
var a = 2;
var foo = () => {
console.log(this.a)
}
var obj = {
a: 4,
foo: foo
}
obj.foo() // 2
上述代码 箭头函数并没有受到隐式绑定规则的影响，所以控制台当中打印的结果为 2 。
7、数组去重
方式1：
var arr=[1,2,3,4,5,3,6,1,0];
var arr2 = [];
for(let i = 0; i < arr.length; i++) {
if(arr2.indexOf(arr[i]) == -1) { //不包含某个值则返回-1
arr2.push(arr[i]);
}
}
console.log(arr2); 这种方式的话估计大家也是最容易想到的。
方式2：
var arr=[1,2,3,4,5,3,6,1,0];
var arrSort = arr.sort();
var arr2 = [];
for(let i = 0; i< arrSort.length; i++) {
if(arrSort[i] != arrSort[i+1]) {
arr2.push(arrSort[i]);
}
}
console.log(arr2); 这种方法会导致数组被排序了，没有保持原来的顺序。
使用splice：
var arr=[1,2,3,4,5,3,6,1,0];
var len = arr.length;
for(var i = 0; i < len; i++) {
for(var j = i + 1; j < len; j++) {
if(arr[i] === arr[j]) {
arr.splice(i,1);
len--;
j--;
}
}
}
console.log(arr); ES6的Set
var arr=[1,2,3,4,5,3,6,1,0];
let sortSet = new Set(arr);
console.log(Array.from(sortSet));8、事件代理
9、变量提升和函数提升
变量提升
a=2;
var a;
console.log(a);这段代码console会打印什么呢？也许是undefined，但其实会打印 2 。因为这段代码实际会被这样处理：
var a;
a=2;
console.log(a);其中：var a;是编译，后面的两句才是执行。
再来看一段：
console.log(a);
var a=2;它会被处理成这个样子：
var a;
console.log(a);
a=2;同样的 var a;是编译，后面两句是执行，因为a=2赋值是在打印之后，所以这段代码会输出 undefined.。
从上面两段代码就可以知道 以var这样声明的变量，放到哪里都会在编译阶段被移动到当前作用域的最上面。
函数提升
函数的声明跟变量声明也是一样会被提升，下面看函数的实例：
hello();//执行
function hello(){//函数声明，这里可以看到声明在后，执行在前，能正常执行吗？
console.log('hello');
}我们运行这段代码，可以看到是正常输出的，也就是函数声明被提升了。
那如果我们用var 来声明函数会怎么样呢？
hello();//执行
var hello = function (){
console.log('hello');
}执行会报错：
为什么呢？因为 var hello = function (){
console.log('hello');
} 这样写的话var hello是变量声明，后面的是赋值操作，变量被提升了，赋值操作是没有被提升的，其实这段等同于这样：
var hello;
hello();//执行
hello = function(){
console.log('hello');
}在执行的时候hello是只被声明的，它的值是undefined，所以用()来调用会出现TypeError，改成下面这样才能正常工作，想用这种方式写，需要将其放到函数执行的前面：
var hello= function(){
console.log('hello');
}
hello();//执行函数优先
hello();//执行
var hello;
function hello(){
console.log('log hello');
}
hello = function(){
console.log('log hello1');
}这段代码会打印出：log hello
从结果中可以看到函数执行的时候是打印了log hello，函数执行完以后hello变量会被赋值语句替换成打印log hello1的函数，为啥？实际这段代码会被处理成这样
function hello(){
console.log('log hello');
}
hello();//执行
//var hello这句被忽略了
hello = function(){
console.log('log hello1');
}
函数优先提升到最上面，此时在用声明var hello将被忽略，因为此时已经存在hello了，他是一个函数，那接下来执行函数hello当然就打印出之前的结果，然后才被替换。
函数声明覆盖
hello();//执行
function hello(){
console.log('log hello');
}
function hello(){
console.log('log hello2');
}
function hello(){
console.log('log hello3');
}打印的是 log hello3，后面的函数声明把前面的函数声明都覆盖了。
总结:
- 函数声明和变量声明都会被提升到当前作用域的最上方，并且是函数优先，也就是声明语句我们在放在什么位置都可以。
- 为了代码好看、好维护、为了避免重复声明以及避免不必要的风险，还是尽量的把声明放到最前面。
10、typeof vs instanceof
typeof
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof 对于对象来说，除了函数都会显示 object
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'instanceof
instanceof是检测对象的原型链是否指向构造函数的prototype对象的
var arr = [1,2,3];
console.log(arr instanceof Array); // true
function B(){}
function A(){}
A.prototype = new B(); // 原型继承
var a = new A();
console.log(a instanceof A) //true
console.log(a instanceof B) //true
console.log(a instanceof Object)//true
处在原型链上的用instanceof检查都返回true
11、回调函数（Callback）
比如 jquery的ajax
$.ajax(url, function(data) {
// 处理逻辑
})
回调函数有一个致命的弱点，就是容易写出回调地狱，如下：
$.ajax(url, function(data) {
// 处理逻辑
$.ajax(url_1, function(data) {
// 处理逻辑
$.ajax(url_2, function(data) {
// 处理逻辑
$.ajax(url_3, function(data) {
// 处理逻辑
})
})
})
})回调函数固然好用，却也有这个问题，推荐用Promise来处理 。
12、Promise
Promise 有三种状态，分别是：
1. 等待中（pending）
2. 完成了 （resolved）
3. 拒绝了（rejected）
一旦从等待状态变成为其他状态就永远不能更改状态
new Promise((resolve,reject) => {
resolve('success')
// 无效
reject('reject')
})Promise 也很好地解决了回调地狱的问题，如下代码：
let p = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'success');
});
p.then(
res => {
console.log(res);
return `${res} again`;
}
)
.then(
res => console.log(res)
);
// success
// success again13、call、apply 及 bind 函数
相同之处：
改变函数体内 this 的指向。
不同之处：
call、apply的区别：接受参数的方式不一样。
bind：不立即执行。而apply、call 立即执行。
function Person(name){
this.name = name;
}
Person.prototype.getName=function(){
console.log(this.name);
}
var p = new Person('张三');
p.getName();//直接执行
var p1={name:'李四'};
p.getName.call(p1);//this被改变，获取的是p1中的name
p.getName.apply(p1);//this被改变，获取的是p1中的name
p.getName.bind(p1)();//this被改变，获取的是p1中的name，不会立即执行，需要()来执行输出：
14、==与===的区别
简单来说： == 代表相同， ===代表严格相同；
当进行==比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则进行类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false，不会有转换。