javascript闭包函数的优缺点

最新推荐文章于 2023-08-06 19:12:58 发布

sunyin.liu

最新推荐文章于 2023-08-06 19:12:58 发布

阅读量165

点赞数

分类专栏： javascript 文章标签：闭包函数 let

本文链接：https://blog.csdn.net/weixin_42066070/article/details/97394248

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>闭包closure</title>
 </head>
 <body>
	<div id="app">222222</div>
   <script>
		//console.log(a)
		(function(win){
			/*
			闭包的定义
			闭包指的是：能够访问另一个函数作用域的变量的函数。
			闭包就是一个函数，这个函数能够访问其他函数的作用域的变量
			*/
			function outer(){
				var a = 'hello';
				return function(){
					a += ' world'
					return a;
				}
			}
			var b = outer();
			//console.log(b);

			/*
			坑点1： 引用的变量可能发生变化
			*/
			function outer1(){
				var result = [];
				for(var i = 0; i < 10;++i){
					result[i] = function(){
						return i;
					}
				}
				//console.log(result)
				return result;
			
			
			}
			var a = outer1()[0]()
			//console.log(a)
			/*
			1.解决方案
			*/
			function reOuter1(){
				var result = [];
				for(var i = 0; i < 10;++i){
					result[i] = (function(num){
						return function(){
							console.log(num)
						}
					})(i)
				}
				//console.log(result)
				return result;
			}
			var c = reOuter1()[0]()
			console.log(reOuter1())
			var b = 100;
			window.b = b;//局部变量编程全局变量
			console.log(win)
			/*坑点2: this指向问题*/
			var object = {
				name:'张三',
				getName:function(){
					return function(){
						console.log(this.name)
					}
				}
			
			}
			object.getName()()//undefined
			/*解决方案*/
			var reObject = {
				name:'张三',
				getName:function(){
					var page = this;//第一种
					//第二种 箭头函数 ()=>
					return function(){
						console.log(page.name)
					}
				}
			
			}
			reObject.getName()()//张三
			/*坑点3：内存泄露问题*/
			function showId(){
				var oApp = document.querySelector('#app');
				oApp.onclick = function(){
					alert(oApp.id) // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
				}
				console.log(oApp)
			}
			
			/*es6没出来之前，用var定义变量存在变量提升问题，eg:*/

			(function(){
				for(var i = 0; i<10;++i){
					console.log(i)
				}
			})()
			showId()
			console.log(i)
		})(window)
		console.log(b)
   </script>
 </body>
</html>

sunyin.liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript闭包函数的优缺点

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="...
复制链接

扫一扫