JavaScript 进阶笔记三（Primitive type VS Object type）

Primitive type VS Object type

primitive 是不可改变的（Immutable），object 是可以改变的

var str = 'Hello world'
str.toUpperString()
console.log(str)
//'Hello world'
// primitive type 下执行原生 function，都不会改变到原本位址的值，都会回传新的变数来取代。

var arr = [1]
arr.push(2)
console.log(arr)
//[1, 2]
// object type 下执行原生 function，就会改变到原本位址的值。

在 ES6 const 常数的宣告也是一样的

const obj = {
    number: 10
}
const obj2 = obj
obj2.number = 20
console.log(obj, obj2)
// 正常执行
// { number: 20 } { number: 20 }

const obj = {
    number: 10
}
const obj2 = obj
obj2 = {
  str: 'str'
}
console.log(obj, obj2)

// 出现 Error log

  obj2 = {
     ^
TypeError: Assignment to constant variable.
    at Object.<anonymous> (/Users/rock/.bitnami/stackman/machines/xampp/volumes/root/htdocs/rock/week16-js/type.js:50:6)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

两种型态赋值（=）的差别

Primitive type

var a = 10
var b = a
console.log(a, b)
//10 10

b = 20 
console.log(a, b)
//10 20

对於 primitive type 的资料储存，取值并储存在新宣告的变数。

会将 obj & obj2 call by value
a: 10
b: 10
当赋值 b = 20，b 会储存成一个新的值。
a: 10 
b: 20 

Object type

var obj = {
    number: 10
}
var obj2 = obj
console.log(obj, obj2)
//{ number: 10 } { number: 10 }

obj2.number = 20
console.log(obj, obj2)
//{ number: 20 } { number: 20 }

对於 Object type 的资料储存

将变数指向储存值的记忆体位置

01x0 = {
  number: 10
}
会将 obj & obj2 以址取值
obj = 01x0
obj2 = 01x0

当赋值 obj2.number = 20，会直接改变记忆体位址 01x0 储存的值，所以

obj.number = 20
obj2.number = 20


当用 = 赋值 obj2 时，会存到新的记忆体，将再 obj2 指向新的记忆体位置。

obj2 = {
    str: 'str'
}
此时，
obj = 01x0
boj2 = 02x0

console.log(obj, obj2)
//{ number: 20 } { str: 'str' }