【JavaScript高階】2、基礎總結深入（資料、變數、記憶體）
阿新 • • 發佈：2018-12-17
一、資料—變數—記憶體
1. 什麼是資料?
* 儲存在記憶體中代表特定資訊的'東西', 本質上是0101...
* 資料的特點: 可傳遞, 可運算
* 一切皆資料
* 記憶體中所有操作的目標: 資料
* 算術運算
* 邏輯運算
* 賦值
* 執行函式
2. 什麼是記憶體?
* 記憶體條通電後產生的可儲存資料的空間(臨時的)
* 記憶體產生和死亡: 記憶體條(電路版)==>通電==>產生記憶體空間==>儲存資料==>處理資料==>斷電==>記憶體空間和資料都消失
* 一塊小記憶體的2個數據
* 內部儲存的資料
* 地址值
* 記憶體分類
* 棧: 全域性變數/區域性變數
* 堆: 物件
3. 什麼是變數?
* 可變化的量, 由變數名和變數值組成
* 每個變數都對應的一塊小記憶體, 變數名用來查詢對應的記憶體, 變數值就是記憶體中儲存的資料
4. 記憶體,資料, 變數三者之間的關係
* 記憶體用來儲存資料的空間
* 變數是記憶體的標識
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_資料_變數_記憶體</title> </head> <body> <script type="text/javascript"> var age = 18 console.log(age) var obj = {name: 'Tom'} console.log(obj.name) function fn () { var obj = {name: 'Tom'} } var a = 3 var b = a + 2 </script> </body> </html>
二、關於賦值和記憶體的問題
問題: var a = xxx, a記憶體中到底儲存的是什麼?
* xxx是基本資料，儲存的就是這個資料
* xxx是物件，儲存的是物件的地址值
* xxx是一個變數，儲存的是xxx的記憶體內容（可能是基本資料，也可能是地址值）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關於賦值和記憶體的問題</title> </head> <body> <script type="text/javascript"> var a = 3 a = function () { } var b = 'abc' a = b b = {} a = b </script> </body> </html>
三、關於引用變數賦值問題
關於引用變數賦值問題 * 2個引用變數指向同一個物件，通過其中一個引用變數修改物件內部的資料，另一個引用變數看到的是修改之後的資料 * 2個引用變數指向同一個物件，讓其中一個引用變數指向另一個物件，另一個引用變數依然指向前一個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_關於引用變數賦值問題</title>
</head>
<body>
<script type="text/javascript">
var obj1 = {name: 'Tom'}
var obj2 = obj1
obj2.age = 12
console.log(obj1.age) // 12
function fn (obj) {
obj.name = 'A'
}
fn(obj1)
console.log(obj2.name) //A
var a = {age: 12}
var b = a
a = {name: 'BOB', age: 13}
b.age = 14
console.log(b.age, a.name, a.age) // 14 Bob 13
function fn2 (obj) {
obj = {age: 15}
}
fn2(a)
console.log(a.age) // 13
</script>
</body>
</html>四、關於資料傳遞問題
問題: 在js呼叫函式時傳遞變數引數時, 是值傳遞還是引用傳遞 * 理解一：都是值（基本資料/物件）傳遞 * 理解二：可能是值傳遞，也可能是引用傳遞（地址值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_關於資料傳遞問題</title>
</head>
<body>
<script type="text/javascript">
var a = 3
function fn (a) {
a = a +1
}
fn(a)
console.log(a) // 3
function fn2 (obj) {
console.log(obj.name) // Tom
}
var obj = {name: 'Tom'}
fn2(obj)
</script>
</body>
</html>五、記憶體管理
問題: JS引擎如何管理記憶體? 1. 記憶體生命週期 * 分配小記憶體空間，得到它的使用權 * 儲存資料，可以反覆進行操作 * 釋放小記憶體空間 2. 釋放記憶體 * 區域性變數：函式執行完自動釋放 * 物件：成為垃圾物件==>垃圾回收器回收
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_記憶體管理</title>
</head>
<body>
<script type="text/javascript">
var a = 3
var obj = {}
obj = null
function fn () {
var b = {}
}
fn() // b是自動釋放, b所指向的物件是在後面的某個時刻由垃圾回收器回收
</script>
</body>
</html>