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 後邊代碼不執行

• 附解釋圖

(本身畫預解釋圖 學習 分析會更快 更有效)