JavaScript基礎第05天筆記

阿新 • • 發佈：2022-01-18

JavaScript基礎第05天筆記

1 - 作用域

1.1 作用域概述

通常來說，一段程式程式碼中所用到的名字並不總是有效和可用的，而限定這個名字的可用性的程式碼範圍就是這個名字的作用域。作用域的使用提高了程式邏輯的區域性性，增強了程式的可靠性，減少了名字衝突。

JavaScript（es6前）中的作用域有兩種：

全域性作用域
區域性作用域（函式作用域）

1.2 全域性作用域

作用於所有程式碼執行的環境(整個 script 標籤內部)或者一個獨立的 js 檔案。

1.3 區域性作用域

作用於函式內的程式碼環境，就是區域性作用域。 因為跟函式有關係，所以也稱為函式作用域。

1.4 JS沒有塊級作用域

塊作用域由 { } 包括。
在其他程式語言中（如 java、c#等），在 if 語句、迴圈語句中建立的變數，僅僅只能在本 if 語句、本迴圈語句中使用，如下面的Java程式碼：

java有塊級作用域：
```
if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 報錯
```
以上java程式碼會報錯，是因為程式碼中 { } 即一塊作用域，其中宣告的變數 num，在 “{ }” 之外不能使用；

而與之類似的JavaScript程式碼，則不會報錯：

Js中沒有塊級作用域（在ES6之前）
```
if(true){
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123
```

2 - 變數的作用域

在JavaScript中，根據作用域的不同，變數可以分為兩種：

全域性變數
區域性變數

2.1 全域性變數

在全域性作用域下宣告的變數叫做全域性變數（在函式外部定義的變數）。

全域性變數在程式碼的任何位置都可以使用
在全域性作用域下 var 宣告的變數是全域性變數
特殊情況下，在函式內不使用 var 宣告的變數也是全域性變數（不建議使用）

2.2 區域性變數

在區域性作用域下宣告的變數叫做區域性變數（在函式內部定義的變數）

區域性變數只能在該函式內部使用
在函式內部 var 宣告的變數是區域性變數
函式的形參實際上就是區域性變數

2.3 全域性變數和區域性變數的區別

全域性變數：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷燬，因此比較佔記憶體
區域性變數：只在函式內部使用，當其所在的程式碼塊被執行時，會被初始化；當代碼塊執行結束後，就會被銷燬，因此更節省記憶體空間

3 - 作用域鏈

只要是程式碼都一個作用域中，寫在函式內部的區域性作用域，未寫在任何函式內部即在全域性作用域中；如果函式中還有函式，那麼在這個作用域中就又可以誕生一個作用域；根據在**[內部函式可以訪問外部函式變數]**的這種機制，用鏈式查詢決定哪些資料能被內部函式訪問，就稱作作用域鏈

案例分析1：

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

作用域鏈：採取就近原則的方式來查詢變數最終的值。

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

4 - 預解析

4.1 預解析的相關概念

JavaScript 程式碼是由瀏覽器中的 JavaScript 解析器來執行的。JavaScript 解析器在執行 JavaScript 程式碼的時候分為兩步：預解析和程式碼執行。

預解析：在當前作用域下, JS 程式碼執行之前，瀏覽器會預設把帶有 var 和 function 宣告的變數在記憶體中進行提前宣告或者定義。
程式碼執行：從上到下執行JS語句。

預解析會把變數和函式的宣告在程式碼執行之前執行完成。

4.2 變數預解析

預解析也叫做變數、函式提升。
變數提升（變數預解析）： 變數的宣告會被提升到當前作用域的最上面，變數的賦值不會提升。

console.log(num);  // 結果是多少？
var num = 10;      // ？

結果：undefined

注意：**變數提升只提升宣告，不提升賦值**

4.3 函式預解析

函式提升： 函式的宣告會被提升到當前作用域的最上面，但是不會呼叫函式。

fn();
function fn() {
    console.log('列印');
}

結果：控制檯列印字串 --- ”列印“ 

注意：函式宣告代表函式整體，所以函式提升後，函式名代表整個函式，但是函式並沒有被呼叫！

4.4 函式表示式宣告函式問題

函式表示式建立函式，會執行變數提升，此時接收函式的變數名無法正確的呼叫：

fn();
var  fn = function() {
    console.log('想不到吧');
}

結果：報錯提示 ”fn is not a function"

解釋：該段程式碼執行之前，會做變數宣告提升，fn在提升之後的值是undefined；而fn呼叫是在fn被賦值為函式體之前，此時fn的值是undefined，所以無法正確呼叫

5 - 物件

5.1 物件的相關概念

什麼是物件？

在 JavaScript 中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串、數值、陣列、函式等。
物件是由屬性和方法組成的。
- 屬性：事物的特徵，在物件中用屬性來表示（常用名詞）
- 方法：事物的行為，在物件中用方法來表示（常用動詞）
為什麼需要物件？

儲存一個值時，可以使用變數，儲存多個值（一組值）時，可以使用陣列。

如果要儲存一個人的完整資訊呢？

例如，將“張三瘋”的個人的資訊儲存在陣列中的方式為：
```
var arr = [‘張三瘋’, ‘男', 128,154];
```
上述例子中用陣列儲存資料的缺點是：資料只能通過索引值訪問，開發者需要清晰的清除所有的資料的排行才能準確地獲取資料，而當資料量龐大時，不可能做到記憶所有資料的索引值。

為了讓更好地儲存一組資料，物件應運而生：物件中為每項資料設定了屬性名稱，可以訪問資料更語義化，資料結構清晰，表意明顯，方便開發者使用。

使用物件記錄上組資料為：
```
var obj = {
    "name":"張三瘋",
    "sex":"男",
    "age":128,
    "height":154
}
```
JS中的物件表達結構更清晰，更強大。

5.2 建立物件的三種方式

利用字面量建立物件

使用物件字面量建立物件：
```
  就是花括號 { } 裡面包含了表達這個具體事物（物件）的屬性和方法；{ } 裡面採取鍵值對的形式表示 
```
- 鍵：相當於屬性名
- 值：相當於屬性值，可以是任意型別的值（數字型別、字串型別、布林型別，函式型別等）
  
  程式碼如下：
```
var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};
```
  上述程式碼中 star即是建立的物件。
物件的使用
- 物件的屬性
  - 物件中儲存具體資料的 "鍵值對"中的 "鍵"稱為物件的屬性，即物件中儲存具體資料的項
- 物件的方法
  - 物件中儲存函式的 "鍵值對"中的 "鍵"稱為物件的方法，即物件中儲存函式的項
- 訪問物件的屬性
  - 物件裡面的屬性呼叫 : 物件.屬性名，這個小點 . 就理解為“ 的 ”
  - 物件裡面屬性的另一種呼叫方式 : 物件[‘屬性名’]，注意方括號裡面的屬性必須加引號
    
    示例程式碼如下：
```
console.log(star.name)     // 呼叫名字屬性
console.log(star['name'])  // 呼叫名字屬性
```
- 呼叫物件的方法
  - 物件裡面的方法呼叫：物件.方法名() ，注意這個方法名字後面一定加括號
    
    示例程式碼如下：
```
star.sayHi();              // 呼叫 sayHi 方法,注意，一定不要忘記帶後面的括號
```
- 變數、屬性、函式、方法總結
```
屬性是物件的一部分，而變數不是物件的一部分，變數是單獨儲存資料的容器
```
  - 變數：單獨宣告賦值，單獨存在
  - 屬性：物件裡面的變數稱為屬性，不需要宣告，用來描述該物件的特徵
    
    方法是物件的一部分，函式不是物件的一部分，函式是單獨封裝操作的容器
  - 函式：單獨存在的，通過“函式名()”的方式就可以呼叫
  - 方法：物件裡面的函式稱為方法，方法不需要宣告，使用“物件.方法名()”的方式就可以呼叫，方法用來描述該物件的行為和功能。
利用 new Object 建立物件
- 建立空物件
```
var andy = new Obect();
```
  通過內建建構函式Object建立物件，此時andy變數已經儲存了創建出來的空物件
- 給空物件新增屬性和方法
  - 通過物件操作屬性和方法的方式，來為物件增加屬性和方法
    
    示例程式碼如下：
```
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}
```
  注意：
  - Object() ：第一個字母大寫
  - new Object() ：需要 new 關鍵字
  - 使用的格式：物件.屬性 = 值;
利用建構函式建立物件
- 建構函式
  - 建構函式：是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與 new 運算子一起使用。我們可以把物件中一些公共的屬性和方法抽取出來，然後封裝到這個函式裡面。
  - 建構函式的封裝格式：
```
function 建構函式名(形參1,形參2,形參3) {
     this.屬性名1 = 引數1;
     this.屬性名2 = 引數2;
     this.屬性名3 = 引數3;
     this.方法名 = 函式體;
}
```
  - 建構函式的呼叫格式
```
var obj = new 建構函式名(實參1，實參2，實參3)
```
    以上程式碼中，obj即接收到建構函式創建出來的物件。
  - 注意事項
    1. 建構函式約定首字母大寫。
    2. 函式內的屬性和方法前面需要新增 this ，表示當前物件的屬性和方法。
    3. 建構函式中不需要 return 返回結果。
    4. 當我們建立物件的時候，必須用 new 來呼叫建構函式。
  - 其他
    
    建構函式，如 Stars()，抽象了物件的公共部分，封裝到了函式裡面，它泛指某一大類（class）
    建立物件，如 new Stars()，特指某一個，通過 new 關鍵字建立物件的過程我們也稱為物件例項化
new關鍵字的作用
1. 在建構函式程式碼開始執行之前，建立一個空物件；
2. 修改this的指向，把this指向創建出來的空物件；
3. 執行函式的程式碼
4. 在函式完成之後，返回this---即創建出來的物件
5.3 遍歷物件

for...in 語句用於對陣列或者物件的屬性進行迴圈操作。

其語法如下：
```
for (變數 in 物件名字) {
    // 在此執行程式碼
}
```
語法中的變數是自定義的，它需要符合命名規範，通常我們會將這個變數寫為 k 或者 key。
```
for (var k in obj) {
    console.log(k);      // 這裡的 k 是屬性名
    console.log(obj[k]); // 這裡的 obj[k] 是屬性值
}
```