面试必备,2019史上最易懂js基础(执行上下文/调用堆栈/内存栈/值类型/引用类型)

千里之行,始于足下,不积硅步,无以至千里。

与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng),

而且我们对一些基础的知识的依赖越来越大。

现在我们就用平民的方法讲解下执行上下文/调用堆栈/内存栈。

理解下 javascript 在执行中,javascript 引擎(v8) 对我们加载的代码做了写什么?

我们整一段非常简单的 js 代码来分析 v8 引擎和执行上下文/调用堆栈/内存栈的关系。

<script>
        var   a = 1;
        function  say() {
              var c = 4;
              console.log(c)<br>   
              console.log(a)<br>  
              var d = 5
          }

console.log(b)<br>  console.log(a)`
say()
var  b = 2;
</script>

1、在 v8 引擎加载到这段代码

2、引擎解析代码,创建一个 全局执行上下文(调用堆栈/内存栈)

image

3、解析代码,将全局的所有的变量/声明函数添加到全局执行上下文的内存栈中。

这里会将 变量 a 和 b / 函数 say 添加到内存栈中。所有的全局的变量和函数都会添加进去

开始执行的样子:

image

4.将全局的执行方法,都 push 到调用堆栈中

步骤 1 :

调用 console.log(b) 方法,执行到 console.log(b) 这一步的时候,全局执行上下文样子:

image

在从开始执行到这里的过程中,我们对一些变量做了赋值 a = 1 , b 并为赋值,仍是 undefined 。

这里打印的是一个 undefined

这里就是为什么会出现 变量提升 的原因

这里 console.log(b) 执行完成后,会直接 pop 弹出 调用堆栈。

步骤 2 :

调用 console.log(a) , 在console.log(b) 到 console.log(a) 并未有任何赋值操作。

所以内存栈中未有任何变化。

但是调用堆栈里面会有变化,在这里面console.log(b)已经执行完成,会被 pop 推出栈,然后到了console.log(a),试图样子:

image

这里打印 a 是 1

结束完成之后,console.log(a) 会被弹出栈。

步骤 3:

调用 say() 函数,将 say() push 的调用堆栈中。

创建一个新的 say 的执行上下文。

image

这里为 say 重新创建了一个 执行上下文 。并且将它内部的 变量和函数推入它对应的 内存栈 中。

将 c : 4 , d : 5 推到 内存栈中。

步骤 4 :

解析 say 函数,并且执行内部的 console.log(c) , console.log(a) 。

image

这里堆栈一次执行 console.log(c) , console.log(a) .

执行完成之后会被弹出来。

打印 4 , 5 。

步骤 5 :

当 say () 执行完毕后,回收内存栈已经调用栈。

完成!!

前端 javascript的 堆栈理解

在理解这些时候,我们可以先看下 值类型 和 引用类型,值类型 和 引用类型 的存储方式来区分前端的堆栈。

值类型/原始类型 : undefined 、null 、number 、string 、boolean、bigInt、symbol

引用类型/堆类型 : object 、function 、array

值类型 :

保存在内存栈中,分配固定的空间,所以保存的值是不可变的。

js 代码执行的或者某个方法执行的时候,都会有自己独立的执行上下文,其中包括内存栈和调用栈,该执行上下文中定义的值类型就会保存在该内存栈中。

当该方法执行结束,这个内存栈就会销毁,值类型也随之移除

值类型的特点:

1、任何方法都无法改变值类型的

var  name = 'xiao';
name.toUpperCase();  // 输出 'XIAO'
console.log(name); // 输出  'xiao'

该字符串调用了 toUpperCase() 方法,但是并未改变 name 的值

2、相同类型的值类型的比较是它们值的比较

相同类型的值类型在比较时候,只有它们的值相等,则它们才相等。

3、值类型都存放在内存栈中

上面已经介绍过了。

4、保存的是值本身的值,不是指向的地址。

引用类型:

值保存在堆内存中,占用的空间也不固定,所以保存的值是可以变的

当我们创建一个对象的时候,我们会将该对象保存在运行的内存堆中,以便与反复利用。

当被某一个变量引用的时候,会给变量该内存堆中的该对象的地址,并且把该对象的地址保存在内存栈中,而不是该对象的本身

当引用该变量所在的方法或者是执行上下文执行结束的时候,并不会销毁,只有在没有被任何引用的时候,该对象才会被销毁。

这里的这种销毁方法就是垃圾回收中的一种,叫做标记回收

标记回收( 以对象为例,当这个对象每被引用一次,就在该对象的标记上面 +1 ,当某一个引用该对象的变量不引用了就 -1 ,当

标记为 0 的时候,被系统检测到之后,就会销毁。 )

引用类型的特点:

1、引用类型的值是可变的


`var` `obj = {a:1}`

`obj.b = 2`

2、引用类型在内存栈中保存对象地址,在堆内存中保存对象的本身

3、引用类型的比较(===),是比较它们保存的对象的堆内存地址

4、引用类型的赋值,当给某一个变量复制的时候,实际是将该对象的堆内存地址复制给变量

总结 :

前端的基础(闭包,原型,作用域),在这里我们只要理解了执行上下文,我们就可以很好的区分作用域和闭包,

因为它们都相当于一个方法,当它们执行的时候,都会相应的创建自己的执行上下文,并且有自己的内存栈和调用栈。

当它们执行的时候都会对应的运用自己的内存中的变量。

值类型和引用类型的区分,我们能很快的作出类型的比较。

通过变量的存储方式来区分每一个变量的种类和功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351