前端学习 js进阶（1）作用域，垃圾回收机制，闭包，变量提升，函数提升，函数参数，箭头函数

目录

1. 作用域

        1.1 局部作用域

        1.2 全局作用域

        1.3 作用域链

        1.4 垃圾回收机制

        引用计数

        标记清除法

 1.5 闭包

1.6 变量提升

2.1 函数提升

2.2 函数参数

        1.动态参数

        2.剩余参数

        展开运算符

        2.3 箭头函数

        1.箭头函数的基本语法

        2.箭头函数的参数

---

1. 作用域

        作用域（scope）规定了变量能够访问的“范围”，离开了这个“范围”变量便不能被访问，

        作用域分为：

        1.1 局部作用域

        局部作用域分为函数作用域和块作用域

        1.函数作用域：函数内部

        在函数内部声明的变量只能在函数内部被访问，外部无法直接访问

        总结：

•         函数内部声明的变量，在函数外部无法被访问
•         函数的参数也是函数内部的局部变量
•         不同函数内部声明的变量无法相互访问
•         函数执行完毕后，函数内部的变量实际被清空了

        2.块作用域：{}

        在js中使用{}包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法访问。

•         let声明的变量会产生块作用域，var不会产生块作用域
•         const声明的变量也会产生块作用域
•         不同代码块之间的变量无法互相访问
•         推荐使用let或const

        

        1.2 全局作用域

        <script>标签和.js文件的最外层就是所谓的全局作用域，在此声明的变量的函数内部也可以被访问

        全局作用域中声明的变量，任何其他作用域都可以访问

        注意：

        1.为window对象动态添加的属性默认也是全局的，不推荐！

        2.函数中未使用任何关键字声明的变量为全局变量，不推荐！！

        3.尽可能少的声明全局变量，防止被污染

        1.3 作用域链

        作用域链本质上是底层的变量查找机制

                函数被执行时，会优先查找当前函数作用域中查找变量

                如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

        总结：

                嵌套关系的作用域串联起来形成了作用域

                相同作用域链中按着从小到大的规则查找变量

                子作用域能够访问父作用域，父级作用域无法访问子级作用域

        1.4 垃圾回收机制

        垃圾回收机制（Garbage Collection）简称GC

        JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收

        内存的生命周期

        js环境中分配的内存，一般有如下生命周期：

        1.内存分配：当我们声明变量，函数，对象的时候，系统会自动为他们分配内存

        2.内存使用：即读写内存，也就是使用变量，函数等

        3.内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存

        说明：

                全局变量一般不会回收（关闭页面回收）

                一般情况下局部变量的值，不用了，会被自动回收掉

        内存泄漏：程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏

        扩展-js垃圾回收机制-算法说明

        堆栈空间分配区别：

        1.栈（操作系统）：有操作系统自动分配释放函数的参数值，局部变量等，基本数据类型放到栈里面

        2.堆（操作系统）：一般有程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面

        下面介绍两种常用的浏览器垃圾回收算法：引用计数法和标记清除法

        引用计数

        IE采用计数算法，定义“内存不再使用”，就是看一个对象是否有指向它的引用，没有引用了就回收对象

        算法：

        1.跟踪记录被引用的次数

        2.如果被引用了一次，那么就记录次数1，多次引用会累加++

        3.如果减少一个引用就减1--

        4.如果引用次数是0，则释放内存

        问题：

        嵌套引用（循环引用）

        如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄漏。

        因为他们的引用次数永远不会是0.这样的相互引用如果说很大量的存在就会导致大量的内存泄漏

        

        标记清除法

        现代浏览器大多是基于标记清除法的某些改机算法

        核心：

        1.标记清除算法将“不再使用的对象”定义为“无法达到的对象”

        2.就是从根部（在js中就是全局对象）出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。

        3.那些无法由根部出发触及到的对象标记为不再使用，稍后进行回收

 1.5 闭包

一个函数对周围状态的引用捆绑在一起，内层函数中访问到其他外层函数的作用域

简单理解：闭包 = 内层函数+外层函数的变量

简单的使用

闭包的作用：封闭数据，提供操作，外部也可以访问函数内部变量

基本格式

简约写法

闭包应用：实现数据的私有

比如：我们要做一个统计函数调用次数，函数调用一次，就++

        

但是，这个count是全局变量，很容易被修改

所以使用这个方法：

        

这样实现了数据私有，无法直接修改count，但是会造成数据泄漏

1.6 变量提升

变量提升是js中比较奇怪的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）

注意：

        1.变量在未声明即被访问时会报语法错误

        2.变量在var声明之前即被访问，变量的值为undefined

        只提升变量声明，不提升变量赋值

        3.let/const声明的变量不存在变量提升

        4.变量提升出现在相同作用域当中

        5.实际开发中推荐先声明在访问变量

说明：

        js初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因如此，ES6引入了块级作用域，用let或者const声明变量，让代码写法更加规范和人性化

2.1 函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用

• 会把所有函数声明提升到当前作用域的最前面
• 只提升函数声明，不提升函数调用
• 函数表达式必须先声明和赋值，后调用，否则报错 var bar = function（）{}
• 函数提升能够使函数的声明调用更灵活
• 函数表达式不存在提升现象
• 函数提升出现在相同作用域当中

2.2 函数参数

        1.动态参数

        arguments是函数内部的伪数组变量，它包含了调用函数时传入的所有实参

        当不确定传递多少个实参的时候，我们使用arguments动态参数

        是伪数组，只存在函数中

        2.剩余参数

        剩余参数允许我们将一个不定数量的参数表示为一个数组

        1. ...是语法符号，置于最末函数形参之前，用于获取多余的实参

        2.借助 ...获取的剩余实参，是个真数组

        开发中，还是提倡多使用剩余参数

        

        展开运算符

        展开运算符（...），将一个数组进行展开

        const arr = [1,2,3]

        console.log(...arr)  //1 2 3 

        主要用途：求数值最大值和合并数组

        2.3 箭头函数

        引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

        使用场景：箭头函数更适用与那些本来需要匿名函数的地方

        1.箭头函数的基本语法

        箭头函数         基本语法：

        const fn = () => {

                console.log(123)

        }

        fn()

        1. 只有一个形参的时候，可以省略小括号

        const fn = x => {

                console.log(x)

        }

        fn(1)

        2.只有一行代码的时候，我们可以省略大括号

        const fn = x => console.log(x)

        fn(1)

        3.只有一行代码的时候，我们可以省略return

        const fn = x => x+x

        console.log(fn(1))

        4.箭头函数可以直接返回一个对象

        const fn =（uname）=> ({uname:uname})

        fn('刘德华') //结果是{uname：‘刘德华’}

        注意：

•         箭头函数属性表达式函数，因此不存在函数提升
•         箭头函数只有一个参数时可以省略圆括号（）
•         箭头函数函数体只有一行代码时可以省略花括号{}，并自动作为返回值被返回
•         加括号的函数体返回对象字面量表达式

        2.箭头函数的参数

        1.普通函数有arguments动态参数

        2.箭头函数没有arguments动态参数，但是有剩余参数...args

        3.箭头函数的 this

        在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，十分令人讨厌