JavaScript面试自我补充

知识点大纲：

~~数据类型~~
~~形参传值与传址~~
~~预解析、作用域和作用域链~~
~~Object.freeze()冻结对象属性变量~~
~~严格模式~~
~~IIFE~~
~~闭包（这个弄详细点！）~~

本文是根据自己的情况，总结/补充的易于“入坑”面试考点，部分较新颖。对大家来说，可能内容介绍不是很全面，请见谅！

1.数值类型

NaN

NaN和任何值都不相等，即使本身也不相等！

NaN==NaN
<false
10=='10'
<true

所以
ES5
检测NaN，用不等于！=检测
ES6
检测NaN，用isNaN检测

Symbol（独一无二的简单数据类型）

Symbol是ES6新增的一个基本数据类型，表示独一无二的值。
使用场景：

对象的属性名，确保对象中不会出现相同的属性名；
防止不小心被修改或覆盖

//独一无二
let a = Symbol('name');
let b = Symbol('name');
console.log(a==b);		//false

//解决相同属性名问题（ES6之前属性名设置name1、name2、name3......）
let a = Symbol('name');
let b = Symbol('name');
let obj = {
  name: '张三',
  name: '李四',
  name: '王五'
}
console.log(obj);       //{name: "王五"}
console.log(obj.name);  //王五

let a = Symbol('name');
let b = Symbol('name');
let obj = {
  [a]: '张三',
  [b]: '李四',
  [Symbol('name')]: '王五'
}
console.log(obj);       //{Symbol(name): "张三", Symbol(name): "李四", Symbol(name): "王五"}
console.log(obj[a]);  //张三

还有几个需要了解的方法：

Symbol.for
- 根据描述获取Symbol，如果不存在则新建一个Symbol(在全局被登记)
Symbol.keyFor
- 根据使用Symbol.for登记的Symbol返回描述，如果找不到返回undefined 。

let a= Symbol.for("name");
let b= Symbol.for("name");
console.log(a== b); //true
console.log(Symbol.keyFor(a));	//name

2.形参传值与传址

变量在参数传递方式上，有所不同（理解栈和堆）：
函数的参数如果是简单类型，会将一个值类型的数值副本传到函数内部，函数内部不影响函数外部传递的参数变量

如果是一个参数是引用类型，会将引用类型的地址值复制给传入函数的参数，函数内部修改会影响传递参数的引用对象。
1.形参传值的误区：

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a) // {x: 100, y: 200}
console.log(b) // {x: 100, y: 200}

3.作用域、作用域链

作用域

全局作用域：

window.a = 'hello';

//非严格模式下
b = 10;		//容易造成全局污染(影响其他文件的值)

函数级作用域:
var（函数级作用域，在函数中，只有当前函数内部访问；在块中，父级和块内都可以访问到）
let（块级作用域）-----没有预解析(推荐)
const(常量-块级作用域)-----没有预解析

for(var i = 0; i < 5; i++) {
    var num = 10;
}
console.log(num);		//10

for(var j = 0; j < 5; j++) {
    let num2 = 100;
}
console.log(num2);		//<VM232 helloword.js:18 Uncaught ReferenceError: num2 is not defined

function show(){
    var a = "hello";
}
show(); 	//调用执行完成，show被释放（出栈）
console.log(a); //helloword.js:5 Uncaught ReferenceError: a is not defined

let a = 10;
function show(){
    console.log(a);        //10
}
show();

let a = 10;
function show(){
    console.log(a);        //Uncaught ReferenceError: Cannot access 'a' before initialization(初始化之前不能访问‘a’)
    let a = 100;
}
show();

案例

var a = 666;
function show() {
    var a = 12;
    show2();
}
function show2(){
    console.log(a);
}
show();				//666

var a = 666
function show3() {
    var a = 12;
    function show4(){
    	console.log(a);
	}
	show4();
}
show3();		//12

4.Object.freeze()冻结对象属性变量

const stu = {
  "id": 'st02023',
  "name": '王磊'
};
stu.name = '张三';
console.log(stu);   //{id: "st02023", name: "张三"}

const stu = {
  "id": 'st02023',
  "name": '王磊'
};
Object.freeze(stu);
stu.name = '张三';
console.log(stu);   //{id: "st02023", name: "王磊"}

5.严格模式-“use strict”——避免全局污染（作用之一）

"use strict"
var a = 15;
b = 25;     //helloword.js:3 Uncaught ReferenceError: b is not defined

6.IIFE（普通话口语“亦菲~”）——自调用函数

作用：

防止全局变量污染
函数和变量，在执行完都被释放

var a = 100;
var a = 200;
console.log(a);     //200

(function(){
    var a = 100;  
    console.log(a);     //100  
})();

(function(){
    var a = 200;    
    console.log(a);     //200
})();

console.log(a);     //helloword.js:9 Uncaught ReferenceError: a is not defined

7.闭包

//案例1
function show() {
  let a = 100;
  return function() {
    return a;
  }
}

let show2 = show();
console.log(show());    //ƒ () { return a; }	//show返回的匿名函数
console.log(show2());   //100
show2 = null;

闭包官方定义：闭包就是能够读取其他函数内部变量的函数。（包括其他语言）
在JavaScript中，
闭包定义：函数内部的子函数就是闭包（比如：上面代码的匿名函数）
闭包本质：是连接函数内部和函数外部的桥梁（比如：上面匿名函数是连接show和show2的桥梁）
闭包现象：能够读取其他函数内部变量（比如：show2访问show的变量a）
最大特点：闭包记住了闭包函数诞生的生产环境，可以直接使用生产环境的变量（比如：上面代码的匿名函数可以访问show的所有变量，甚至是show的父环境的变量）
闭包作用：函数可以访问其他函数内部变量
满足闭包的三个条件：

函数嵌套（函数内部有子函数（闭包函数））
闭包访问所在的作用域
所在的作用域被调用

闭包使用场景：框架、（我在迭代事件添加监听使用过沙箱式闭包）,具体十种场景，后面案例介绍！

理解闭包的缓存和手动释放闭包占用资源

//案例2
//用闭包实现点赞
function click_like() {
  let num = 0;
  return function() {
    return ++num;
  }
}

let show2 = click_like();
console.log(show2());    //1
console.log(show2());    //2
console.log(show2());    //3
console.log(show2());    //4
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());   //ƒ () { return num++; }
console.log(click_like());  //ƒ () { return num++; }
console.log(typeof click_like());	//function
console.log(click_like()());//1
console.log(click_like()());//1
console.log(click_like()());//1
show2 = null;

根据代码来帮助理解缓存没有被释放（个人理解）：因为全局引用变量show2依赖函数click_like（我们知道全局变量是不会自动释放的），show2不能被回收，那被占用的函数click_like也不能回收，接着就是被占用的function匿名函数（闭包）的占用的参数都不能回收。
再换个对象讨论
let show2 = click_like(); 调用click_like（返回的是匿名函数ƒ () { return num++; }），click_like调用完成就被释放掉，所以结果总是console.log(click_like()());//1；
这就理解了闭包的另一个作用了吧！——缓存数据
回收设置：直接将全局引用变量赋为null。
注意：闭包最后一定要手动回收，避免网页加载缓慢（可能造成网页崩溃）

理解了原理，咱们再写一个使用IIFE的闭包（沙箱式闭包）…看看是不是跟容易懂了！

//案例3
//使用包含IIFE的闭包实现点赞
let show2 = (function() {
  let num = 0;
  return function() {
    return ++num;
  }
})();
console.log(show2()); //1
console.log(show2()); //2
console.log(show2()); //3
console.log(show2()); //4
show2 = null;

看一个稍微复杂的闭包：

//案例4
function show() {
  let arr = [];
  for(var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }
  return arr;
}

let show2 = show();   //调用show，返回函数数组：arr[0]=f(){...}, arr[1]=f(){...}, arr[3]=f(){...} .........
console.log(show2[0]()); //10   //for循环执行完成，返回函数还没被执行，i的值最终为10
console.log(show2[0]()); //10
console.log(show2[1]()); //10
console.log(show2[1]()); //10
show2 = null;

结果都是10，怎么改进呢？（沙箱式闭包）

//案例5
function show() {
  let arr = [];
  for(var i = 0; i < 10; i++) {
    arr[i] = (function(x) {
      return x;
    })(i);
  }
  return arr;
}

let show2 = show();   //调用show，IIFE执行，调用完成返回arr=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(show2); //(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
show2 = null;

第二种改进方式：（直接将循环迭代的声明变量i设置为块作用域）

//案例6
function show() {
  let arr = [];
  for(let i = 0; i < 10; i++) {
    arr[i] = function() {
      return i;
    }
  }
  return arr;
}

let show2 = show();   
console.log(show2[0]()); //0
console.log(show2[0]()); //0
console.log(show2[1]()); //1
console.log(show2[2]()); //2
console.log(show2[3]()); //3
console.log(show2[4]()); //4
show2 = null;

闭包十种场景：

返回值（最常见）——前面案例1、2
函数赋值——前面案例3
函数参数——将闭包函数当做参数
IIFE——前面案例3、5
循环赋值——前面案例4、5
getter和setter——设置getter和setter的闭包函数
迭代器——前面的“点赞”
区分首次

let show = (function() {
  let arr = [];
  return function(id) {
    if(arr.indexOf(id) >= 0) {
      return false;
    }
    else {
      arr.push(id);
      return true;
    }
  }
})();

console.log(show(10));  //true
console.log(show(10));  //true

缓存机制
10.image图片对象上报

JavaScript面试自我补充

1.数值类型

NaN

Symbol（独一无二的简单数据类型）

2.形参传值与传址

3.作用域、作用域链

作用域

案例

4.Object.freeze()冻结对象属性变量

5.严格模式-“use strict”——避免全局污染（作用之一）

6.IIFE（普通话口语“亦菲~”）——自调用函数

7.闭包

每日更新收藏文章目錄

JavaScript面試自我補充

前端面試題：JavaScript

Vue全掌握二——命令行工具 (CLI——Vue腳手架)

前端面試刷題（牛客）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結