作用域、作用域链精解、立即执行函数、闭包、闭包精细版

最新推荐文章于 2019-10-09 16:59:24 发布
最新推荐文章于 2019-10-09 16:59:24 发布
阅读量163 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41509200/article/details/101128047
版权

作用域、作用域链精解、立即执行函数、闭包、闭包精细版

作用域、作用域链精解基本概念

  1. 运行期上下文
    当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。
  2. 查找变量
    从作用域链的顶端依次向下查找
  3. [[scope]]
    每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。
    [[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。
  4. 作用域链
    [[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫作用域链。
示例
function a() {
	function b() {
		var b = 234;
	}
	var a = 123;
	b();
}
var glob = 100;
a();
函数作用域链详解：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

立即执行函数

功能：

此类函数没有声明，在一次执行过后即释放，适合做初始化工作。
实例如下

(function () {
	var a = 1;
	var b = 2;
	console.log(a + b);
}())

在这里插入图片描述

(function (a , b , c) {
	console.log(a + b + c * 2);
}(1 , 2 , 3))

在这里插入图片描述

var result = (function (a , b , c) {
	var d = a + b * 2 + c * a;
	return d
}(1 , 2 , 3))
console.log(result);

在这里插入图片描述
两种常用写法
(function() {} () ); W3C建议使用第一种
(function() {} ) ();

阿里巴巴曾经的一个考试题

function test(a , b , c , d) {
	console.log( a + b + c + d);
}(1 , 2 , 3 , 4);

上面的代码就相当于下面的代码，讲函数test()的声明与(1 , 2 , 3 , 4);分开执行，但不报错也不输出任何的东西

function test(a , b , c , d) {
	console.log( a + b + c + d);
}





(1 , 2 , 3 , 4);

在这里插入图片描述

闭包

基本概念

闭包：
当函数内部被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。

function a() {
	function b() {
		var bb = 234;
		aa++;
		console.log(aa);
	}
	var aa = 123;
	return b;
}
var glob = 100;
var demo = a();
demo();
demo();

代码执行期上下文过程
在这里插入图片描述
函数a返回的是b的引用
在这里插入图片描述

作用

  1. 实现共有变量（函数累加器）

      function add() {
  	var count = 123;
 	function demo() {
 		count++;
 		console.log(count);
 	}
 	return demo;
  }
  var counter = add();
  counter();
  counter();
  counter();
  counter();
  counter();
  counter();

在这里插入图片描述

  1. 可以做缓存（存储结构）

      function eater() {
  	var food = "";
  	var obj = {
  		eat : function () {
 		console.log( "I am eating " + food);
 		food = "";
 		},
 		push: function (myFood) {
 		food = "myFood";
 		}
 	}
 	return obj;
  }
  var eater1 = eater();
  eater1.push("banana");
  eater1.eat();

在这里插入图片描述

  1. 可以实现封装，属性私有化

  2. 模块化开发，防止污染全局变量

详解

经典代码

function test() {
	var arr = [];
	for(var i = 0; i < 10; i++) {
		arr[i] = function () {
		document.write(i + " ");
		}
	}
	return arr;
}
var myArr = test();
for(var j = 0; j < 10; j++) {
	myArr[j]();
}

代码执行结果
在这里插入图片描述

代码执行过程，test()函数中的arr[i] = function() {}执行时并不执行function中的代码，只是传了一个引用值给arr[i]，等到真正执行的时候才会回来看function中的代码并执行
要解决上述矛盾，必须使用立即执行函数，代码如下

function test() {
	var arr = [];
	for(var i = 0; i < 10; i++) {
		(function (j) {
			arr[j] = function () {
				document.write(j + " ");
			}
		}(i));
	}
	return arr;
}
var myArr = test();
for(var j = 0; j < 10; j++) {
	myArr[j]();
}
基本规律

只有表达式才能被执行

function() {}

上面的代码称为函数声明，不是表达式，后面加()后会爆出低级语法错误
function() {} ();

在这里插入图片描述
而下面的代码会正常执行，相当于var demo = function () {console.log(“hello”);}是一个表达式，运行完一次之后就不能再运行了，相当于立即执行函数

var demo = function () {
	console.log("hello");
}();

在这里插入图片描述

再函数声明前面加上 + - ! 后面加()都能将其变成函数表达式，也类似于立即执行函数，代码如下

+ function test() {
	console.log("hello");
}();

- function test() {
	console.log("hello");
}();

! function test() {
	console.log("hello");
}();

在这里插入图片描述

阿里曾经一道笔试题
使用原生js，addEventListener，给每个li元素绑定一个click事件，输出它们的顺序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
	<style>
		*{
			margin : 0;
			padding : 0;
		}
		ul {
			list-style: none;
		}
		li:nth-of-type(2n) {
			background-color : red; 
		}
		li:nth-of-type(2n + 1) {
			background-color : green; 
		}
	</style>
</head>

<body>
	<ul>
		<li>first</li>
		<li>second</li>
		<li>third</li>
		<li>forth</li>
	</ul>
	<script>
	        function test() {
				var liCollection = document.getElementsByTagName('li');
				for(var i = 0; i < liCollection.length; i++) {
					(function (j) {
						liCollection[j].onclick = function() {
							console.log(j);
						}
						
					}(i))
				}
			}
		test();
	</script>
</body>
</html>
扩展

写一个方法，求一个字符串的字节长度。（提示：字符串有一个方法charCodeAt() ，一个中文占两个字节，一个英文占一个字节）
定义和方法
charCodeAt()方法可返回指定位置字符的Unicode编码，这个返回值是0~65535之间的整数。（当返回值 <= 255时，为英文，当返回值 > 255时为中文）

语法

stringObject.charCodeAt(index)

eg:
<script>
	var str = "Hello, World!";
	document.write(str.charCodeAt(1));	//输出101
</script>

代码如下所示：

function getBytesLen(str) {
	var count = 0;
	for(var i = 0; i < str.length; i ++) {
		if(str.charCodeAt(i) <= 255) {
			count ++;
		} else if(str.charCodeAt(i) > 255) {
			count += 2;
		}
		}
		console.log(count);
}
getBytesLen("Hello, World!我爱矿大");

简化代码

function getBytesLen(str) {
	var len = str.length;
	var count = len;
	for(var i = 0; i < len; i ++) {
		if(str.charCodeAt(i) > 255) {
			count ++;
		}
		}
		console.log(count);
}
getBytesLen("Hello, World!我爱矿大");

结果如下图
在这里插入图片描述

微店前端面试题

写出下面程序的执行结果（此题考查逗号运算符的结果，结果返回最后一个逗号后面的表达式的值）

var f = (
	function f() {
		return "1";
	},
	function g() {
		return 2;
	}
	());
console.log(typeof f);

在这里插入图片描述

var x = 1;
	if(function f() {}) {
		x += typeof f;
	}
console.log(x);

在这里插入图片描述

iReverse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
作用域、作用域链精解，立即执行函数，闭包
simplehxl的博客
05-17 387
作用域精解[[scope]]:每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供javascript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。运行期上下文：当函数执行...
（重点）作用域、作用域链精解，立即执行函数，闭包（上）
weixin_43706224的博客
05-24 145
注意：A函数不执行系统看不到B函数和C函数 只有里面的能看到外面的，外面的不能看到里面的看，依次按顺序访问
javascript学习之函数作用域精解
chengpang2665的博客
12-05 103
1.每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取[[scope]]就是其中一个；[[scope]]就是我所说的作用域，其中存储了运行期上下文的集合 2.作用域链：[[scope]]中存储的执行期上下文对象的集合，...
CUMTOJ作业札记 Problem1841：有效的括号
Lunarhem的博客
08-03 487
Problem1841：有效的括号 题目描述 给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 注意空字符串可被认为是有效字符串。 输入 多组数据 每组是一个由'('，')'，'{'，'}'，'['，']' 组成的括号序列 每组字符串长度不超过50。...
带名字的约瑟夫环问题
追梦的Anker
04-01 1033
（1）带人名的Josephus环问题 Josephus环问题为：设编号为1，2，… n的n个人围坐一圈，约定从编号为k（1）的人开始从1报数，数到m 的那个人出列要求：它的下一位又重新从1开始报数，数到m的那个人又出列，依次类推，直到所有人出列为止。   输入人的个数n（n），接下来每行输入一个人的名字（人名不超过15个字符），接下来输入k和m，k和m之间用逗号隔开。 最后按照人名输出
PERL 实例精解（原书第4 版）
09-25
此外，还会有关于块级作用域、匿名函数和闭包的实例，这些都是Perl中高级特性的体现。 正则表达式是Perl的一大特色，它提供了强大的文本匹配和操作能力。书中会详细讲解正则表达式的语法，包括各种元字符、修饰符和...
《JAVASCRIPT编程精解 原书第2版》PDF
09-02
闭包允许函数访问并操作其外部作用域的变量，而高阶函数则可以接收函数作为参数或返回函数，极大地提高了代码的灵活性和可复用性。 此外，书中也涵盖了JavaScript的事件处理和DOM操作，这对于构建交互式的Web应用至...
JavaScript编程精解
10-13
- **闭包**：一个函数能够记住并访问其外部作用域中的变量，即使在该函数已经执行完毕之后也是如此。 #### 3.2 异步编程 - **回调函数**：用于处理异步操作的结果。 - **Promise**：一种更优雅地处理异步操作的方式...
Eloquent_JavaScript（JavaScript编程精解）第二版 英文版
01-29
环境是指程序执行的上下文，本节解释了局部变量与全局变量之间的差异以及作用域链的概念。 ##### 3.4 **Functions** 函数是程序的基本构建块之一，本节详细介绍了函数的定义方式、参数传递机制以及作用域规则。通过...
Swift面试20问精解.docx
最新发布
04-19
闭包是一种可以捕获并记住其外部作用域中的任何常量和变量的代码块。它们可以被视为自包含的函数，广泛应用于处理异步操作或作为函数的参数传递。闭包可以定义为： ```swift { (parameters) -> returnType in // ...
POJ 题目1306 Combinations（排列组合）
Jogging_Clown
12-11 1059
Combinations Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8701   Accepted: 4047 Description Computing the exact number of ways that N things can be taken
矩阵连乘---求几个矩阵乘积的最小值
wanwu_fusu的博客
10-15 768
#include&lt;iostream&gt; using namespace std; #define MAXLEN 100 void MatrixChain(int p[MAXLEN],int n,int m[MAXLEN][MAXLEN],int s[MAXLEN][MAXLEN]) {             for (int i = 1; i &lt;= n; i++)        ...
js笔记——作用域、作用域链精解、闭包、立即执行函数’
芊雨的博客
04-18 300
作用域、作用域链精解 运行期上下文：当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。 查找变量：从该函数的作用域链的顶端依次向下查找 [[scope]]:每个javascript函数都是一个对象，对象中有些属性我们可以...
从CUMT校园导航出现的问题看CSS布局设计（二）响应式 / 自适应
weixin_30549175的博客
01-23 97
dad 转载于:https://www.cnblogs.com/sleeping-dog/p/8337526.html
JS作用域、立即执行函数、闭包
M_DREAMER的博客
04-27 4040
作用域    首先先介绍一下作用域等一些基础概念。 每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]] : 指的就是我们所说的作用域，其中存储了执行期上下文的集合作用域链 ： [[scope]] 中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链接叫做作用域...
Acwing 282. 石子合并 CUMToj 沙子的质量
weixin_41514525的博客
09-28 333
设有N堆石子排成一排，其编号为1，2，3，…，N。 每堆石子有一定的质量，可以用一个整数来描述，现在要将这N堆石子合并成为一堆。 每次只能合并相邻的两堆，合并的代价为这两堆石子的质量之和，合并后与这两堆石子相邻的石子将和新堆相邻，合并时由于选择的顺序不同，合并的总代价也不相同。 例如有4堆石子分别为 1 3 5 2， 我们可以先合并1、2堆，代价为4，得到4 5 2， 又合并 1，2堆，代价...
CUMT算法实验三
qq_41509200的博客
10-09 1102
CUMTOJ算法实验三 问题 A: 评分系统 题目描述 英语俱乐部举办了一个叫做“英文金曲大赛”的节目。这个节目有好多人参加，这不，成绩出来了，渊子当是很勇敢，自告奋勇接下了算出大家的总得分的任务。当时有7个评委，每个评委都要给选手打分，现在要求去掉一个最高分和去掉一个最低分，再算出平均分。结果精确到小数点后两位。 输入 测试数据包括多个实例。每组数据包括7个实数，代表评委们对该选手的评分。紧接着...
360网络安全大学-基础实践-计算机网络
qq_41509200的博客
09-24 249
计算机网络知识点小结 总结 分述
JavaScript函数与作用域
qq_41509200的博客
09-18 99
JavaScript函数与作用域 函数特点 高内聚，低耦合 基本格式与命名规范 函数名首字母小写，后面的首字母均大写 function printHelloWorld(a) { document.write("Hello, World!"); return a; } 三种函数定义方式 直接定义函数表达式 function printHelloWorld() {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值