作者 混元霹雳手-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