JavaScript 预编译与作用域

更新日期: 2020-03-19阅读: 2k标签: 作用域
JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念

预编译

JavaScript 执行步骤

检查通篇的语法错误 -> 预编译 -> 解释执行

暗示全局变量

变量不声明直接赋值,挂载到 window 对象下

a = 1;
console.log(a); // 1

function test() {
    var b = c = 1;
}
test();
console.log(c); // 打印 1,c 未声明,直接赋值,暗示全局变量
console.log(window.b); // undefined,打印对象不存在属性,返回 undefined
console.log(b); // 报错

预编译过程

函数声明整体提升

变量声明提升,赋值不提升

test(); // 放在前面可以执行
function test() {

}
console.log(a); // 打印出 undefined
var a = 1; // 声明提升,赋值不提升

GO

global object,全局上下文,即 window 对象

在全局执行的前一刻,生成 GO,即变量声明提升和函数声明提升

步骤:寻找变量声明 -> 寻找函数声明 -> 顺序执行

var a = 1; // (1)
function a() {
    console.log(2);
}
console.log(a); // (2)
// 全局预编译
// 变量声明 a -> GO{a: undefined} 
// 函数声明 a(){} -> GO{a: a(){}} 
// 全局执行
// 执行 (1) -> GO{a: 1}
// 执行 (2),打印 1
console.log(a); // (1)
var a = 1; // (2)
console.log(a); // (3)
function a() {
   console.log(2);
}
// 全局预编译
// 变量声明 a -> GO{a: undefined} 
// 函数声明 a(){} -> GO{a: a(){}}
// 全局执行
// 执行 (1),打印 a(){...}
// 执行 (2) -> GO{a: 1}
// 执行 (3),打印 1

AO

activation object,函数上下文,即活跃对象

每个函数都有自己的 AO,函数执行前一刻生成,执行完以后销毁

步骤:寻找形参和变量声明 -> 形参实参映射 ->寻找函数声明 -> 顺序执行

注意:AO 中有 var a 声明,不会找 GO 里的 a

function test(a) {
    console.log(a); // (1)
    var a = 1; // (2)
    console.log(a); // (3)
    function a() {}
    console.log(a); // (4)
    var b = function() {} // (5)
    console.log(b); // (6)
    function d() {}
}
test(2); 
// 全局预编译
// 函数声明 test(){} -> GO{a: test(){}} 
// 全局执行
// 执行到 test(2),函数 test 预编译
// 变量声明 a, b -> test_AO{a: undefined, b: undefined}
// 参数映射 -> test_AO{a: 2, b: undefined}
// 函数声明 -> test_AO{a: a(){}, b:undefined, d: d(){}}
// 函数 test 执行
// 执行 (1),打印 a(){}
// 执行 (2) -> test_AO{a: 1, b: undefined, d: d(){}}
// 执行 (3),打印 1
// 执行 (4),打印 1
// 执行 (5) -> test_AO{a: 1, b: (){}, d: d(){}}
// 执行 (6),打印 (){}
// 函数 test 执行完毕,test_AO 销毁

练习

a = 1; // (1)
function test() {
    console.log(a); // (2)
    a = 2; // (3)
    console.log(a); // (4)
    if(a) { // (5),预编译时不看 if,因为没有执行该句
        var a = 3; 
    }
    console.log(a); // (6)
}
test();
var a;
// 全局预编译
// 变量声明、函数声明 -> GO{a: undefined, test: test(){}}
// 全局执行
// 执行 (1) -> GO{a: 1, test: test(){}}
// 执行到 test(),函数 test 预编译
// 变量声明 -> test_AO{a: undefined}
// 函数 test 执行
// 执行 (2),打印 undefined
// 执行 (3) -> AO{a: 2}
// 执行 (4),打印 2
// 执行 (5) -> AO{a: 3}
// 执行 (6) -> 打印 3
// 函数 test 执行完毕,test_AO 销毁

作用域

函数的属性

函数是一种引用类型

有一些原生属性可以利用,也有一些属性不能访问,是 js 引擎内部固有的隐式属性

[[scope]] 就是 JS 内部隐式属性,是函数存储作用域链的容器

function test() {

}
console.log(test.name); // test
console.log(test.length); // 0

作用域链

在函数声明时,生成 JS 内部隐式属性 [[scope]],该属性的第 0 位保存全局执行期上下文 GO 的一个引用

在函数执行前一刻,[[scope]] 第 0 位保存函数执行期上下文 AO,后一位保存外层函数的 AO,最后保存 GO 引用。如果没有外层函数,则第 0 位 AO,第 1 位 GO。在寻找声明时,都会由 0 位向后寻找,即先看自己,再看外层,最后看全局

在函数执行完毕时,从 [[scope]] 中销毁 AO

function a() {
    funtion b() {
        var b = 2; // (3)
    }
    var a = 1; // (2)
    b(); 
}
var c = 3; // (1)
a();
// 全局预编译
// -> GO{c: undefined, a: a(){}}
// -> a.SCOPE = [
//               GO{c: undefined, a: a(){}}
//       ]
// 全局执行
// 执行 (1)
// -> GO{c: 3, z a(){}}
// -> a.SCOPE = [
//               GO{c: 3, a: a(){}}
//       ]
// 执行到 a(),函数 a 预编译
// -> a.SCOPE = [
//               a_AO{a: undefined, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// -> b.SCOPE = [
//               a_AO{a: undefined, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// 函数 a 执行
// 执行 (2)
// -> a.SCOPE = [
//               a_AO{a: 1, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// 执行到 b(),函数 b 预编译
// -> b.SCOPE = [
//               b_AO{b: undefined}, 
//               a_AO{a: 1, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// 执行 (3)
// -> b.SCOPE = [
//               b_AO{b: 3}, 
//               a_AO{a: 1, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// 函数 b 执行完毕,b_AO 销毁
// -> b.SCOPE = [
//               a_AO{a: 1, b: b(){}}, 
//               GO{c: 3, a: a(){}}
//       ]
// 函数 a 执行完毕,a_AO 销毁
// -> b.SCOPE 销毁
// -> a.SCOPE = [
//               GO{c: 3, a: a(){}}
//       ]

作者: pgjett
出处: https://pgjett.cnblogs.com

链接: https://www.fly63.com/article/detial/8258

ES6之块级作用域

在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。

es6块级作用域

在JavaScript中使用var定义一个变量,无论是定义在全局作用域函数函数的局部作用域中,都会被提升到其作用域的顶部,这也是JavaScript定义变量的一个令人困惑的地方。由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量,用来创建块级作用域。

Js作用域和执行上下文

作用域是在函数声明的时候就确定的一套变量访问规则,而执行上下文是函数执行时才产生的一系列变量的集合体。也就是说作用域定义了执行上下文中的变量的访问规则,执行上下文是在这个作用域规则的前提下执行代码的。

Js中的Function类型_设置函数的作用域

先声明一个name变量,然后声明一个person对象,person包含name和sayName属性。当直接在对象上进行方法的调用时:person.sayName(),函数的作用域遵循“谁调用就是谁”的原则,sayName的作用域(也就是this)指向的就是person。

ES5中模仿块级作用域

有一定JavaScript开发经验的人应该会熟悉下面这种立即执行函数的写法:不过即使不熟悉也没关系,这里我会讲解这种写法的含义。先来看下面这个更容易理解的示例:

作用域 CSS 回来了

几年前,消失的作用域 CSS,如今它回来了,而且比以前的版本要好得多。更好的是,W3C规范基本稳定,现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下,引诱其他浏览器构建它们的实现

Js静态作用域和动态作用域

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。 动态作用域–函数的作用域是在函数调用的时候才决定的

深入理解 JavaScript, 从作用域与作用域链开始

作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说,作用域决定了变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。

Js作用链、作用域

函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合

不只是块级作用域,你不知道的let和const

ES6新增了两个重要的关键字let和const,相信大家都不陌生,但是包括我在内,在系统学习ES6之前也只使用到了【不存在变量提升】这个特性。let声明一个块级作用域的本地变量

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!