js 函数的执行环境和作用域链的深入解析

2023-12-08前端开发
11

JS 函数的执行环境和作用域链的深入解析

1. 执行环境

在 JavaScript 中,执行环境是指一段可执行代码的运行环境,有全局执行环境和函数执行环境两种。

全局执行环境

全局执行环境是在浏览器中直接打开网页时就会创建的执行环境,它是最顶层的环境。全局执行环境中定义的变量和函数被称为全局变量和全局函数,它们可以在程序的任何地方被访问和修改。

示例代码:

var a = 'Hello World';
function sayHello() {
  alert(a);
}
sayHello(); // 输出 Hello World

在上面的代码中,变量a和函数sayHello()都定义在全局执行环境中,所以它们可以被main函数中的代码所访问。

函数执行环境

除全局执行环境外,JavaScript还有函数执行环境。当一个函数被执行时,就会创建一个函数执行环境,这个执行环境也可以称为活动对象。这个执行环境被用来存储函数内部的局部变量、函数参数和内部函数等。

示例代码:

function main() {
  function sayHello() {
    var name = 'world';
    alert("Hello, " + name);
  }
  sayHello();
}
main(); // 输出 Hello, world

在上面的代码中,函数sayHello()内部定义了一个局部变量name,这个变量只能在函数内部被访问。在函数被调用时,就会创建一个函数执行环境。在函数执行完毕之后,这个函数执行环境就会被销毁,这个局部变量也会被删除。

2. 作用域链

作用域指的是程序在运行过程中,可以访问和修改的变量的集合。JavaScript中的作用域是静态作用域,也就是说变量的作用域取决于它们在程序中定义的位置,而不是在程序中执行的位置。

作用域链指的是一个函数执行环境中所有可访问的作用域的链表,链表的顶部是本地的活动对象,链表的底部是全局对象。作用域链实际上是在函数定义的时候就已经确定了。

示例代码:

var a = 'Global'; // 全局变量

function fun1() {
  var a = 'Local'; // 局部变量
  function fun2() {
    alert(a); // 输出 Local
  }
  fun2();
}

fun1();

在上面的代码中,当函数fun2()需要访问局部变量a时,首先在自己的活动对象中查找,如果找到了就不再继续向上查找,如果没有找到,就开始向上查找整个作用域链,直到找到全局对象才停止查找。

总结

JavaScript的执行环境和作用域链是实现变量访问和作用域的关键机制。全局执行环境和函数执行环境分别对应着全局作用域和函数作用域,作用域链指的是一个函数执行环境中所有可访问的作用域的集合。可以通过声明变量、定义函数等方式来改变作用域链。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161