前端學習筆記！

做爲一個前端新人，看了不少關於前端的博客，以爲有必要去記錄點知識點和本身的總結，因此在工做之餘寫了這篇文章，該博客有引用到其餘文章的內容，純屬學習，在此膜拜一下各位前端大大。

一.聲明定義

1. var es6以前的方法 用於定義變量

2. let es6的新語法 用於定義跨級做用域本地變量

3. const es6的新語法 用於定義常規變量(定義的變量不會被從新定義)

4. 申明瞭變量沒有賦值打印出來是undefinded,沒有申明變量打印出來爲NULL
   5.未賦值的變量作計算，它的值爲NAN

二.做用域

es6支持塊級做用域，須要用es6的let屬性來聲明變量 例如if、setTimeout等等

if(true){
    var a = 1;
}
console.log(a); // 輸出爲1

當使用let時

if(true){
    let a = 1;
}
console.log(a); // a is not defined(…)

變量上浮：
javascript會自動將變量的聲明上浮到函數或者全局的最前面，因此再代碼執行前，變量的賦值就已經爲undefined

console.log(a);//undefinded
var a = 3;

//例如
var b = 5;
function work(){
   console.log(b);//undefinded
   var b = 4;
}
work();

三.數據類型

6種基礎類型
1.Bollean(布爾值)
2.string(字符串)
3.undefined
4.null
5.Number
6.symbol(ES6新增)：
symbol是程序建立而且能夠用做屬性鍵的值，而且它能避免命名衝突的風險。symbol與其它類型並不徹底相像，symbol被建立後就不可變動，你不能爲它設置屬性（在嚴格模式下嘗試設置屬性會獲得TypeError的錯誤）。他們能夠用做屬性名稱，這些性質與字符串相似。另外一方面，每個symbol都獨一無二，不與其它symbol等同，即便兩者有相同的描述也不相等；你能夠輕鬆地建立一個新的symbol。這些性質與對象相似。

一種對象類型:Object
對象和函數的區別在於前者是值的容器，後者是應用程序的過程

四.控制流和錯誤處理

1.塊表達式
塊表達式用於控制流，例如if、while、for
ES6以後有塊域範圍：在ES6中，咱們能夠把塊域聲明var改爲let，讓變量只做用域block範圍。
2.邏輯判斷
判斷爲false的特殊值：false、undefined、null、0、NaN、」"。
簡單boolean和對象Boolean類型有倆種區別 前者是Javascript的一種原始類型，它只有倆種值，true和false
使用Boolean(value)方法能夠強制轉換任意值爲boolean類型

1. alert(Boolean('')); //outpt false   
2. alert(Boolean('hello')); //output true   
3. alert(Boolean(100)); //output true  
4. alert(Boolean(0)); //output false 
5. alert(Boolean(NaN)); //output false 
6. alert(Boolean(null)); //output false   
7. alert(Boolean(undefined)); //output false   
8. alert(Boolean(new Object())); //output true

五.內存空間

1.堆和棧
JavaScript沒有嚴格的去區分棧內存和堆內存，通常它的全部數據都存取在堆內存裏。
堆內存的存取方式能夠比喻成書架放書，書櫃裏的書沒有什麼前後拿去順序，能夠哪區任何位置的書籍和放回到任何位置，比如在JSON格式的數據中，咱們存儲的key-value是能夠無序的，由於順序的不一樣並不影響咱們的使用，咱們只須要關心書的名字。
棧內存的存取方式就像一個兵乓球盒子，具備先進後出，後進先出的特色，存儲原理如圖。

2.變量對象
Javascript的執行上下文生成的時候，會建立一個叫作變量對象的特殊對象，Javascript的基礎數據會保存在該變量對象裏
3.引用數據類型與堆內存
JS的引用數據類型例如數組Array，它們的值是不肯定的，引用數據類型的值是保存在堆內存中的對象。Javascript不能直接訪問堆內存空間，所以咱們不能直接操做堆內存空間中的變量。所以咱們在操做對象的時候實際上是在引用該堆內存的對象，變量對象裏保存的只是來自堆內存空間對象的地址，該地址與實際的堆內存值相關聯。

var a1 = 0;   // 變量對象
 var a2 = 'this is string'; // 變量對象
 var a3 = null; // 變量對象
 var b = { m: 20 }; // 變量b存在於變量對象中，{m: 20} 做爲對象存在於堆內存中
 var c = [1, 2, 3]; // 變量c存在於變量對象中，[1, 2, 3] 做爲對象存在於堆內存中

當咱們要訪問堆內存的引用數據類型時，首先從變量對象中獲取該對象的地址指針，再經過地址指針來獲取堆內存的數據

// DEMO
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 這時m.a爲15

六.執行上下文(Execution Context)

每次當控制器轉到可執行代碼的時候，就會進入一個執行上下文。執行上下文能夠理解爲當前代碼的執行環境，它會造成一個做用域。運行包括三種狀況:
1.全局環境
2 函數環境
3 eval:
每次當控制器轉到可執行代碼的時候，就會進入一個執行上下文。執行上下文能夠理解爲當前代碼的執行環境，它會造成一個做用域。

var code1='"a" + 2'; //表達式 
varcode2='{a:2}'; //語句 
alert(eval(code1)); //->'a2' 
alert(eval(code2)); //->undefined 
alert(eval('(' + code2 + ')')); //->[object Object]

在一個javascript的程序執行時，會產生多個執行上下文，javascript會以堆棧的方式處理它們。
棧底爲全局上下文，棧頂爲當前上下文

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

上下文執行過程如圖

上下文部分特色
1單線程
2同步執行，只有棧頂的上下文處於執行中，其餘上下文須要等待
3全局上下文只有惟一的一個，它在瀏覽器關閉時出棧
4函數的執行上下文的個數沒有限制
5每次某個函數被調用，就會有個新的執行上下文爲其建立，即便是調用的自身函數，也是如此。
執行上下文-生命週期
1.建立階段
在這個階段中，執行上下文會分別建立變量對象，做用域鏈和this指向
2.代碼執行階段
建立完成，開始執行代碼，完成變量賦值，函數引用，以及其餘代碼執行