IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript - 函数 - 函数的底层运行机制 -> 正文阅读

[JavaScript知识库]JavaScript - 函数 - 函数的底层运行机制


首先做一道练习题

let x = [12,23];
function fn(y){
	y[0] = 100;
	y = [100];
	y[1] = 200;
	console.log(y);
};
fn(x);
console.log(x);

答案及解析:在这里插入图片描述

函数执行

函数执行的过程

  1. 创建一个全新的私有上下文 [进栈], 函数中的代码都是在这个私有上下文中执行的。
    • JS中的栈结构:一个栈中有多个上下文,哪个上下文中的代码需要执行,则挪至顶端去执行。
    • 代码执行时形成一个全新的EC(私有上下文)供私有的代码执行。
    • 私有变量对象AO,它是VO的分支,在私有上下文中声明的变量都存储在这里。
  2. 进栈
    • 把全局上下文放到栈底(压缩栈)
    • 新进来的上下文放到栈的顶部
    • 进栈后的操作
      • 初始化作用域链(scopeChain):<自己所在的上下文,函数的作用域>
      • 初始化THIS指向:eg:window (箭头函数没有这一步)
      • 初始化实参集合:arguments(箭头函数没有这一步)
      • 形参赋值:
      • 变量提升:
      • 代码执行:自上而下依句执行,变量提升时处理过的,代码执行时不再重复处理,直接跳过,计算机不做重复的事情
  3. 出栈:
    • 上下文中的代码执行完毕,出栈(可能释放)。
    • 一般情况下,为了优化内存空间,函数执行完毕,所形成的上下文,就会被释放出栈。

形参 & 实参

  • 形参是变量,私有变量,存放到自己上下文中的私有变量对象中。
  • 实参是具体的值。
  • 函数定义设置的是形参,执行传递的是实参。

函数的作用域

  • [[scope]]
    • 函数的作用域主要看函数在哪儿创建的,
    • 与函数在哪儿执行和函数的执行主体都无关。
  • 创建函数的时候,就定义了函数作用域>当前函数创建所在的上下文=>[[scope]]:作用域。
  • 函数执行的目的是想让之前存储在堆中的代码字符串执行 -> 代码执行就要有自己的执行环境。

作用域链的储存规则

  • [[scopeChain]]: <EC(fn),EC(G)>
    • 即: <自己所在的上下文,自己函数的作用域(上级上下文)>,
    • 函数在哪儿创建的,上级上下文就是谁。
    • 从函数创建开始,作用域就已经指定好了。
    • 当前函数在作用域(N)下创建的
      • 那么函数执行形成的作用域(M)的上级作用域就是N,
      • 和函数在哪儿执行的没有任何关系。
      • 只和函数在哪儿创建的有关系。

作用域链查找机制

作用域链是一种机制:“变量查找机制”[scope-shain]。

  • 在当前上下文执行代码的时候,如果遇到一个变量:
  • 首先看是否为自己的私有变量(在私有变量对象中的是私有变量),
    • 如果是,则操作的都是自己的变量,
    • 如果不是私有的变量,则按照作用域链找上级上下文(也就是函数作用域)中是否有这个变量;
  • 如果还不是,一直找到全局上下文EC(G) /GO 为止。
  • 在查找过程中,找到谁的就操作谁的,
  • 找不到则报错提示:xxx is not defined

面试题练习

let x = 1;
function A(y){
	let x = 2;
	function B(z){
		console.log(x + y + z);
	};
	return B;
}
let C = A(2);
C(3);

图形解析:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-27 09:48:55  更:2021-11-27 09:49:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/21 5:56:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码