光明顶开课了 JAVAscript 第一课(预解释)

作者 混元霹雳手-Ziksang

本文章将是一套系列课程,偏进阶,面向有JAVAscript基础的读者,文章以精简、通俗意通为主要讲解方式,全方位的带你进入JAVAscript集中知识点学习,让零散的知识点一步一步的聚拢,希望大家有所收获!

我们先回顾一下js中的数据类型有那些?

一.基本数据类型
1.number
2.string
3.boolean
4.null
5.undefined
二.引用数据类型
1.object ---- {}对象 ---- []数组 ---- /^$/正则 ---- Date时间
2.function

基本数据类型和引用数据类型区别在于什么地方?

1.基本数据类型:是按照值来操作的
2.引用数据类型:是按照引用地址来操作的

看个demo例子

var name = 'ziksang'
var obj = {name : '混元霹雳手', age : "23" }
function demo () {
    console.log('光明顶开课了')
}

1.当HTML加载页面的时候,提供了一个全局js代码执行的环境 ---- 全局作用域
在node环境下(global)
在浏览器下 (window)

下图会详细解释 以上代码的在全局作用预解释的执行流程

如果我们此时把obj.name = '预解释',此时内部是进行了一个如何的操作?
1.因为obj对象是一个引用类型,所以把全局作用域下的obj对象 通过xxxfff000地址找到所指向的开辟的内存空间,然后把内空间中的name属性改成‘预解释’

如果我们执行console.log(demo),此时内部是进行了一个如何的操作?
1.因为demo是一个function,也是一个引用类型,此时会通过xxxfff111地址找到所指向的开辟的内存空间,里面存储的是一个转成字符串的demo函数体的整体代码段,此时就会把整个函数整体代码段输出出来 //function demo(){console.log('光明顶开课了')}

如果我们执行console.log(demo()),此时内部是进行了一个如何操作?
1.因为此时是demo(),函数通过一个()括号,还是会通过xxxfff111地址找到所指向的开辟的内存空间,里面存储的是一个demo函数体的整体代码段,此时会执行里面的代码段,进行两部操作,第一是执行代码段中的代码运行程序,会打印出'光明顶开课了',二会返回一个值,返回结果是通过函数代码段中return后的结果,如果没有return则默认返回undefined

预解释

在当前的作用域中,js代码执行之前浏览器首先会默认的把所有带var,let,const的操作符和function进行提前的声明或者定义

一.理解声明和定义 【声明】declare 【定义】defined

先看 var name = 'ziksang'看看浏览器引擎给它做了那些预解释

在预解释中是分为两大部分完成的,一部分是声明,一部分是定义
1.声明 (代表将要在全局环境下要声明一些标识符,这些将通过你的代码来解析) 告诉浏览器在全局环境下通过操作符声明一个 name标识符(变量)
2.定义 (代表就是给全局环境下声名出来的标识符(变量)进行定义基本类型引用类型的值name='ziksang'name变量定义了一个string基本类型的值

预解释的定义

是浏览器引擎的一种机制,在当前的作用域当中,代码执行之前,浏览器分默认把带标识符或者function关键字的进行提前的声明和定义。

二.对于标识符var 和 function关键字在预解释时的区别之处

此时我就可以延伸出一个面试题 请问题1题2分别打印出什么,请说出原理!

题1

    function demo(){
        console.log(1)
    }
    var demo = function(){
        console.log(2)
    }
    demo()

题2

   var demo = function(){
        console.log(2)
    }
    function demo(){
        console.log(1)
    }
    demo()

题1打印出的是2,题2打印出的还是2....为什么呢?
首先我们先看看标识符var 和 function关键字在预解释时的区别之处
在预解释过程中,标识符先声明再定义,而function关键字是声明定义一起完成

先看执行过程的浏览器解析和内存空间分配图
再看看浏览器预解释过程分析和内存空间分配图

从上面两个制图我们可以找到原理,函数表达式用的是标识符声明的,预解释层的第一层声明层只是对操作符demo变量进行声明,而函数声明function demo在声明层不但声明而且还进行了定义,导致在定义层的的时候,函数表达式覆盖了函数声明,所以题1题2都打印出来是2

三.预解释导致变量提升

这些问题也很能考成一个面试题,还是对预解释的理解

console.log(name)
var name = 'ziksang'
console.log(name)
demo()
function demo(){
   console.log('光明顶开课啦')
}
看看执行预解释流程图

首先预解释,先不执行里面的代码,提前先解析的是声明层,把用标识符和function关键字声明的变量或者函数声明先提前解析声明

此时name先进入声明层,先声明一个var name,再声明一个function demo,同时函数声明在声明层同时进行了定义,那就是把整个function demo(){console.log(‘光明顶开课了’)}提到了代码最顶层的解释层的声明层里,此时从上往下执行代码,第一个执行到console.log(name),因为name只是进行了变量提升到了解释层的声明层并没有定义,如果没有定义则就是undefined;代码再往下走,name进行了定义直接进入了定义层,name定义为'ziksang',此时再执行到console.log(name),则返回‘ziksang’,代码往下走,执行到demo()的时候,函数声明已经提到了解释层的声明层并且进行了定义,所以执行demo()并不会报错,而且会返回'光明顶开课啦'

总结,这里讲解了对浏览器预解释的认识,并且通过预解释认识到变量提升的原因,对标识符和function声明的函数的区别有了一定的认识,更加深入的了解了声明和定义的一个生命周期

没有经过本人同意不得转载,如果经过本人同意转载后请标注出自@混元霹雳手-ziksang

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 生活从来没有鄙薄我 一波风浪 一次成长 有人喜欢你的美丽 那是一挂深刻的水墨丹青 有人喜欢你的善良 那是你所经历的...
    蓝色的海sunshine阅读 383评论 0 0
  • 3月5日网上流传着一段北京地铁上暴力事件的视频,视频内容是一名年轻男子与两位“创业扫码”的女士发生冲突,男子在争执...
    海深不蓝心阅读 765评论 0 3
  • 镜中曾几亦青春,今日照来霜发新。 谁使少年常笑我,只缘长者总怜人。 辛勤不解当时意,刻苦方知现在身。 去处能无诗梦...
    雪窗_武立之阅读 157评论 3 2