筆記、視頻、原始碼：JavaScript(基礎、高級)筆記匯總表【尚硅谷JavaScript全套教程完整版】

目錄

P1 01.尚硅谷_JS高級_準備 07:07

WebStrom 下載及安裝

1、WebStorm 卸載

2、WebStrom 下載（官網）

3、WebStrom 下載（百度網盤）

JS高級 Xmind 思維導圖

WebStorm 匯入檔案

P2 02.尚硅谷_JS高級_資料型別 40:43

資料型別分類

資料型別判斷

P3 03.尚硅谷_JS高級_相關問題 20:31

實體

1. undefined與null的區別？

2. 什么時候給變數賦值為null呢？

3. 嚴格區別變數型別與資料型別？

P4 04.尚硅谷_JS高級_資料_變數_記憶體 47:39

1. 什么是資料？

2. 什么是記憶體？

3. 什么是變數？

4. 記憶體、資料、變數三者之間的關系，

P5 05.尚硅谷_JS高級_相關問題1 24:22

情況討論：var a = xxx（賦值操作），a記憶體中到底保存的是什么？

關于參考變數賦值問題

P6 06.尚硅谷_JS高級_相關問題2 25:38

關于參考變數賦值問題

關于資料傳遞問題

記憶體管理

P1 01.尚硅谷_JS高級_準備 07:07

WebStrom 下載及安裝

嗶哩嗶哩網站視頻：【分享】WebStorm2020.1安裝教程-Windows篇

1、WebStorm 卸載

2、WebStrom 下載（官網）

下載鏈接

3、WebStrom 下載（百度網盤）

【鏈接：https://pan.baidu.com/s/1-iVrlbLbvx8MX4UZT5lIeA 提取碼：zjxs】

JS高級 Xmind 思維導圖

WebStorm 匯入檔案

P2 02.尚硅谷_JS高級_資料型別 40:43

資料型別分類

基本(值)型別

Number：任意數值
String：任意文本
Boolean：true / false
undefined：undefined
null：null

物件(參考)型別

Object：任意物件（[]、函式...）
Array：特別的物件型別(數值下標 / 內部資料有序)
Function：特別的物件型別(可執行)

資料型別判斷

typeof

回傳資料型別的字串表達；
可以區別：數值、字串、布林值、undefined、function；
不能區別：null與object、一般object與array，

instanceof

專門用來判斷物件資料的型別：Object、Array與Function，

===

可以判斷：undefined和null，

=== 可以判斷：undefined和null，默認值唯一 ---> undefined：undefined；null：null，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_資料型別</title>
</head>
<body>
<script type="text/javascript">
    var b1 = { // 物件型別
        b2: [1, 'abc', console.log],
        b3: function () {
            console.log('b3')
            return function () {
                return 'xfzhang'
            }
        }
    }

    console.log(b1 instanceof Object, b1 instanceof Array) // true false
    console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true
    console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true

    console.log(typeof b1.b3 === 'function') // true

    console.log(typeof b1.b2[2] === 'function') // true
    b1.b2[2](4) // 4
    console.log(b1.b3()()) // xfzhang


    console.log(typeof Array) // function
    console.log(typeof b1.b2) // object
    console.log(typeof b1.b2[2]) // function
    console.log("---")
    console.log(b1.b2[2](4)) // 4 undefined
    console.log("--- ---")
    console.log(b1.b2[2]) // ? log() { [native code] }
    console.log("--- --- --- ---")
    console.log(b1.b2[2]('abc')) // 'abc' undefined
    console.log("--- --- ---")
    console.log(b1.b3()) // b3 ? (){ return 'xfzhang' }
</script>
</body>
</html>

P3 03.尚硅谷_JS高級_相關問題 20:31

實體

使用同一個建構式創建的物件，我們稱為一類物件，也將一個建構式稱為一個類，我們將通過一個建構式創建的物件，稱為是該類的實體，

1. undefined與null的區別？

1. undefined與null的區別？

undefined代表定義未賦值；null定義并賦值，只是值為null，

2. 什么時候給變數賦值為null呢？

2. 什么時候給變數賦值為null呢？

初始賦值，表明將要賦值為物件；結束前，讓物件成為垃圾物件（被垃圾回收器回收），初始化賦值：將要作為參考變數使用, 但物件還沒有確定，結束時：將變數指向的物件成為垃圾物件，

var a = null // a將指向一個物件，但物件此時還沒有確定
a = null // 讓a指向的物件成為垃圾物件

3. 嚴格區別變數型別與資料型別？

3. 嚴格區別變數型別與資料型別？

js的變數本身是沒有型別的，變數的型別實際上是變數記憶體中資料的型別（js是弱型別的語言），var a; 判斷變數型別，實際上是判斷值的型別，

資料的型別（資料物件）：
* 基本型別
* 物件型別

變數的型別（變數記憶體值的型別）：
* 基本型別：保存基本型別的資料（保存基本型別資料的變數），
* 參考型別：保存物件地址值（保存物件地址值的變數），

P4 04.尚硅谷_JS高級_資料_變數_記憶體 47:39

1. 什么是資料？

存盤于記憶體中代表特定資訊的'東東'，本質就是0101(二進制)...
資料的特點：具有可讀、可傳遞、可運算的基本特性，
萬物(一切)皆資料，函式也是資料，
記憶體(程式)中所有操作的目標: 資料
* 算術運算
* 邏輯運算
* 賦值
* 運行函式（呼叫函式傳參）
...

2. 什么是記憶體？

記憶體條通電后產生的可存盤資料的空間(臨時的)，

記憶體產生和死亡: 記憶體條(集成電路板)==>通電==>產生一定容量的存盤（記憶體）空間==>存盤各種資料==>處理資料==>斷電==>記憶體和資料全部消失

記憶體的空間是臨時的, 而硬碟的空間是持久的
一塊記憶體包含2個資料
* 內部存盤的資料(一般資料/地址資料)
* 記憶體地址值資料
記憶體分類
* 堆疊: 全域變數/區域變數 (空間較小)
* 堆: 物件 (空間較大)

3. 什么是變數？

值可以變化的量，由變數名與變數值組成，

一個變數對應一塊小記憶體，變數名用來查找對應的記憶體，變數值就是記憶體中保存的內容，

4. 記憶體、資料、變數三者之間的關系，

記憶體是一個容器，用來存盤程式運行需要操作的資料（記憶體是用來存盤資料的空間），

變數是記憶體的標識，我們通過變數找到對應的記憶體，進而操作(讀/寫)記憶體中的資料，

P5 05.尚硅谷_JS高級_相關問題1 24:22

情況討論：var a = xxx（賦值操作），a記憶體中到底保存的是什么？

問題：var a = xxx（賦值操作），a記憶體中到底保存的是什么？

xxx是一個基本資料，保存的就是這個資料，
xxx是一個物件，保存的是物件的地址值，
xxx是一個變數，保存的xxx的記憶體內容（保存的可能是基本資料，也可能是地址值資料），

關于參考變數賦值問題

關于參考變數賦值問題

2個參考變數指向同一個物件（保存的內容是同一個物件的地址值），通過一個參考變數修改物件內部資料，另一個參考變數也看得見（看見的是修改之后的資料），
2個參考變數指向同一個物件，讓一個參考變數指向另一個物件，另一個參考變數還是指向原來的物件，

此圖，針對第1條解釋，

此圖，針對第2條解釋，

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>02_關于參考變數賦值問題</title>
	</head>
	<body>
		<script type="text/javascript">
			//1. 2個參考變數指向同一個物件, 通過一個參考變數修改物件內部資料, 另一個參考變數也看得見
			var obj1 = {}
			var obj2 = obj1
			obj2.name = 'Tom'
			console.log(obj1.name) // Tom

			function f1(obj) {
				obj.age = 12
			}
			f1(obj2)
			console.log(obj1.age) // 12

			//2. 2個參考變數指向同一個物件,讓一個參考變數指向另一個物件, 另一個參考變數還是指向原來的物件
			var obj3 = {
				name: 'Tom'
			}
			var obj4 = obj3
			obj3 = {
				name: 'JACK'
			}
			console.log(obj4.name) // Tom

			function f2(obj) {
				obj = {
					name: 'Bob'
				}
			}
			f2(obj4)
			console.log(obj4.name) // Tom
			


			var a = {age: 12}; // 2個參考變數指向同一個物件
			var b = a;         // 2個參考變數指向同一個物件
			a = {name: 'Bob', age: 13}; // 將新的物件賦值給a
			b.age = 14; // 另一個參考變數還是指向原來的物件
			console.log(b.age, a.name, a.age); // 14 "Bob" 13
			
			function fn2 (obj) {
				obj = {age: 15}; // 新的物件（垃圾物件）
			}
			fn2(a); // 函式執行完，函式內部的區域變數(obj)會自動釋放

//總結：obj參考的地址值發生改變，不再參考傳進來的形參地址，并且函式作用域的原因，這個物件只能在函式內使用，
			console.log(a.age); // 13
		</script>
	</body>
</html>

P6 06.尚硅谷_JS高級_相關問題2 25:38

關于參考變數賦值問題

obj和a存的堆地址相同，下一步賦值obj的堆地址改變了，但是他并沒有改變之前a里存的堆地址的內容，

就是把a的內容拷貝一份到函式引數obj上，但函式內部obj指向了新物件，但不影響a指向的物件，

函式形參傳進去之后，復制a的值給obj，這兩個堆疊記憶體指向一個堆記憶體的資料，之后obj={age:15}，這時：obj指向另一個堆記憶體，這兩個堆記憶體不一樣了，再用obj修改age也不會影響到a指向的age，

關于資料傳遞問題

問題：在js呼叫函式時傳遞變數引數時，是值傳遞還是參考傳遞？

理解1：都是值(基本/地址值)傳遞，
理解2：可能是值傳遞，也可能是參考傳遞(地址值)，
只有值傳遞，沒有參考傳遞，傳遞的都是變數的值，只是這個值可能是基本資料，也可能是地址(參考)資料，
如果后一種看成是參考傳遞，那就值傳遞和參考傳遞都可以有，

因為函式里的a是函式內的區域變數，換成this.a = a + 1，這時候this.a就是你最開始定義的a，

假設形參是x，呼叫函式傳參時，發生了兩件事：1、讀取全域變數a的值；2、將值賦值給x ，然后執行函式內代碼，

括號里的a是全域里的a的值copy給他的，

記憶體管理

問題：JS引擎如何管理記憶體？

1. 記憶體生命周期

分配小記憶體空間，得到它的使用權（分配需要的記憶體），
存盤資料，可以反復進行操作（使用分配到的記憶體），
釋放小記憶體空間（不需要時將其釋放/歸還），

2. 釋放記憶體

區域變數：函式執行完自動釋放（為執行函式分配的堆疊空間記憶體），
物件：成為垃圾物件==>垃圾回收器回收（存盤物件的堆空間記憶體：當記憶體沒有參考指向時，物件成為垃圾物件，垃圾回收器后面就會回收釋放此記憶體，）

var a = 3; var obj = {}; // 占用3個空間，2個堆疊區一個堆區：a = 3、obj、{}（物件占用空間最大），

obj = null; // 占用2個空間，{}占用的空間被回收，

obj等于任意值，與堆的連接就取消了，所以堆的那塊成了垃圾，而堆疊這邊的obj還是等于任意值，全域變數obj并沒有釋放，