9159金沙游艺场

图片 11
10个HTML5素描及绘画设计工具

老师讲课博客目录

JavaScript 深入之执行上下文

JavaScript 深入之执行上下文栈

2017/05/13 · JavaScript
·
执行上下文

原文出处: 冴羽   

JavaScript 深入之闭包

2017/05/21 · JavaScript
· 闭包

原文出处: 冴羽   

JavaScript 深入之执行上下文

2017/05/18 · JavaScript
·
执行上下文

原文出处: 冴羽   

顺序执行?

如果要问到JavaScript代码执行顺序的话,想必写过JavaScript的开发者都会有个直观的印象,那就是顺序执行,毕竟

var foo = function () { console.log(‘foo1’); } foo(); // foo1 var foo =
function () { console.log(‘foo2’); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var foo = function () {
 
    console.log(‘foo1’);
 
}
 
foo();  // foo1
 
var foo = function () {
 
    console.log(‘foo2’);
 
}
 
foo(); // foo2

然而去看这段代码:

function foo() { console.log(‘foo1’); } foo(); // foo2 function foo() {
console.log(‘foo2’); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
 
    console.log(‘foo1’);
 
}
 
foo();  // foo2
 
function foo() {
 
    console.log(‘foo2’);
 
}
 
foo(); // foo2

打印的结果却是两个foo2。

刷过面试题的都知道这是因为JavaScript引擎并非一行一行地分析和执行程序,而是一段一段地分析执行。当执行一段代码的时候,会进行一个“准备工作”,比如第一个例子中的变量提升,和第二个例子中的函数提升。

但是本文真正想让大家思考的是:这个”一段一段”中的“段”究竟是怎么划分的呢?

到底JavaScript引擎遇到一段怎样的代码时才会做’准备工作’呢?

定义

MDN 对闭包的定义为:

闭包是指那些能够访问自由变量的函数。

那什么是自由变量呢?

自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。

由此,我们可以看出闭包共有两部分组成:

闭包 = 函数 + 函数能够访问的自由变量

举个例子:

var a = 1; function foo() { console.log(a); } foo();

1
2
3
4
5
6
7
var a = 1;
 
function foo() {
    console.log(a);
}
 
foo();

foo 函数可以访问变量 a,但是 a 既不是 foo 函数的局部变量,也不是 foo
函数的参数,所以 a 就是自由变量。

那么,函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛……

还真是这样的!

所以在《JavaScript权威指南》中就讲到:从技术的角度讲,所有的JavaScript函数都是闭包。

咦,这怎么跟我们平时看到的讲到的闭包不一样呢!?

别着急,这是理论上的闭包,其实还有一个实践角度上的闭包,让我们看看汤姆大叔翻译的关于闭包的文章中的定义:

ECMAScript中,闭包指的是:

  1. 从理论角度:所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量,这个时候使用最外层的作用域。
  2. 从实践角度:以下函数才算是闭包:
    1. 即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)
    2. 在代码中引用了自由变量

接下来就来讲讲实践上的闭包。

前言

在《JavaScript深入之执行上下文栈》中讲到,当JavaScript代码执行一段可执行代码(executable
code)时,会创建对应的执行上下文(execution context)。

对于每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object,VO)
  • 作用域链(Scope chain)
  • this

然后分别在《JavaScript深入之变量对象》、《JavaScript深入之作用域链》、《JavaScript深入之从ECMAScript规范解读this》中讲解了这三个属性。

阅读本文前,如果对以上的概念不是很清楚,希望先阅读这些文章。

因为,这一篇,我们会结合着所有内容,讲讲执行上下文的具体处理过程。

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图