作用域
了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
局部作用域
局部作用域分为函数作用域和块作用域。
函数作用域
在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
<script>
// 声明 counter 函数
function counter(x, y) {
// 函数内部声明的变量
const s = x + y
console.log(s) // 18
}
// 设用 counter 函数
counter(10, 8)
// 访问变量 s
console.log(s)// 报错
</script>总结：
-
函数内部声明的变量，在函数外部无法被访问
-
函数的参数也是函数内部的局部变量
-
不同函数内部声明的变量无法互相访问
块作用域
在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
<script>
{
// age 只能在该代码块中被访问
let age = 18;
console.log(age); // 正常
}
// 超出了 age 的作用域
console.log(age) // 报错
let flag = true;
if(flag) {
// str 只能在该代码块中被访问
let str = 'hello world!'
console.log(str); // 正常
}
// 超出了 age 的作用域
console.log(str); // 报错
for(let t = 1; t <= 6; t++) {
// t 只能在该代码块中被访问
console.log(t); // 正常
}
// 超出了 t 的作用域
console.log(t); // 报错
</script>总结：
-
let声明的变量会产生块作用域，var不会产生块作用域 -
const声明的常量也会产生块作用域 -
不同代码块之间的变量无法互相访问
-
推荐使用
let或const
全局作用域
<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。
<script>
// 此处是全局
function sayHi() {
// 此处为局部
}
// 此处为全局
</script>全局作用域中声明的变量，任何其它作用域都可以被访问，如下代码所示：
<script>
// 全局变量 name
const name = '小明'
// 函数作用域中访问全局
function sayHi() {
// 此处为局部
console.log('你好' + name)
}
// 全局变量 flag 和 x
const flag = true
let x = 10
// 块作用域中访问全局
if(flag) {
let y = 5
console.log(x + y) // x 是全局的
}
</script>总结：
-
为
window对象动态添加的属性默认也是全局的，不推荐！ -
函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
-
尽可能少的声明全局变量，防止全局变量被污染
JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。
作用域链
嵌套关系的作用域串联起来形成了作用域链
作用：作用域链本质上是底层的变量查找机制（就近原则）
-
在函数被执行时，会优先查找当前函数作用域中查找变量
-
如果当前作用域查找不到则会逐级向上查找父级作用域直到全局作用域
<body>
<script>
// 全局作用域
// let a = 11
let b = 22
// 局部作用域
function f() {
// let a = 1
// 局部作用域
function g() {
// a = 2
console.log(a) // ?
}
g() // 调用g
}
f() // 调用 f
</script>
</body>总结：
1.嵌套关系的作用域串联起来形成了作用域链
2.查找规则：就近原则
-
当前作用域用找不到，则会逐级查找父级作用域直到全局作用域
-
都找不到则提示错误，这个变量没有被定义过
3.子作用域能够访问父作用域，父级作用域无法访问子级作用域
垃圾回收机制
垃圾回收机制(Garbage Collection) 简称 GC
JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收
内存的生命周期
JS环境中分配的内存, 一般有如下生命周期：
1.内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
2.内存使用：即读写内存，也就是使用变量、函数等
3.内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存
说明：
-
全局变量一般不会回收(关闭页面回收)
-
一般情况下局部变量的值, 不用了, 会被自动回收掉
内存泄漏：程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏
闭包
概念：一个函数对周围状态的引用捆绑在一起，闭包让开发者可以从内部函数访问外部函数的作用域
简单理解：闭包 = 内层函数 + 外层函数的变量
<body>
<script>
// 1. 闭包 : 内层函数 + 外层函数变量
// function outer() {
// const a = 1
// function f() {
// console.log(a)
// }
// f()
// }
// outer()
// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数
// let count = 1
// function fn() {
// count++
// console.log(`函数被调用${count}次`)
// }
// 3. 闭包的写法 统计函数的调用次数
function outer() {
let count = 1
function fn() {
count++
console.log(`函数被调用${count}次`)
}
return fn
}
const re = outer()
// const re = function fn() {
// count++
// console.log(`函数被调用${count}次`)
// }
re()
re()
// const fn = function() { } 函数表达式
// 4. 闭包存在的问题： 可能会造成内存泄漏
</script>
</body>总结：
1.怎么理解闭包？
-
闭包 = 内层函数 + 外层函数的变量
2.闭包的作用？
-
封闭数据，实现数据私有，外部也可以访问函数内部的变量
-
闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来
3.闭包可能引起的问题？
-
内存泄漏
变量提升
变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）
说明：
-
变量提升出现在当前作用域的最前面
-
提升时，只提升变量声明，不提升变量赋值
-
let/const 声明的变量不存在变量提升
-
实际开发中推荐先声明再访问变量
<body>
<script>
var age
// var变量提升
// 1. 变量提升会提升到当前作用域的最前面
// 2. 只提升变量声明，不提升变量赋值
console.log(age) // ?
age = 18
console.log(age) // ?
function fn() {
var uname
console.log(uname)
uname = 'andy'
}
fn()
</script>
</body>S初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因为如此，ES6 引入了块级作用域，用let或者const声明变量，让代码写法更加规范和人性化。
注：关于变量提升的原理分析会涉及较为复杂的词法分析等知识，而开发中使用 let 可以轻松规避变量的提升，因此在此不做过多的探讨，有兴趣可查阅资料
https://segmentfault.com/a/1190000013915935。
函数
知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。
函数提升
函数提升与变量提升比较类似。
说明：
-
函数提升提升到当前作用域最前面
-
函数提升只提升声明，不提升调用
-
函数表达式不存在提升的现象
-
函数提升能够使函数的声明调用更灵活
<body> <script> function fn() { console.log('函数提升') } var fun // 函数提升 // 1.函数提升提升到当前作用域最前面 // 2.函数提升只提升声明，不提升调用 // 3.函数表达式不存在提升的现象 // 4.函数提升能够使函数的声明调用更灵活 fn() fun() fun = function () { console.log('函数表达式不存在提升') } fun() </script>函数参数
arguments对象（了解）
arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
<body>
<script>
// arguments对象获取所有实参
function sum() {
// 1. arguments 只存在于函数中 伪数组
// 2. arguments 可以得到传递过来的所有实参 [1, 2]
// console.log(arguments)
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
console.log(sum)
}
sum(1, 2)
sum(1, 2, 3)
sum(1, 2, 3, 4)
// console.log(arguments) 外面无法使用
</script>
</body>总结：
-
arguments是一个伪数组，只存在于函数中
-
arguments的作用是动态获取函数的实参
-
可以通过for循环依次得到传递过来的实参
剩余参数
剩余参数: 允许我们将一个不定数量的参数表示为一个数组
简单理解：用于获取多余的实参，并形成一个真数组
使用场景：
也可以解决形参和实参个数不匹配的问题
<body>
<script>
// 剩余参数获得多余的实参 返回真数组
// function sum(x, y, ...other) {
// console.log(x, y, other)
// }
// sum(1, 2)
// sum(1, 2, 3)
// sum(1, 2, 3, 4)
// 1. 求和效果
function sum(...other) {
// console.log(other) // [1, 2, 3, 4]
let sum = 0
other.forEach(function (ele) {
sum += ele
})
console.log(sum)
}
sum(1, 2)
sum(1, 2, 3)
sum(1, 2, 3, 4)
</script>
</body>剩余参数和arguments区别
-
... 是语法符号，置于最末函数形参之前，用于获取多余的实参
-
借助 ... 获取的剩余实参，是个真数组
-
箭头函数不支持arguments，但是可以使用剩余参数
开发中，还是提倡多使用 剩余参数
展开运算符(…)
展开运算符,将一个数组/对象进行展开
<body>
<script>
// 展开运算符：将一个数组/对象进行展开，咱们先讲展开数组
// 1. 基本使用, 不修改原数组
const arr = [1, 2, 3]
console.log(...arr)
console.log(arr)
//2. 使用场景： 求数组最大值/最小值，数组合并
// console.log(Math.max(1, 3, 8))
console.log(Math.max(...arr)) // 3
console.log(Math.min(...arr)) // 1
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
// console.log([arr1, arr2])
console.log([...arr1, ...arr2])
</script>
</body>剩余参数：函数参数使用，把多个元素收集起来生成一个真数组 （凝聚）
展开运算符：将数组展开成各个元素（拆散）
箭头函数
箭头函数比函数表达式更简洁的一种写法
使用场景：箭头函数更适用于那些本来需要匿名函数的地方，写法更简单
<body>
<script>
// 箭头函数
// 1. 基本语法
// const fn = function () {
// console.log('我是函数表达式')
// }
// fn()
// const fn = () => {
// console.log('我是箭头函数')
// }
// fn()
// 2. 细节使用
// 2.1 如果只有一个形参则可以省略小括号,其余个数不能省略，如果没有参数则写空的小括号
// const sum = (x) => {
// console.log(x + x)
// }
// sum(2)
// const sum = x => {
// console.log(x + x)
// }
// sum(2)
// 2.2 如果函数体只有一句代码，则可以省略大括号，这句代码就是返回值（省略return）
// const sum = x => {
// return x + x
// }
// const sum = x => x + x
// console.log(sum(5))
// 2.3 如果返回的是一个对象，则需要用小括号把对象包裹起来
// const fn = function() {
// return {name: '佩奇'}
// }
// const fn = () => ({ name: '佩奇' })
// console.log(fn())
// 2.4 箭头函数里面没有 arguments，但是有剩余参数
const fn = (...other) => {
// console.log(arguments)
console.log(other)
}
fn(1, 2)
</script>
</body>用法细节：
-
当箭头函数只有一个参数时，可以省略参数的小括号，其余个数不能省略（没有参数也需要写小括号）
-
当箭头函数的函数体只有一句代码 可以省略函数体大括号，这句代码就是返回值（可以不用写return）
-
如果返回的是个对象，则需要把对象用小括号包裹
-
箭头函数里面没有arguments，但是有剩余参数
总结：
-
箭头函数属于表达式函数，因此不存在函数提升
-
箭头函数只有一个参数时可以省略圆括号
() -
箭头函数函数体只有一行代码时可以省略花括号
{}，并自动做为返回值被返回 -
箭头函数中没有
arguments，只能使用...动态获取实参
箭头函数中的this
以前函数中的this指向是根据如何调用来确定的。简单理解就是this指向调用者
箭头函数本身没有this,它只会沿用上一层作用域的this
<
最低0.47元/天 解锁文章
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
