week16(2021/7/26~2021/8/1)

[Lu-yeom]

日期：110年7月26日20:30~22:00
進度：[JS201] 進階 JavaScript：那些你一直搞不懂的地方

---

課程筆記：

一、變數的資料型態

• Primitive type原始型態
  • null
  • undefined
  • string
  • number
  • boolean
  • symbol(ES6)
• 其他都是 object 物件
  • object(array, function, date...)

二、如何知道變數的型態?

• typeof
  console.log(typeof 10)
console.log(typeof 'hello') console.log(typeof undefined)

三、null是object的bug

四、如何更詳細的知道變數的型態?
console.log(Object.prototype.toString.call())

五、另一種常見用法

if (typeof a !== 'undefined') {
  console.log(a)
}

[Lu-yeom]

日期：110年7月27日20:00~22:30
進度：[JS201] 進階 JavaScript：那些你一直搞不懂的地方

---

課程筆記：

一、== 與 === 的差別

• == 會轉換型態
• === 不會轉換型態
  所以在使用等號時，永遠都要用===

二、變數的生存範圍

• Scope作用域
  • var: function scope
  • let, const: block scope

三、從 Hoisting 理解底層運作機制

• hoisting 提升
  例1

  console.log(b)
  var b = 10

  • 宣告變數的情況下會hoisting
  • 賦值的情況下不會
    例2

    
    var test = function(){
    console.log(123)
    }

test()

但會回傳 test is not a function, 是因為以上程式碼分成兩個步驟  

var test test() test = function() { console.log(123) }

  * 因為test 是 undefined。賦值不會提升，宣告會提升  

[Lu-yeom]

日期：110年7月28~29日
進度：[JS201] 進階 JavaScript：那些你一直搞不懂的地方

---

課程筆記：

一、hoisting的順序

• function
• arguments 參數
• var

  function test(a) {
  console.log(a)
  var a = 456
  }
  test(123)
  // 得 123。值不會被改變， a 本來就有值了

  
  function test() {
  var a 
  console.log(a)
  }

test()

// 得 undefined，預設的值就是 undefined。

function test(a) { console.log(a) var a = 456 console.log(a) } test(123)

// 得 123 ， 得 456

二、hoisting 的原理  

var a = 1; function test(){ console.log('1.', a); var a = 7; console.log('2.', a); a++; var a; //有跟沒有是一樣的，並不會變成 undefiend inner(); console.log('4.', a); function inner(){ console.log('3.', a); a = 30; b = 200; } } test(); console.log('5.', a); a = 70; console.log('6.', a); console.log('7.', b);

答案會是：
  * 1.undefined => 因為 hoisting
  * 2.7
  * 3.8 => 因為 inner() 裡面沒有 a，只有被賦值 30，所以必須往上找 test() 裡面最後一個 a = 8 (a++)
  * 4.30 => 因為 inner() 裡面的 a 最後被賦值 30
  * 5.1
  * 6.70
  * 7.200 => b = 200 會被渲成全域變數  
原理在於：  

VO: { a: 123, b: function, c: undefined }

function test(a,b) { function b() {} var c = 30 }

test(123)

* 補充教材 - [我知道你懂 hoisting，可是你了解到多深？](https://github.com/aszx87410/blog/issues/34)  

[Lu-yeom]

日期：110年7月30日~8月1日
進度：[JS201] 進階 JavaScript：那些你一直搞不懂的地方

---

課程筆記：

一、Closure
所有的函式都是閉包：談 JS 中的作用域與 Closure

二、物件導向基礎與 prototype

// ES5  
function Dog(name) {
  this.name = name
}

Dog.prototype.getName = function() {
  return this.name
}

Dog.prototype.sayHello = function() {
  console.log(this.name)
}

var d = new Dog('abc')
d.sayHello()

var b = new Dog('123')
b.sayHello()

// ES6  
Class Dog {
  constructor(name) {
    this.name = nam
  }
  getName() {
    return this.name
  }
  sayHello() {
    console.log(this.name)
  }
}

var d = new Dog('abc')
d.sayHello()

var b = new Dog('123')
b.sayHello()

三、從 prototype 來看「原型鍊」

// ES5
function Dog(name) {
  this.name = name
}

Dog.prototype.getName = function() {
  return this.name
}

Dog.prototype.sayHello = function() {
  console.log(this.name)
}

var d = new Dog('abc')
console.log(d.__proto__ ===  Dog.prototype)

• d.sayhello()的執行順序
  • d 身上有沒有 sayhello
  • d.__proto__ 有沒有 sayhello => d.__protp__ = Dog.prototype
  • d.__proto__.__proto__ 有沒有sayhello => d.__prototype__.__proto__ = Object.prototype
  • d.__proto__.__proto__.__proto__ 有沒有sayhello
  • 回傳null 找到頂了
• 其實以上的流程就是prototype chain 原型鍊，將函式透過proto串連起來，可以共同享有一個函式

四、new到底做了什麼?

function Dog(name) {
  this.name = name
}

Dog.prototype.getName = function() {
  return this.name
}

Dog.prototype.sayHello = function() {
  console.log(this.name)
}

var b = newDog('sdfdfh')
b.sayHello()
console.log(b.getName())

function newDog(name) {
  var obj = {}
  Dog.call(obj, name)
  obj.__prototype__ = Dog.prototype
  return obj
}

• 產生新的object
• call obj, name的constructor，把新產生的object當作this丟進去，就可以得到完成初始化的object
• 接下來設定obj.__proto__，連接至Dog.prototype