JS预解释

预解释

1. JS基础知识

1.1 先介绍js的基本数据类型

• 基本数据类型 --- 值操做
• 有number、string、boolean、null、undefined
• 引用数据类型 ---- 引用地址
• object、array、Date

1.2 执行环境

• 当浏览器加载HTML页面的时候，首先会提供一个供全局JS代码执行的环境 --- 全局做用域（global/window）
• 以下代码是在script中

var num = 12;
var obj = { name:"houdashuaige", age:18 };
function fn() {
    console.log("好好学习 每天向上");
}
console.log(fn) //把整个函数定义的部分(函数自己)在控制台输出
console.log(fn()) //输出当前函数的执行返回结果
fn()//return 后面是啥 返回啥 若是没有return 返回undefined

• 示意图以下

若是执行obj.age = 20;
首先经过地址xxxfff000 找到对应的空间 而后把空间中age属性对应的属性值修改成20；
其中fn存储的是一个地址 表明的时当前函数的总体

2. 预解释

2.1 预解释的基本概念

在当前的做用域中，JS代码执行以前，浏览器首先会默认地把全部带var、function的进行提早的声明或者定义

2.1.1 理解声明(declare)和定义(defined)

var num = 12;
声明: var num; //告诉浏览器在全局做用域中有一个num的变量

定义: num = 12(发生在代码执行过程当中 不在预解释中);  //给变量进行赋值

function fn() {
    console.log("this is a test");
}
函数预解释
fn = xxxfff000; 
声明: fn //告诉浏览器在全局做用域中有一个fn的函数
定义: fn = xxxfff000; //给fn赋值 指向函数的地址

注释: 因此对于带var 和 function关键字的在预解释的时候操做仍是不同的

**var: 对于带var的变量 预解释只会声明 不会进行定义**
**function: 在预解释的时候声明+定义 一块儿完成了**

• 附代码

//函数只有在执行的时候才会对函数内部的代码进行预解释
console.log(num);// undefined 提早声明 但未定义 默认undefined
var num = 12;
console.log(num);// 12
var obj = { name: "hou", age: 7 };

fn(100,200);//代码能够在这执行 由于预解释的时候 声明+名义就已经完成了

function fn(num1,num2) {
    var total = num1 + num2;
    console.log(total);
}

• 附示意图

2.1.2 函数预解释(代码内部)

function fn(num1,num2) {
    var total = num1 + num2;
    console.log(total);
}

• 附示意图

2.1.3 JS中内存的分类(预解释发生在栈内存)

//栈内存:用来提供一个供JS代码执行的环境 --->做用域(全局做用域/私有做用域)
//堆内存:用来存储引用数据类型的值 --->对象存储的时属性名和属性值
//函数存储的是代码字符串

2.1.4 如何区分私有变量和全局变量(主要用来分析函数预解释)

注释: 下述都是为了更好地理解"函数预解释",请耐心阅读

• "全局做用域"下声明(预解释的时候)的变量是全局变量
• 在"私有做用域"中声明的变量和"函数的形参"都是私有的变量
• 在私有做用域中，咱们代码执行的时候遇到了一个变量，首先咱们要确认它是不是私有的变量，
  若是是私有的变量，那么和外面的变量没有任何的关系，若是不是私有的，则往当前做用域的
  上级做用域查找，若是上级做用域没有则继续查找，一直找到window为止 --->("做用域链")
• 当函数执行的时候(直接目的:让函数体中的代码执行)，首先会造成一个新的私有做用域，而后按照以下步骤执行:
  a:若是有形参，先给形参赋值
  b:进行私有做用域中的预解释
  c:私有做用域中的代码从上到下执行
• 函数造成一个新的私有做用域保护了里面的私有变量不受外界的影响(外面修改不了私有的，私有的也修改不了外面的)造成了"闭包" --->(保护机制)

2.1.5 全局做用域中，带var和不带var的区别

• 区别1: 带var的能够进行预解释，因此在赋值的前面执行不会报错，不带var的是不能进行预解释的，在前面执行会报错
• 代码以下

console.log(num);--->undefined
var num = 12;
console.log(num2); --->直接报错 由于num2没有预解释
num2=13;

• 区别2: 看下述代码

var num = 12;
console.log(num);//12
num2 = 12;
console.log(num2) //12 --->至关于window.num2
//关系:num2 = 12 --->至关于给window增长了一个叫num2的属性名，属性值是12
//var num =12 --->至关于给全局做用域增长了一个全局变量num,可是不只如此，
//它也至关于给window增长了一个属性名num,属性值是12

• 函数内部不带var的代码以下

var total = 0；
function fn() {
    console.log(total) // 0
    total = 100;//至关于修改了全局变量total
}
fn();
console.log(total)//--->100
//注释:私有做用域中出现的一个变量不是私有的，则往上级做用域查找，上级没有则继续向上查找，一直找到window
//若是window下没有 分两种状况:
//一、若是是获取值:console.log(total) -->直接报错
//二、若是是设置值:total = 100;--->至关于给window加了total属性
//三、JS中若是在不进行任何特殊处理的状况下,上边的代码报错，下边的代码都不执行了

2.1.6 预解释是一种毫无节操的机制

• 预解释的时候无论你的条件是否成立，都要把带var的进行提早声明
• 具体代码以下

if(!("num" in window)) { //===>if(false)
    var num = 12;
}
console.log(num);//--->实际输出undefined
//分析:无论if的条件是否成立 都会把带var的进行预解释 (var num = 12)
//因此"num" in window 是true  !("num" in window) --->false 
//if条件是false  var num = 12 不会执行 因此 console.log(num) 是undefined

• 匿名函数之函数表达式

把函数定义的部分看成一个值赋给咱们的变量/或者赋给元素的某一个事件

fn();//====>fn 是undefined 至关于 undefined()  报错 uncaught TypeError: fn is not a function
//window下的预解释 var fn; 预解释的时候只会预解释 "="(等号)左边的
//右边的是值  不参与预解释
var fn = function() {
    console.log("ok");
}

• 自执行函数

定义和执行一块儿完成的

//自执行函数定义的那个function在全局做用域下不进行预解释，当代码执行到这个位置的时候，定义和执行一块儿完成了
//自执行函数的5种形式
(function(num){})(100);//经常使用形式
~function(){}(100);
+function(){}(100);
-function(){}(100);
!function(){}(100)

• 函数内部return相关

function fn() {
    console.log(num);//--->undefined
    return function() {};
    var num = 100;
}
fn();
//函数体种return 下面的代码虽然再也不执行了，可是须要进行预解释
//return 后边跟着的是咱们的返回值，因此不进行预解释

• 预解释经典习题解析

//注释:在预解释的时候，若是名字已经声明过了，不须要从新声明，可是须要从新定义(赋值)
//JS比较懒，声明过一次，便再也不声明，可是能够从新定义
//在JS中，若是变量的名字和函数的名字重复了，也算冲突
fn();
function fn() {console.log(1)};
fn();
var fn = 10;
fn();
function fn() {console.log(2)};
fn();
//输出结果是2 、2 、 报错:fn is not a function 后边代码不执行

• 附解释图

(本身画预解释图 学习 分析会更快 更有效)