光明顶开课了 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