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即接收到構造函數創建出來的對象。

    • 注意事項

    • 構造函數約定首字母大寫。
    • 函數內的屬性和方法前面需要添加 this ，表示當前對象的屬性和方法。
    • 構造函數中不需要 return 返回結果。
    • 當我們創建對象的時候，必須用 new 來調用構造函數。

    • 其他

      構造函數，如 Stars()，抽象了對象的公共部分，封裝到了函數里面，它泛指某一大類（class）
      創建對象，如 new Stars()，特指某一個，通過 new 關鍵字創建對象的過程我們也稱為對象實例化

• new關鍵字的作用

• 在構造函數代碼開始執行之前，創建一個空對象；
• 修改this的指向，把this指向創建出來的空對象；
• 執行函數的代碼
• 在函數完成之后，返回this—即創建出來的對象

5.3 遍歷對象

for…in 語句用于對數組或者對象的屬性進行循環操作。

其語法如下：

for (變量 in 對象名字) {// 在此執行代碼 }

語法中的變量是自定義的，它需要符合命名規范，通常我們會將這個變量寫為 k 或者 key。

for (var k in obj) {console.log(k); // 這里的 k 是屬性名console.log(obj[k]); // 這里的 obj[k] 是屬性值 }

總結

以上是生活随笔為你收集整理的JavaScript基础第05天笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。