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，可是你了解到多深？

[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