繼承技巧

• 在 JavaScript 中繼承是指一個對象基於另一個對象
• JavaScript 是利用 prototype 來實現繼承以及來管理繼承。
• prototype 對象用途是所有實例共享的屬性。
• 所有對象默認繼承來自 Object.prototype

Constructor Function

在JS裡所有事物都是對象，function也是對象。
構造函數透過new operator 可以創建新的對象Object。如不使用 new 和一般函數沒有區別。

• 在 js 裡， new 是用來創建一個對象
• new 構造函數(參數) -> 實例對象

基本 new 實現 思路：

1. 創建新的實例對象
2. 實例對象proto 指向於 構造函數.prototype
3. 構造函數裡 this 指向實例對象
4. 返回實例對象

可以參考 ☞ 我寫了一個實現 new

在基本類型依然可以使用引用類型屬性

let n = 9;
n.xxx = 10;
n.xxx = ? // undefined

為什麼呢？因為在JS歷史中，作者的老闆要他設計成像JAVA語法，所以才有現在String(), Number(), Boolean(), new, this等等…

但為了方便作者設計一個基本類型來表示，例如 let n = 9;
那基本類型可以使用 n.toString()? 答案是可以！

MVC 是什麼

MVC 是一種架構設計模式或是程式組織形式。我接觸 mvc 是在學 ruby on rails 的時候，這是讓我首次感受到 MVC 是什麼。

在前端某個情境：用戶點擊 submit 會觸發 controller 一個事件，然後 controller 會調用 model 的操作。最後 controller 就會通知 view

在 Google I/O 2019 推出一個 Assistant based framework 就是 Interactive Canvas。

備註：Interactive Canvas 和 HTML API Canvas 是沒有任何關係！

Supported devices

Interactive Canvas 目前支援 devices 有：

• Smart Display
• Google nest hubs
• Android mobile devices

在學習 JS，往往都會對 this 的值很模糊，也讓人困擾！以為認為 this 是指向某個對象，但往往不是你想那樣。正確來說，誰調用函數，那麼this 就指向調用者。但是要特別注意如果使用嚴謹模式 this 會轉變成 undefined。

function fn() {
  'use strict'
  console.log(this) // undefined
} 

發請求有哪幾種方式：

比較常規來講解

• form 表單來發起 get 或 post 請求，但會刷新頁面
• a 標籤可以發 get 請求，但會刷新頁面
• img 標籤可以發 get 請求，但只能以圖片形式來展示
• link 標籤可以發 get 請求，但只能以 css 和 favicon 等形式來展示
• script 標籤可以發 get 請求，但只能以腳本形式來執行

如果用 CRUD 的形式來實現：

• get
• post
• put
• delete

在 http 裡，response 是字串

知識點：

• Document Event
• onlick 和 addEventListener 區別
• 捕捉事件和泡沫事件
• stopPropagation()

什麼是跨域

首先我們需要了解什麼是同源策略 (Same origin policy)，目前所有 browser 都遵守此策略。
同源策略目的是資訊安全，防止他人竊取數據或 CSRF（Cross-site request forgery）。

所謂同源是指三個相同：

• 協議相同 (Protocol: http)
• 域名相同 (Domain: example.com)
• 端口相同 (Host: 80)

非同源情況下，browser 對它有何限制：

• Cookie, LocalStorage 和 IndexDB 無法讀取
• DOM 無法獲得
• Ajax 請求被阻止

只要三個【以上】不相同的話，就是跨域！

跨域是指當前 browser 一個網站可以向另一個網站請求讀寫資源。也就是說發起請求 abc.com (origin) 與請求指向資源 xxx.com (origin) 不相同就是跨域。但由於 browser 考量安全機制 (同源策略) 對跨域請求會做出限制！

何謂作用域

• 作用域就是變數和函數可訪問的範圍。
• 作用域可分為全局作用域 (Global Scope) 和函數作用域 (Local Scope) ，但在ES6之後，存在塊作用域 (Block Scope) 。
• JS 的作用域採用詞法作用域 (Lexical Scope) 也就是靜態作用域。