目标:了解作用域对程序执行的影响及作用域链的查找机制,使用闭包函数创建隔离作用域避免全局变量污染。
作用域(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>
JavaScript 中除了变量外还有常量,常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】,常量值为对象时其属性和方法允许重新赋值。
<script>
// 必须要有值
const version = '1.0.0';
// 不能重新赋值
// version = '1.0.1';
// 常量值为对象类型
const user = {
name: '小明',
age: 18
}
// 不能重新赋值
user = {};
// 属性和方法允许被修改
user.name = '小小明';
user.gender = '男';
script>
总结:
let
声明的变量会产生块作用域,var
不会产生块作用域const
声明的常量也会产生块作用域let
或 const
注:开发中 let
和 const
经常不加区分的使用,如果担心某个值会不小被修改时,则只能使用 const
声明成常量。
标签和
.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 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。
在解释什么是作用域链前先来看一段代码:
<script>
// 全局作用域
let a = 1
let b = 2
// 局部作用域
function f() {
let c
// 局部作用域
function g() {
let d = 'yo'
}
}
script>
函数内部允许创建新的函数,f
函数内部创建的新函数 g
,会产生新的函数作用域,由此可知作用域产生了嵌套的关系。
如下图所示,父子关系的作用域关联在一起形成了链状的结构,作用域链的名字也由此而来。
作用域链本质上是底层的变量查找机制
,在函数被执行时,会优先查找当前
函数作用域中查找变量,如果当前作用域查找不到则会依次逐级查找父级
作用域直到全局作用域,如下代码所示:
<script>
// 全局作用域
let a = 1
let b = 2
// 局部作用域
function f() {
let c
// let a = 10;
console.log(a) // 1 或 10
console.log(d) // 报错
// 局部作用域
function g() {
let d = 'yo'
// let b = 20;
console.log(b) // 2 或 20
}
// 调用 g 函数
g()
}
console.log(c) // 报错
console.log(d) // 报错
f();
script>
总结:
嵌套关系的作用域串联起来形成了作用域链
相同作用域链中按着从小到大的规则查找变量
子作用域能够访问
父作用域,父级作用域无法访问
子级作用域
垃圾回收机制(Garbage Collection)简称GC
JS中内存
的分配和回收都是自动完成
的,内存在不使用的时候会被垃圾回收器
自动回收
内存的生命周期
JS环境中分配的内存,一般有如下生命周期
:
内存分配
:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
内存使用
:即读写内存,也就是使用变量、函数等
内存回收
:使用完毕,由垃圾回收器
自动回收不再使用的内存
1.内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
2.内存使用:即读写内存,也就是使用变量、函数等
3.内存回收:使用完毕,由垃圾回收器自动回收不再使用的内存
说明:
全局变量一般不会回收(关闭页面回收)
一般情况下局部变量的值
,不用了,会被自动回收
掉
**内存泄漏:**程序中分配的内存
由于某种原因程序未释放
或无法释放
叫做内存泄漏
扩展——算法说明:
堆栈空间分配区别:
操作系统自动分配释放
函数的参数值、局部变量等,基本数据类型放到栈里面。垃圾回收机制
回收。复杂数据类型
放到堆里面。下面介绍两种常见的浏览器垃圾回收算法
:引用计数法
和标记清除法
IE采用的引用计数算法(已经被放弃),定义“内存不再使用”
,就是看一个对象
是否有指向它的引用,没有引用了就回收对象
算法:
引用的次数
累加++
减1--
0
,则释放内存引用计数存在一个致命的问题:嵌套引用
(循环引用)
如果两个对象相互引用
,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露。
function fn() {
let o1 = {}
let o2 = {}
o1.a = o2
o2.a = o1
return '引用计数无法回收'
}
fn()
因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露
现代的浏览器已经不再使用引用计数算法了。
现代浏览器通用的大多是基于标记清除算法
的某些改进算法,总体思想都是一致的。
核心:
无法达到的对象
”。根部
(在JS中就是全局对象)出发定时扫描内存中的对象。凡是能从根部到达
的对象,都是还需要使用
的。无法
由根部出发触及到的对象被标记
为不再使用,稍后进行回收
。总结:标记清除法
的核心思路就是——从根部
扫描对象,能查找到的就是使用的,查找不到的就要回收
闭包是一种比较特殊和函数,使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数,如下代码所示:
<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.闭包可能引起的问题?
##1.6 变量提升
变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问,
<script>
// 访问变量 str
console.log(str + 'world!');
// 声明变量 str
var str = 'hello ';
script>
总结:
undefined
let
声明的变量不存在变量提升
,推荐使用 let
实际开发中推荐先声明再访问变量
注:关于变量提升的原理分析会涉及较为复杂的词法分析等知识,而开发中使用 let
可以轻松规避变量的提升,因此在此不做过多的探讨,有兴趣可查阅资料。
知道函数参数默认值、动态参数、剩余参数的使用细节,提升函数应用的灵活度,知道箭头函数的语法及与普通函数的差异。
函数提升与变量提升比较类似,是指函数在声明之前即可被调用。
<script>
// 调用函数
foo()
// 声明函数
function foo() {
console.log('声明之前即被调用...')
}
// 不存在提升现象
bar() // 错误
var bar = function () {
console.log('函数表达式不存在提升现象...')
}
script>
总结:
函数参数的使用细节,能够提升函数应用的灵活度。
<script>
// 设置参数默认值
function sayHi(name="小明", age=18) {
document.write(`大家好,我叫
${name},我今年${age}岁了。`);
}
// 调用函数
sayHi();
sayHi('小红');
sayHi('小刚', 21);
script>
总结:
undefined
假设这样一个场景,产品经理要你实现一个求和函数,但是求和函数传入的实参不能限制个数,这样就导致形参也不能提前写好
面对这种情况我们引入动态参数rguments
的概念
arguments
是函数内部内置的伪数组
变量,它包含了调用函数时传入的所有实参。
<script>
// 求生函数,计算所有参数的和
function sum() {
// console.log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
// 调用求和函数
sum(5, 10)// 两个参数
sum(1, 2, 4) // 两个参数
script>
总结:
arguments
是一个伪数组
arguments
的作用是动态获取函数的实参
我们依旧回到上面假设的场景,除了动态参数之外,我们还可以用剩余参数
剩余参数允许我们将一个不定数量的参数表示为一个数组
<script>
function config(baseURL, ...other) {
console.log(baseURL) // 得到 'http://baidu.com'
console.log(other) // other 得到 ['get', 'json']
}
// 调用函数
config('http://baidu.com', 'get', 'json');
script>
总结:
...
是语法符号,置于最末函数形参之前,用于获取多余的实参...
获取的剩余实参,是个真数组
区分:展开运算符
展开运算符(…),将一个数组进行展开
const arr = [1,5,3,8,2]
//展开运算符可以展开数组
console.log(...arr)//1 5 3 8 2
说明:
典型应用:求数组的最大值,合并数组
const arr1 = [1,5,3,8,2]
//1.求数组最大值
//console.log(Math.max(1,5,3,8,2)) //8 max()里面不能接数组
//...arr == 1,5,3,8,2 虽然打印出来是不带逗号的,但传入之后实际上是带的
console.log(Math.max(...arr1)) //8
console.log(Math.min(...arr1)) //1
//2.合并数组
const arr2 = [3,4,5]
const arr = [...arr1,...arr2]
console.log(arr) //1,5,3,8,2,3,4,5
箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上。
<body>
<script>
// const fn = function () {
// console.log(123)
// }
// 1. 箭头函数 基本语法
// const fn = () => {
// console.log(123)
// }
// fn()
// const fn = (x) => {
// console.log(x)
// }
// fn(1)
// 2. 只有一个形参的时候,可以省略小括号
// const fn = x => {
// console.log(x)
// }
// fn(1)
// // 3. 只有一行代码的时候,我们可以省略大括号
// const fn = x => console.log(x)
// fn(1)
// 4. 只有一行代码的时候,可以省略return
// const fn = x => x + x
// console.log(fn(1))
// 5. 箭头函数可以直接返回一个对象
// const fn = (uname) => ({ uname: uname })
// console.log(fn('刘德华'))
script>
body>
总结:
()
{}
,并自动做为返回值被返回箭头函数中没有 arguments
,只能使用 ...
动态获取实参
<body>
<script>
// 1. 利用箭头函数来求和
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9
script>
箭头函数不会创建自己的this
,它只会从自己的作用域链的上一层沿用this。
<script>
// 以前this的指向: 谁调用的这个函数,this 就指向谁
// console.log(this) // window
// // 普通函数
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 对象方法里面的this
// const obj = {
// name: 'andy',
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭头函数的this 是上一层作用域的this 指向
// const fn = () => {
// console.log(this) // window
// }
// fn()
// 对象方法箭头函数 this
// const obj = {
// uname: 'pink老师',
// sayHi: () => {
// console.log(this) // this 指向谁? window
// }
// }
// obj.sayHi()
const obj = {
uname: 'pink老师',
sayHi: function () {
console.log(this) // obj
let i = 10
const count = () => {
console.log(this) // obj
}
count()
}
}
obj.sayHi()
script>
知道解构的语法及分类,使用解构简洁语法快速为变量赋值。
假设这样一个场景,现在给你一个数组[100,60,80],按照顺序分别代表最大值、最小值和平均值
按照一般情况下我们想要把数组内的数据分别清晰的赋值需要这样做
const arr = [100,60,80]
const max = arr[0]
const min = arr[1]
const avg = arr[2]
这样的写法太过繁琐,对此我们引入解构赋值
的概念
解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。
数组解构
是将数组的单元值(数组元素)
快速批量赋值给一系列变量的简洁语法
,如下代码所示:
<script>
// 普通的数组
let arr = [1, 2, 3]
// 批量声明变量 a b c
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
script>
典型应用:交换两个变量
let a = 1
let b = 3; //千万不能少了分号
[b,a] = [a,b]
console.log(a) //3
console.log(b) //1
总结:
=
左侧的 []
用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量大于
单元值数量时,多余的变量将被赋值为 undefined
小于
单元值数量时,可以通过 ...
获取剩余单元值,但只能置于最末位undefined
时默认值才会生效注:支持多维解构赋值,比较复杂后续有应用需求时再进一步分析
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法,如下代码所示:
<script>
// 普通对象
const user = {
name: '小明',
age: 18
};
// 批量声明变量 name age
// 同时将数组单元值 小明 18 依次赋值给变量 name age
const {name, age} = user
console.log(name) // 小明
console.log(age) // 18
// 1.对象解构的变量名 可以重新改名 旧变量名:新变量名
const {name:username,age} = user
// 2.解构数组对象
const pig = [
{
name:'佩奇',
age:18
}
]
const [{name,age}] = pig
console.log(name) // 佩奇
console.log(age) // 18
// 3.多级对象解构
const pig = {
name:'佩奇',
family:{
mother:'猪妈妈',
father:'猪爸爸',
sister:'乔治'
},
age:6
}
const {name,family:{mother,father,sister},age} = pig
console.log(name) // 佩奇
console.log(mother) //猪妈妈
console.log(father) //猪爸爸
console.log(sister) //乔治
console.log(age) // 18
const pig = [
{
name:'佩奇',
family:{
mother:'猪妈妈',
father:'猪爸爸',
sister:'乔治'
},
age:6
}
]
const [{name,family:{mother,father,sister},age}] = pig
script>
总结:
=
左侧的 {}
用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量属性名相同的变量
undefined
undefined
时默认值才会生效注:支持多维解构赋值
<body>
<script>
// 1. 这是后台传递过来的数据
const msg = {
"code": 200,
"msg": "获取新闻列表成功",
"data": [
{
"id": 1,
"title": "5G商用自己,三大运用商收入下降",
"count": 58
},
{
"id": 2,
"title": "国际媒体头条速览",
"count": 56
},
{
"id": 3,
"title": "乌克兰和俄罗斯持续冲突",
"count": 1669
},
]
}
// 需求1: 请将以上msg对象 采用对象解构的方式 只选出 data 方面后面使用渲染页面
// const { data } = msg
// console.log(data)
// 需求2: 上面msg是后台传递过来的数据,我们需要把data选出当做参数传递给 函数
// const { data } = msg
// msg 虽然很多属性,但是我们利用解构只要 data值
function render({ data }) {
// const { data } = arr
// 我们只要 data 数据
// 内部处理
console.log(data)
}
render(msg)
// 需求3, 为了防止msg里面的data名字混淆,要求渲染函数里面的数据名改为 myData
function render({ data: myData }) {
// 要求将 获取过来的 data数据 更名为 myData
// 内部处理
console.log(myData)
}
render(msg)
script>
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
注意:
1.forEach 主要是遍历数组
2.参数当前数组元素是必须要写的, 索引号可选。
<body>
<script>
// forEach 就是遍历 加强版的for循环 适合于遍历数组对象
const arr = ['red', 'green', 'pink']
const result = arr.forEach(function (item, index) {
console.log(item) // 数组元素 red green pink
console.log(index) // 索引号
})
// console.log(result)
script>
body>
filter() 方法创建一个新的数组
,新数组中的元素是通过检查指定数组中符合条件的所有元素
主要使用场景: 筛选数组符合条件的元素
,并返回筛选之后元素的新数组
<body>
<script>
const arr = [10, 20, 30]
// const newArr = arr.filter(function (item, index) {
// // console.log(item)
// // console.log(index)
// return item >= 20
// })
// 返回的符合条件的新数组
const newArr = arr.filter(item => item >= 20)
console.log(newArr)
script>
body>
核心思路:有多少条数据,就渲染多少模块,然后生成对应的html结构标签,赋值给list标签即可
字符串拼接
生成结构添加到页面中//1.声明一个字符串变量
let str = ''
//2.遍历数据
goodsList.forEach(item => {
//可以得到每一个数组元素 对象
// console.log(item);
const { name, price, picture } = item
str += `
${picture}" alt="">
${name}
${price}
`
});
document.querySelector('.list').innerHTML = str
需求:
PS:学完vue再看这个,觉得js原生注册的点击事件是真麻烦
//1.渲染函数 封装
function render(arr) {
//1.声明一个字符串变量
let str = ''
//2.遍历数据
arr.forEach(item => {
//可以得到每一个数组元素 对象
// console.log(item);
//解构
const { name, price, picture } = item
str += `
${picture}" alt="">
${name}
${price}
`
});
//追加给list
document.querySelector('.list').innerHTML = str
}
render(goodsList) //页面一打开就要渲染
//2.过滤筛选
document.querySelector('.filter').addEventListener('click', e => {
const { tagName, dataset } = e.target
//判断
if (tagName === 'A') {
// console.log('111');
//arr返回新数组
let arr = goodsList
if (dataset.index === '1') {
arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
} else if (dataset.index === '2') {
arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
} else if (dataset.index === '3') {
arr = goodsList.filter(item => item.price >= 300)
}
//渲染函数
render(arr)
}
})