2021年JavaScript面试总结查错、复习

た入场券 2021-09-07 06:19 335阅读 0赞

# 引言：最近在刷面试题，了解出题的范围和频率，把一些容易出错的点再复习一下，同时分享出来，希望对大家有一点点帮助！ #

## `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： ###

**等同于**

### 题目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：函数参数 ###

**用闭包返回一个函数，把此函数作为另一个函数的参数，在另一个函数里面执行这个函数，最终输出 hello**

### 题目4：IIFE（自执行函数） ###

**直接在自执行函数里面将封装的函数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 ###

![20201224181105281.png][]

**第一次输出 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：首次区分（相同的参数，函数不会重复执行） ###

**执行结果**

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][] ##

**可以明显的看到首次执行的会被存起来，再次执行直接取。**

### 题目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);

**输出结果：**

![20201224181618830.png][]

### 题目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： ###

### 题目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： ###

**总结：****在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，从下图中可以看到分别创建了新的对象。**

**![20201220160340815.png][]**

### 实例2（硬绑定 call、apply） ###

var person = {
    		name:'person',
    		sayHi:function(){
    			console.log(this)
    		}
    	}
    	var o={name:'o1'};
    	person.sayHi.call(o);

**看下图的this打印，这个this绑定的就是对象o**

**![20201220161224465.png][]**

### 实例3（上下文对象调用） ###

var person = {
    		name:'person',
    		sayHi:function(){
    			console.log(this)
    		}
    	}
    	var o={name:'o1'};
    	person.sayHi();

**this打印如下图，直接绑定到person对象上**

## ![20201220161422347.png][] ##

### 实例4（使用默认绑定） ###

var name='person';
    	function sayHi(){
    		console.log(this)
    	}
    	sayHi();

**打印的this是window**

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][] ##

### 例外情况 ###

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： ###

### ES6的Set ###

var arr=[1,2,3,4,5,3,6,1,0];
        let sortSet = new Set(arr);  
        console.log(Array.from(sortSet));

## 8、事件代理 ##

**[查阅这篇文章][Link 1]**

## 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');
    }

**执行会报错：**

![20201220165517533.png][]

**为什么呢？因为 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**

![20201220173725835.png][]

**从结果中可以看到函数执行的时候是打印了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，后面的函数声明把前面的函数声明都覆盖了。**

**总结:**

1.  函数声明和变量声明都会被提升到当前作用域的最上方，并且是函数优先，也就是声明语句我们在放在什么位置都可以。
2.  为了代码好看、好维护、为了避免重复声明以及避免不必要的风险，还是尽量的把声明放到最前面。

## 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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

**处在原型链上的用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 也很好地解决了回调地狱的问题，如下代码：**

## 13、call、apply 及 bind 函数 ##

**相同之处：**

改变函数体内 this 的指向。

**       不同之处：**

call、apply的区别：接受参数的方式不一样。

bind：不立即执行。而apply、call 立即执行。

** 输出：**

![20210317222047702.png][]

## 14、==与===的区别 ##

**简单来说： == 代表相同， ===代表严格相同； **

** 当进行==比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则进行类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false，不会有转换。**

## 暂时就收录了这些，希望对大家有所帮助，给个三连支持一下吧，兄弟们！！ ##

### **关注下方公众号，有更多资料、实例代码、面试技巧奉上！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

[20201224181105281.png]: /images/20210724/d516f0e0149b40108b0715c527dcf893.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/595cea85df0348bc835ef1b601ef7bad.png
[20201224181618830.png]: /images/20210724/1c707c83087a4c5d96a177eff8c74c4d.png
[20201220160340815.png]: /images/20210724/caf43503927b47ed836eef67392796f7.png
[20201220161224465.png]: /images/20210724/daf1b889f98e49eab27cb9043be18ad9.png
[20201220161422347.png]: /images/20210724/aeadf9434b9e4654a8bb8d62b9ad039c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/b5898c2407ec4edab10a11a75fb0340b.png
[Link 1]: https://blog.csdn.net/dkm123456/article/details/111262398
[20201220165517533.png]: /images/20210724/4e5e1228394c4aca983de83cf1e193e0.png
[20201220173725835.png]: /images/20210724/2c8bcc1787d4438390efab566aaeb3b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/ade05541638b4772b82ec06589d26176.png
[20210317222047702.png]: /images/20210724/90958c7bd69346ffbe3984e83730b366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/025c817493f84bae85facd8be47b9aea.png