JS高级（二）

whaoe1

已于 2022-07-27 20:08:52 修改

阅读量57

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

于 2022-07-27 20:08:38 首次发布

本文链接：https://blog.csdn.net/reinforce1006/article/details/125363179

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的作用域、执行上下文与作用域链，阐述了它们之间的区别与联系。讲解了变量查找规则，并通过实例展示了循环遍历加监听时闭包的应用。接着探讨了闭包的产生、作用、生命周期及其在自定义模块中的应用，同时也提到了闭包可能导致的内存问题和解决方案。最后，讨论了内存溢出和内存泄露的概念及其影响。

摘要由CSDN通过智能技术生成

作用域与作用域链

作用域

1.理解
–就是一块“地盘”，一个代码段所在的区域
–它是静态的（相对于上下文对象），在编写代码时就确实了
2. 分类
–全局作用域
–函数作用域
–没有块作用域（ES6有了）
3.作用
–隔离变量，不同作用域下同名变量不会有冲突

作用域与执行上下文

1.区别1
–全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
–全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
–函数执行上下文是在调用函数时，函数体代码执行之前创建
2.区别2
–作用域是静态的，只要函数定义好了就一直存在，且不会再变化
–执行上下文是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放
3.联系
–执行上下文环境（对象）是从属于所在的作用域
–全局上下文环境==》全局作用域
–函数上下文环境==》对应的函数作用域

作用域链

1.理解
–多个上下级关系的作用域形成的链，它的方向是从下向上（从内到外）
–查找变量时就是沿着作用域链来查找的
2.查找一个变量的查找规则
–在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
–在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
–再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常

题

var x = 10;
function fn() {
	console.log(x);
}
function show(f) {
	var x = 20;
	f();
}
show(fn);//x = 10   fn的作用域中找

var fn = function () {
	console.log(fn)
}
fn()//fn的函数

var obj = {
	fn2: function () {
		console.log(fn2)//fn2不是一个函数
		console.log(this.fn2)//function函数
	}
}
obj.fn2()

循环遍历加监听

<body>
	<button>测试1<button>
	<button>测试2<button>
	<button>测试3<button>

	<script>
		var btns = document.getElementByTagName('button')
		//遍历加监听
		/*for (var i = 0,length = btns.length; i < length; i++){
			var btn = btns[i]
			btn.onclick = function () {
				alert('第'+(i+1)+'个')//第4个
			}
		}*/
		
		/*for (var i = 0,length = btns.length; i < length; i++){
			var btn = btns[i]
			btn.index = i
			btn.onclick = function () {
				alert('第'+(this.index + 1)+'个')
			}
		}*/
		for (var i = 0,length = btns.length; i < length; i++){
			(function (i) {
				var btn = btns[i]
				btn.onclick = function () {
					alert('第'+(i+1)+'个')
				}
			})(i)
		}
	<script>
</body>

闭包

1.如何产生闭环？
–当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包
2.闭包到底是什么？
–使用chrome调试查看
—理解1：闭包时嵌套的内部函数
—理解2：包含被引用变量（函数）的对象
–注意：闭包存在于嵌套的内部函数中
3.产生闭包的条件
–函数嵌套
–内部函数引用了外部函数的数据（变量/函数）

function fn1 () {
	var a = 2
	var b = 'abc'
	function fn2 () {//执行函数定义就会产生闭包（不用调用内部函数）
		console.log(a)
	}
}
fn1()

常见的闭包

1.将函数作为另一个函数的返回值
2.将函数作为实参传递给另一个函数调用

//将函数作为另一个函数的返回值
function fn1 () {
//此时闭包已经产生了（函数提升，内部函数对象已经创建了）
	var a = 2
	function fn2 () {
		a++
		console.log(a)
	}
	return fn2
}
var f = fn1()//产生一个闭包，看调用外部函数几次
f() //3
f() //4

//将函数作为实参传递给另一个函数调用
function showDelay(msg,time) {
	setTimeout(function () {
		alert(msg)
	}, time)
}
showDelay('atguigu',2000)

闭包的作用

1.使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
2.让函数外部都可以操作（读写）到函数内部的数据（变量/函数）

问题：
1.函数执行完后，函数内部声明的局部变量是否还存在？一般是不存在，存在于闭包中的变量才可能存在
2.在函数外部能直接访问函数内部的局部变量吗？不能，但能通过闭包让外部操作

闭包的生命周期

1.产生：在嵌套内部函数定义执行完时就产生了（不是在调用）
2.死亡：在嵌套的内部函数成为垃圾对象时

//将函数作为另一个函数的返回值
function fn1 () {
//此时闭包已经产生了（函数提升，内部函数对象已经创建了）
	var a = 2
	function fn2 () {
		a++
		console.log(a)
	}
	return fn2
}
var f = fn1()//产生一个闭包，看调用外部函数几次
f() //3
f() //4
f = null //闭包死亡（包含闭包的函数对象成为垃圾对象）

闭包的应用（自定义JS模块）

1.具有特定功能的js文件
2.将所有的数据和功能都封装在一个函数内部（私有的）
3.只向外暴露一个包含n个方法的对象或函数
4.模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能

(function () {
	//私有数据
	var msg = 'My atguigu'
	//操作数据的函数
	function doSomeThing() {
		console.log('doSomeThing()' + msg.toUpperCase())
	}
	function doOtherThing() {
		console.log('doOtherThing()' + msg.toLowerCase())
	}
	//向外暴露对象（给外部使用的方法）
	/*return {
		doSomeThing：doSomeThing，
		doOtherThing：doOtherThing
	}*/
	//给window设置属性值
	window.myModule2 = {
		doSomeThing：doSomeThing，
		doOtherThing：doOtherThing
	}
})()
myModule2. doSomeThing()
myModule2. doOtherThing()

闭包的缺点及解决

1.缺点
1>函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
2>容易造成内存泄露
2.解决
1>能不用闭包就不用
2>及时释放

内存溢出与内存泄露

1.内存溢出
-一种程序运行出现的错误
-当程序员运行需要的内存超过了剩余的内存时，就出抛出内存溢出的错误
2.内存泄露
-占用的内存没有及时释放
-内存泄露积累过多就容易导致内存溢出
-常用的内存泄露
-意外的全局变量
-没有及时清理的计时器或回调函数
-闭包

题

//片段1
var name = 'The window'；
var object = {
	name : 'My Object',
	getNameFunc : function(){
		return function(){
			return this.name;
		};
	}
};
alert(object.getNameFunc()());// The window
//直接执行后面的函数
//没有闭包

//片段2
var name2 = 'The window'；
var object2 = {
	name2 : 'My Object',
	getNameFunc : function(){
		var that = this;
		return function(){
			return that.name2;
		};
	}
};
alert(object2.getNameFunc()());// My Object
//有闭包 that

//片段3
function fun(n,o) {
	console.log(o)
	return {
		fun:function(m){
			return fun(m,n);//调用外部的函数，n导致闭包
		}
	}
}
var a = fun(0);//产生一个闭包给a，后面只使用a里的闭包
 a.fun(1);//m=1,n=0
 a.fun(2);//
 a.fun(3);//
 //undefined;0;0;0
var b = fun(0).fun(1).fun(2).fun(3);
//undefined;0;1;2;
var c = fun(0).fun(1); c.fun(2); c.fun(3);
//undefined;0; 1;1;