JavaScript作用域原理(二)——预编译

简介: JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程。并且JavaScript是有预编译过程的,在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式)。

一、变量执行之前,会被赋为undefined


<p id="scope2" style="color:red"></p>


function echo(p, html) {
            p.innerHTML += html + '<br/>';
        }
     var pscope2 = document.getElementById('scope2');
        echo(pscope2, typeof param); //结果:undefined
        var param = 'defined';
        echo(pscope2, typeof param); //结果:string


在调用函数执行之前, 会首先创建一个活动对象,然后搜寻这个函数中的局部变量定义和函数定义,变量的值会在真正执行的时候才计算,此时只是简单的赋为undefined。

 

二、函数定义式和函数表达式的不同


echo(pscope2, typeof scope2); //结果:function
        echo(pscope2, typeof func); //结果:undefined
        function scope2() { //函数定义式
        };
        var func = function() { //函数表达式
        };
        echo(pscope2, typeof func); //结果:function


对于函数定义式, 会将函数定义提前。而函数表达式,会在执行过程中才计算。

 

三、以段为处理单元


<script type="text/javascript">
    echo(pscope2, typeof scope_next2);//结果:undefined
</script>
<script type="text/javascript">
        function scope_next2() {
        };
</script>


<script type="text/javascript">
    function scope_next2() {//以段为处理单元
            pscope2.innerHTML += 'in first scope_next2<br/>';
        };
        //echo(pscope2, typeof scope_next2);//结果:undefined
        scope_next2();
</script>
<script type="text/javascript">
     var pscope2 = document.getElementById('scope2');
        function scope_next2() {
            pscope2.innerHTML += 'in second scope_next2<br/>';
        }
        scope_next2();
</script>

两个同名的函数scope_next2,分别输出不同的内容,后一个没有将前面一个的内容覆盖掉。

 

对预编译的理解上可能还有些问题,欢迎大家来指正。



相关文章
|
15天前
|
存储 JavaScript 前端开发
解释 JavaScript 中的作用域和作用域链的概念。
【4月更文挑战第4天】JavaScript作用域定义了变量和函数的可见范围,静态决定于编码时。每个函数作为对象拥有`scope`属性,关联运行期上下文集合。执行上下文在函数执行时创建,定义执行环境,每次调用函数都会生成独特上下文。作用域链是按层级组织的作用域集合,自内向外查找变量。变量查找遵循从当前执行上下文到全局上下文的顺序,若找不到则抛出异常。
20 6
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JS的执行上下文、词法作用域和闭包(中)
深入理解JS的执行上下文、词法作用域和闭包(中)
|
1月前
|
存储 自然语言处理 JavaScript
深入理解JS的执行上下文、词法作用域和闭包(上)
深入理解JS的执行上下文、词法作用域和闭包(上)
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
27天前
|
JavaScript 前端开发
js开发:请解释什么是作用域(scope),并说明全局作用域、局部作用域和块级作用域的区别。
JavaScript中的作用域规定了变量和函数的可见性与生命周期。全局作用域适用于整个脚本,变量可通过全局对象访问,可能导致命名冲突和内存占用。局部作用域限于函数内部,每次调用创建新作用域,执行完毕后销毁。ES6引入的块级作用域通过`let`和`const`实现,变量仅在其代码块内有效,并有暂时性死区。作用域机制有助于代码组织和变量管理。
23 1
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
1月前
|
JavaScript 前端开发
JS作用域与作用域链
JS作用域与作用域链
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)