1. 程式人生 > 實用技巧 >JS 高階程式第四版 (基本型別 與 變數、作用域)

JS 高階程式第四版 (基本型別 與 變數、作用域)

    在當前的Js中一共有6中簡單的資料型別

    分別是

    String Number Null Nndefined 布林Symbol

    以及一種複雜的資料型別

    Object

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在JS中又包含著兩種不同型別的資料 ,原始值和引用值 (原始型別)(引用型別)

而原始值 就是上面所提到的6種簡單的資料型別儲存原始值的變數是按值(by value)訪問的,因為我們操作的就是儲存在變數中的實際值。

而引用值,主要指的是Object這複雜的資料型別

let name1='tom'
let name2=new String('mary')


name1.age=26
name2.age=26

console.log(name1.age) // undefind
console.log(name2.age) //26


//使用new建立的原始型別的資料 ,會建立一個Object 的資料

  關於原始值 (上面六種簡單的資料型別)與 引用值(複雜資料型別Object)最大的不同也在於 原始值在被複制的時候,兩個變數都會有值,二者不會相互關聯

  例如

let name='tom'
let name2=name
//此時 name name2都是兩個變數
let name=‘jeck’
console.log(name) //jeck
console.log(name2) //tom

  

------------------------------------

而引用值更像是 就是Object型別的資料 ,在複製這種資料的時候,是複製的指向地址,二者還會相互關聯

let name=new Object()
let name1=name
name.age=26
console.log(name1.age) //26 
//此時 name1 與 name 儲存的是一個地址,在賦值後,二者同時指向了記憶體中的的一塊地方,所以改變其中一個,二者都會被改變

  

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JS中的執行上下文

   通俗一點也就是作用域,在瀏覽器中,最外層的作用域就是window,可以訪問到使用var宣告的變數以及 函式,但是訪問不到使用let const宣告的變數

   然後就是函式的作用域

   上下文中的程式碼在執行的時候,會建立變數物件的一個作用域鏈(scope chain)。這個作用域鏈決定了各級上下文中的程式碼在訪問變數和函式時的順序。(書中的解釋 有點不好理解)

  程式在執行時候,會根據每個變數而建立一個作用域鏈,通過這個作用域鏈來訪問變數以及函式

  說白了主要有兩種全域性作用域以及函式作用域 而在函式作用域中可以訪問到全域性作用域

  而在函式作用域中使用var 或者 let 宣告的變數在全域性作用域中不會被訪問到

let color='red'
change(){
    
  if(color=='red'){
      color='green'  
    }  
}

  在這段程式碼中,change函式他的作用域鏈有兩個物件 一個是最外部的color 還一個就是一個是它自己的變數物件(就是定義arguments物件的那個)

var color = "blue";

function changeColor() {
  let anotherColor = "red";

  function swapColors() {
    let tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;

    // 這裡可以訪問color、anotherColor和tempColor
  }

  // 這裡可以訪問color和anotherColor,但訪問不到tempColor
  swapColors();
}

// 這裡只能訪問color
changeColor();

  這張圖很好的解釋了這段程式碼 以及 所有變數以及函式的作用域