函数的运行机制
函数
运行机制
其他细节事项
代码块
//=>创建函数
function f() {
var a = 10;
a+=10;
a/=2;
console.log(a);
}
//执行函数
f();
函数的运行机制
,我们了解过函数即是引用类型:
在 JavaScript 中,几乎“所有事物”都是对象。
布尔是对象(如果用 new 关键词定义)
数字是对象(如果用 new 关键词定义)
字符串是对象(如果用 new 关键词定义)
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
所有 JavaScript 值,除了原始值,都是对象。
那么对象的运行机制我们已经了解:
- 创建全局作用域(栈内存)
- 代码自上而下的依次执行
- 创建堆内存(一次执行首先遇到的是对象),生成一个内存地址(此地址是一个虚拟地址,不占用任何的空间)
- 对象中
属性名:属性值
在堆内存中以键值对的形式存储
- 对象中
- 创建对象变量
var 变量名
,将创建的堆内存的内存地址与值进行关联 - 操作对象
obj.属性名
:- 操作的对象的键,找到与之关联的堆内存,找到操作的属性,对属性值进行修改/查询
- 要操作的属性名在堆内存中不存在,则视为新增键值对到堆内存中。
- 不同的变量关联的内存地址相同,则操作的是同一个堆内存。
注意: 基本数据类型/对象我们先操作的是值
基本数据类型,按值操作(当前全局作用域销毁,所创建的位置也随之销毁):
Ⅰ.在当前的全局作用域(栈内存)中开辟一个位置,创建存储值。
II. 创建变量:var 变量名
III. 将这个位置赋值给变量名
对象:先创建堆内存,将值(键值对形式)存储到堆内存中。然后再操作对象与值所在堆内存的内存地址进行关联
函数
在JS中,函数就是方法(功能体),基于函数一般都是实现某个功能。
//创建函数
//运行函数
ES3标准中:
-------------------------
//=>1.创建函数
function 函数名([参数]){
//实现功能的JS代码
函数体;
}
//=>2.执行函数
函数名();
-------------------------
ES6(ES5之后的扩展与补充)标准中:
创建箭头函数
-------------------------
//=>1.创建函数
let 函数名(变量名) = ([参数]) =>{
函数体;
}
//=>2.执行函数
函数名();
-------------------------
函数类型:引用类型中特殊类型
在JS中,函数的诞生是为了解决同一功能的实现,避免重复编写代码,造成大量的代码冗余。如何来解决代码滥用呢?那么我们实现的直接方式就是**封装
。
何谓封装
:
把实现的某个功能或者结果的代码封装进一个函数
**中,在某些地方或者以后的功能实现中,我们想要实现这个功能,那么只需要将这个封装后的函数进行执行,不必再次编写重复的代码。这就是高内聚低耦合
。
高内聚低耦合
:减少页面中的冗余代码,提高代码的复用率。(这种方式绝不是拿来主义,不能以偏概全)。
封装及复用
:当前互联网技术无论前端还是后端等,代码的简洁性及可维护性,都是每一个Coder所追求且崇尚的,乃至可以说是代码洁癖也不是不可以,当然注释/备注等信息还是要有。也就衍生了许许多多的框架,框架封装,功能封装,代码封装等都是对代码复用及维护的一种不竭追求方式。(废话太多了)
函数的运行机制与对象运行机制有些不同:
- 堆内存的存储值方式
- 对象在堆内存中存储的是键值对,有意义的代码块(键值对)
- 函数在堆内存中存储的是无意义的字符串
- 执行的机制
对象运行机制图
函数的运行机制
运行机制
进行理解其所以然
I . 创建函数
-
创建一个全局作用域(栈内存):供当前代码自上而下依次执行,当前代码中首先执行的是一个函数,那么需要先对函数体进行开辟新的
堆内存
进行存储。 -
创建新的堆内存,存储函数体:函数-引用类型,在当前作用域外开辟一个新的堆内存,把函数体中的代码以
字符串
的形式存储到这个新开辟的堆内存中。 -
函数名(变量名)与堆内存建立联系: 把开辟的
堆内存地址
赋值给函数名。这样组合起来就是对函数体进行存储,并且赋值,形成一个具有执行意义上的函数。
注意
:函数体是以字符串
的形式存储在新创建的堆内存
中的。
II.执行函数
我们在执行时会調用函数名();
即:f();
如果执行f,则浏览器内核(webkit)认为是:函数体本身。所以函数执行时,函数名
必须加括号
。
- 创建私有作用域(供函数体中代码执行的环境):自上而下执行。
- 堆内存中存储的函数体字符串进行获取解析成真正可执行的JS代码,在新创建的私有作用域进行执行。
运行机制图
在了解每一个事务原理的时候,我们都希望通过绘图及流程相关去细枝末节的掌握。
博客
CSDN已经将本篇内容进行更新,可以在线进行查看文章JS函数的运行机制,如有问题可以在博客下方评论区评论留言。
转载请注明出处:
作者: maiduoduo
邮箱: maiduoduo0@163.com
博客主页: https://blog.csdn.net/Maiduoudo