Web開發學習筆記01—Primitive type v.s. Object type


Posted by Teagan Hsu on 2020-10-16

Javascript裡可分為兩個型別(type),分別是原始型別(Primitive type)與物件型別(Object type),本篇為自己學習線上課程後,額外找資料學習、釐清觀念而寫成的筆記。

Primitive type

Primitive type屬於Call by value,意思是說複製一個新的值,放進新的記憶體中,因此當舊數值改變時,新數值不會跟著改變,因為它們彼此是獨立存在的。

以下範例。可以理解成userNumber1儲存在記憶體中a的位置,userNumber2儲存在b的位置,因此當userNumber1改變值(新賦值成87654321)時,並不會影響到userNumber2的值,因為兩者是獨立存在不同記憶體空間的,所以userNumber2的值還是12345678噢!

var userNumber1 = "12345678"
var userNumber2;
userNumber2 = userNumber1
userNumber1 = "87654321"

console.log(userNumber1)  //87654321
console.log(userNumber2)  //12345678

原始型別(Primitive type)包含:

◎ Number

var a = 6;
var b = 100;

◎ String

var greeting= “Hello!”;

◎ Boolean

var c = true;
var d = false;

◎ Undefined

undefined表示變數存在,只是我們還未幫它加上value。

var e;

◎ Null

null表示現在沒有value,例如製作小遊戲,遊戲結束時player的變數變為null。

var gamePlayer= null;  //game over

◎ Symbol(ES6)

var sym1 = Symbol(value);

◎ BigInt(ES6)

var num = BigInt(value);

Object type

Object type屬於Call by reference,意思是說舊值與新值是存在同一個位置中,兩者的值(value)會根據其中一個的改變而互相影響。

以下範例。可以發現物件型別的值會影響到對方,當s改變時w也會跟著改變,這是因為w的值被指定到了s的值的位置(也有人說是傳「址」)。

var s = { weather: “cloudy” };
var w;
var w = s;
console.log(s);  //cloudy
console.log(w);  //cloudy

s.weather = "sunny";
console.log(s);  //sunny
console.log(w);  //sunny

function changeWeather(obj) { obj.weather = "rain"; }
changeWeather(w);
console.log(s);  //rain
console.log(w);  //rain

物件型別(Object type)包含:

◎ Object

var obj = {
    name: "Teagan";
    age: "21";
    interests: ["music", "coding"]
}

◎ Function

function func(num) {
    console.log(num*num);
}

◎ Array

var arr = ["apple", "banana", "orange"];

例外情況:Call by sharing

使用物件實字(Object Literals)重新賦值的話,結果會像是Call by value一樣,被重新賦值的變數會被存到另一個獨立記憶體中。

var s = {weather : "cloudy"};
var w;
w = s;
console.log(s);          //cloudy
console.log(w);          //cloudy

s = {weather : "rain"};  //Object Literals
console.log(s);          //rain
console.log(w);          //cloudy

參考資料
01. JavaScript Value vs Reference Types
02. [筆記] 談談 JavaScript 中 by reference 和 by value 的重要觀念
03. 深入探討 JavaScript 中的參數傳遞:call by value 還是 reference?
04. 你不可不知的 JavaScript 二三事#Day26:程式界的哈姆雷特 —— Pass by value, or Pass by reference?


#primitive type #object type #call by value #call by reference #Call by sharing #javascript







Related Posts

從模組化來看 npm

從模組化來看 npm

[Day 01] - Vault 的簡單介紹及安裝

[Day 01] - Vault 的簡單介紹及安裝

PHP 語法基礎

PHP 語法基礎


Comments