Advanced JS (上)

scope

def : variable access 變數生存的範圍
root scope (ex : window) / child scope

function has access to any variable and scopes.

let fun = 100

function funny() {
  let fun = 'haha'
  console.log('fun',fun)
}

function funless() {
  fun = 'byby'
  console.log('fun',fun)
}

funny() // 呼叫函式 => log 出 'fun haha'
console.log(fun) // 100 
funless() // 呼叫函式 => log 出 'fun byby', fun 的值被 modify
console.log(fun) // 'byby'

pass by value and pass by reference

primitive types are immutable, which means we can't really change them. In order to change them, we need to remove the primitive types.
pass by value means we copy the value and we create the value somewhere else in memory.

JavaScript Object Explorer

object in Js are stored in memory and are passed by reference, which means we don't copy the value. We are saving memory. We are not constantly coping things.

複製陣列 (以下列方式複製，記憶體位置不同)

var c = [1, 2, 3]
var d = [].concat(c) // push whatever i have in c in the empty array
d.push('apple')
console.log(c) // [1, 2, 3]
console.log(d) // [1, 2, 3, 'apple']

複製物件 (以下列方式複製，記憶體位置不同)

let obj = {a: 'a', b: 'b', c: 'c'}
let clone = Object.assign({},obj)

let clone2 = {...obj}

obj.c = 100

console.log(clone) // { a: 'a', b: 'b', c: 'c' }
console.log(clone2) // { a: 'a', b: 'b', c: 'c' }

console.log(obj) // { a: 'a', b: 'b', c: 100 }

if we have object inside object, what will happen ?
recall :

let obj = {
  a: 'a',
  b: 'b', 
  c: {
    deep : 'try and copy me'
  }
}
let clone = Object.assign({},obj) 

let clone2 = {...obj}

obj.c = 100

console.log(clone) // { a: 'a', b: 'b', c: { deep: 'try and copy me' } }
console.log(clone2) // { a: 'a', b: 'b', c: { deep: 'try and copy me' } }

console.log(obj) // { a: 'a', b: 'b', c: 100 }

what if we change deep ?
Remember each object pass by reference. This is called shallow clone. It clones the first level, but within the object there is another address that we had someplace in memory and this address. This address never changes. 我們只複製了第一層。

Solution : super clone
if the object was extremely deep a massive object, it's getting a long time to clone everything. 限制 : 物件太深太多太大，會花大量時間去複製

let obj = {
  a: 'a',
  b: 'b', 
  c: {
    deep : 'try and copy me'
  }
}
let clone = Object.assign({},obj) 

let clone2 = {...obj}
let superClone = JSON.parse(JSON.stringify(obj))
obj.c.deep = 'love love love'

console.log(clone) // { a: 'a', b: 'b', c: { deep: 'love love love' } }
console.log(clone2) // { a: 'a', b: 'b', c: { deep: 'love love love' } }
console.log(superClone) // { a: 'a', b: 'b', c: { deep: 'try and copy me' } }
console.log(obj) // { a: 'a', b: 'b', c: { deep: 'love love love' } }

習題// 未解

//#3 create two classes: an Animal class and a Mamal class. 
// create a cow that accepts a name, type and color and has a sound method that moo's her name, type and color. 
class Animal {
    constructor(name, type, color) {
        this.name = name;
        this.color = color;
        this.type = type;
    }
}

class Mamal extends Animal {
    constructor(name, type, color) {
        super(name, type, color)
    }
    sound() {
        console.log(`Moooo I'm ${this.name} and I'm a ${this.color} ${this.type}`);
    }
}

const cow = new Mamal('Shelly', 'cow', 'brown');