面向對象

 類的概念
  類是對對象的一種歸納，而對象是類的一種具體實現
 對象的分類
  原生對象
   原生對象又能夠分爲兩類
    內置對象
     列如前面學習過的Date、Math、正則、數組等，這些就是典型的內置對象。它們是JavaScript這門語言自己所內置的，咱們直接使用便可
    自定義對象
     自定義對象是咱們開發人員本身定遠的對象，列如在JS基礎中介紹符的使用{}快速生成對象。這樣的對象就能夠被稱之爲自定義對象
  宿主對象
   顧名思義，就是依存於某一個特定的環境纔會有的對象，一旦離開了特定的環境，則這些對象將不存在。列如前面咱們在講解DOM編程時介紹過的window、navigator、history等對象，這些都是依賴於瀏覽器環境的。一旦脫離瀏覽器環境，這些對象也就不存在了。
  原型對象
   在JavaScript裏面，沒有類這個概念，只有原型的概念。在JavaScript裏面的每個對象，都有一個原型對象，而原型對象上面也有一個本身的原型對象，一層一層向上找，最終到達null。
   經過上面的圖咱們能夠得出如下結論
    每個對象都有一個原型對象。咱們能夠經過__proto__來訪問到某個對象的原型對象
    經過__proto__一直向上尋找原型對象的話，最終會找到null
    一個構造函數prototype屬性指向一個對象，兒這個對象是經過該構造函數實挒化出來的對象的原型對象
    JavaScript中的Object.prototype對象。Object.prototype對象是一個空對象，JavaScript中遇到的每一個對象，實際上都是從Object.prototype對象克隆而來的。Object.prototype對象就是它們的原型。而Object.prototype對象的原型爲null。
 類與對象的建立
  構造函數
   JavaScript是一門很特殊的語言，在ES6以前都沒有類的概念，而是經過構造函數老模擬其餘編程語言裏面的類的。構造函數實際上也是函數，不過這種函數是專門用於生產對象的，因此被稱之爲構造函數。它的外表和普通函數如出一轍，區別在於被調用的方式上面。
   構造函數的函數名又一個不成文的規定，就是首字母要大寫，以便和普通函數進行區分。
   用new運算符調用函數時，該函數總會返回一個對象，一般狀況下，構造函數裏面的this就指向返回的這個對象
   但用new調用構造函數時，還須要注意一個問題，若是構造函數顯示的返回了一個object類型的對象，那麼這次運算結果最終會返回這個對象，而不是咱們以前所期待的this，這裏咱們經過下面的兩段代碼搞清楚構造函數是否顯示返回object類型對象之間的區別
   構造函數顯示的返回一個object類型的對象，那麼最終使用的就是手動返回的這個對象
  ES6類的聲明
   在ES6中，已經開始愈來愈貼近其餘好幾語言了，在ES6中有了類這個概念，使用class建立類。而後從類裏面實挒化對象
   可是，須要說明的是，雖然有了class這種關鍵字，可是這只是一種語法糖，背後對象的建立仍是使用的是原型的方式
  靜態方法
   所謂靜態方法，又被稱之爲類方法。顧名思義，就是經過類來調用的方法。靜態方法的好處在於不須要示例化對象，直接經過類就可以進行方法的調用
   在ES6建立類的方法的時候，能夠給方法前面添加一個關鍵字static，來建立一個靜態方法
 與原型相關的方法
  prototype和__proto__
   prototype是構造函數上面的一個屬性，指向一個對象，這個對象是構造函數實挒化出來的對象的原型對象。實挒化出來的對象能夠經過__proto__來找到本身的原型對象
  Object.getPrototypeOf()
   也能夠經過Object.getPrototypeOf()來查找一個對象的原型對象
  constructor屬性
   經過constructor屬性，咱們能夠查看到一個對象的構造函數是什麼，換句話說，就是這個對象是如何得來的
  instanceof操做符
   判斷一個對象是不是一個構造函數的實挒，若是是返回true，不然返回false
 HTML5 API
  Web Storage
   它提供了一種存儲方式，可讓web頁面實如今客戶端瀏覽器中意鍵值對形式在本地保存數據
   Cookie存儲機制優勢
    簡單易用
    瀏覽器負責傳送數據
    瀏覽器自動管理不一樣站點的Cookie
   Cookie缺點
    由於他是簡單的文本存儲數據，因此Cookie安全性不好，保存在客戶端瀏覽器，很容易被竊取
    存儲內容有限，上線只有4KB
    存儲Cookie數量有限，多數瀏覽器上限爲30-50個
    若是瀏覽器安全配置爲最高級別，nameCookie會失效
    Cookie不適合大量數據存儲，由於Cookie由每一個對服務器的請求來傳遞，從而形成Cookie速度緩慢效率低下
   localStorage
    它是一種沒有時間限制的存儲方式，能夠將數據保存在客戶端硬盤獲其餘存儲器中
    瀏覽器關閉不會讓數據小時，再次打開瀏覽器，咱們依舊能夠訪問到這些數據，除非咱們刪除，不然永不過時
   sessionStorage
    將數據保存在session對象中，web中session指用戶瀏覽某個網站時，從進入到關閉瀏覽器所通過的時間
    session對象在瀏覽器關閉後，這些數據會被刪除
   Web Storage優勢
    提供了易於使用的API接口，只須要設置鍵值對應便可使用，簡單方便
    在存儲容量方面能夠根據用戶分配的磁盤配額進行存儲，可以在每一個用戶域存儲5MB-10MB內容，用戶不只能夠存儲session，還能夠存儲許多信息，如設置偏好，本地化的數據和離線數據等
    它提供了JS編程的接口，開發者可使用JS客戶端腳本實現許多之前只能在服務器端才能完成的工做
   使用
    例
   storage事件
    key：告訴咱們被修改的條目的鍵
    newValue:告訴咱們被修改後的新值
    oldValue：告訴咱們修改前的值
    storageArea：告訴咱們是本地存儲仍是會話存儲
    url：改變鍵的文檔地址
  Geolocation
   他是html5新增的地理位置應用程序接口，它提供了一個能夠準確感知瀏覽器用戶當前位置的方法
    子主題 1
  Web Worker
   它是一項後臺處理技術，有了它，用戶能夠很容易的建立在後臺運行的線程，這個線程被稱爲Worker
   ie不支持，Firefox3.5以上支持，Opera10.6以上支持，Chrome3.0以上支持，Safari4.0以上支持
  多媒體
   爲了作到瀏覽器兼容，咱們能夠將多媒體文件的路徑卸載 source 標籤中
   若是取藥插入視頻，咱們將audio（音頻）標籤換成video（視頻）標籤
   相關屬性和方法
    在JS中，相關的屬性和方法：
    muted：是否靜音，true開啓
    autobuffer：true後實現自動緩衝
    autoplay：設置自動播放
    loop：設置後將會重複播放
    poster：設置封面，只有video能夠，封面只是一張圖，沒有播放的時候顯示的圖片
    width和height：設置視頻的寬高
    volune:設置音量
    currentTime：獲取多媒體當前所播放的具體時間
    playbackRate：設置快進或者快退速度的數字值，值爲1正常播放
    duration：多媒體播放時長
    paly：開始播放
    pause：暫停播放
    volumechange:調整多媒體音量
    loadedmetadata：在多媒體全部原數據被加載時會觸發該事件
  Canvas畫圖
   他是網頁上一個矩形單元，能夠用JS在上面繪畫
   添加canvas元素
   直線
   矩形
   圓形
   三角
   清除
  SVG
   同上，也是畫圖工具，在Canvas出來以前，很長一段時間都是用它
   SVG意爲可縮放矢量圖形，它是使用XML格式來定義圖像經過SVG畫出來的圖形是矢量圖，在放大或者改變尺寸，他的質量不會損失
   優點
    它能夠被很是多的工具讀取和修改（好比記事本）
    他和JPEG和GIF圖像比較起來，尺寸更小，且可壓縮性更強
    可伸縮
    可在任何分辨率下被高質量的打印
    能夠在圖像質量不降低的狀況下被放大
    他的文本可選，也能夠被搜索（很適合作地圖）
    能夠喝Java技術一塊兒運行
    是開放標準
    他的文件是純粹的XML
    它的主要競爭者是Flash
   繪圖
    矩形
    圓形
    橢圓
    線
    折線
    多邊形
    路徑
  HTML5 拖放
   拖放，就是抓取對象而後拖到另外一個位置
   源對象和目標對象
    源對象：指的是咱們鼠標點擊的一個事物，能夠是一張圖片，一個div，或一段文本等等
    目標對象：指的是咱們拖動源對象後移動到一塊區域，源對象能夠進入到這個區域，而後在這個區域上方懸停（未鬆手），能夠是鬆手釋放講源對象放置此處（已鬆手），也能夠懸停後離開該區域
   拖放相關API
    源對象
     dragstart：源對象開放拖放
     drag：源對象拖放過程當中（鼠標可能在移動也可能未移動）
     dragend：源對象拖放過程結束
    過程對象
     dragenter：源對象開始進入過程對象範圍內
     dragover：源對象在過程對象範圍內移動
     dragleave：源對象離開過程對象的範圍
    目標對象
     drop：源對象被拖放到目標對象內
   DataTransfer對象
    serData（）：dataTransfer對象中存入數據，接收兩個參數，第一個表示存入數據種類的字符串，第二個爲要存入的數據
    getData（）：他能夠從dataTransfer對象中讀取數據，參數在爲setData中指定的數據種類
    clearData（）：清除dataTransfer對象存放的數據，參數可選，爲數據種類，若是參數是空的，就清楚全部種類的數據
    setDragImage（）：經過img元素來設置拖放圖標，第一個爲圖表元素，第二個爲圖表元素離鼠標指針的X軸位移量，第三個爲圖標元素離鼠標指針Y軸位移量
    effectAllowed和dropEffect屬性:結合起來設置拖放的視覺效果
    注：IE不支持data Transfer對象
   拖放，例：
  Notification
   傳統桌面通知能夠寫一個div放到頁面右下角自動彈出來，並經過輪詢等方法獲取並推送給用戶
    弊端是：咱們在一個網站購物時，不知道另外一個網站有消息推送過來，咱們必須等用戶切換到另外一個網站才能知道有消息推送過來，這種方法是基於頁面存活的
    因此須要用Notification，不管用戶當前在看那一個頁面，只要有消息，都能推送給用戶
    例
   使用
    建立
    延時的系統通知
    事件處理
     Notification.onclick：處理click事件的處理，每當用戶點擊通知時被觸發
     Notification.onshow：處理show事件的處理，每當通知顯示時被觸發
     Notification.onerror：處理error事件的處理，每當通知遇到錯誤時被觸發
     Notification.onclose：處理close事件的處理，每當用戶關閉通知時被觸發
 混入技術
  淺複製與深複製
   雖然咱們實現了對象的混入，可是，這種混入有一個缺點，那就是混入時若是對象的屬性是一個引用類型的數據，例如是一個數組或者是一 個對象，那麼只會發生淺複製，也就是說只會複製其引用
   建立一個mixin()函數,該函數會對一一個對象的全部屬性進行深度的複製
 內置對象添加方法
 this指向
  普通函數中this指向
   this指向全局對象。當this是在全局中使用，或者是在函數中，可是該函數不做爲對象的方法，只是做爲普通函數被調用時，指向的就是全局對象(node裏面是global對象，瀏覽器環境裏面是window對象)
   以普通函數的方式調用的時候，不管嵌套多少層函數，this 都是指向全局對象
  改變this指向
   使用call或者apply來修改this指向
   使用bind（）方法強行綁定this指向
    語法以下:fun. bind(thisArg[, arg1[, arg2[, ...]]])
    thisArg 當綁定函數被調用時，該參數會做爲原函數運行時的this指向
    arg1, arg2, .... 當綁定函數被調用時，這些參數將置於實參以前傳遞給被綁定的方法。
   箭頭函數的this指向
    始終是指向的外層做用域。
 繼承
  繼承的缺點
   首先若是繼承設計得很是複雜，那麼整個程序的設計也會變得龐大而臃腫，甚至常常會出現「大猩猩與香蕉」的問題。「大猩猩與香蕉」這個名字來自於Eriang編程語言的創始人Joe Armstrong的文章：你想要一個香蕉，可是獲得是拿着香蕉和整個叢林的大猩猩
   還有一個問題就是，若是是像c++那樣的多繼承語言，那麼還可能會遇到菱形繼承的問題。
    單繼承
     所謂單繼承，就是指只有一個父類
    多繼承
     所謂多繼承，就是指有多個父類
    菱形繼承問題
     首先須要說明，菱形繼承問題只會在多繼承裏面纔會出現。列如：A和B都繼承Base類，假設Base類裏面有一個成員方法，那麼A和B裏面都會有這個成員方法，這個時候A和B兩個類又都對這個成員方法進行了修改。接下來讓一個C來同時繼承A和B，那麼這個時候就會產生一個問題，對於同名的方法，哪究竟使用哪個，這就是所謂的菱形繼承問題，這個是屬於設計上的問題
     不過，JavaScript是一門單繼承的語言，因此必定程度上避免了菱形繼承的問題
  對象冒充
   最先的時候，在JavaScript裏面採用的是對象冒充的方式來實現的繼承。所謂對象冒充，就是用父類（構造函數）去充當子類的屬性
  方法借用模式
   如今屬性JavaScript繼承，基本上不會再使用對象冒充了，可是上面之因此要介紹對象冒充這種繼承方式，是爲了順帶引出JS中一個很是有特點的方法借用模式，這在JS中是至關靈活的一種模式，不須要繼承，就能夠從父類或者原型上面借用相應的屬性和方法。
  ES6繼承模式
   從ES6開始，可使用extends關鍵字來實現繼承了
 封裝
  通常來說，對於私有屬性，又一個不成文的規定，那就是習慣使用_開頭來命名私有屬性。
  封裝後的屬性，咱們能夠將其稱之爲私有屬性，對於外部來說，私有屬性是不可見的，這個咱們已經知道了，可是對於內部來說，私有屬性是可見的。這就比如電視機裏面的零件封裝後外部沒法直接訪問到，可是電視機內部是可使用這個零件來完成相應的功能的
  存儲器
   get ： 一旦目標屬性被訪問時，就會調用相應的方法
   set  ：  一旦目標屬性被設置時，就會不調用相應的方法
 Ajax
  基本介紹
   在2005年提出，一種新的Web應用程序方法，全稱 Asynchronous JavaScript and XML。
    Asynchronous：翻譯成中文是異步的意思，當發送數據請求時，程序沒必要停下來等待相應，他能夠繼續運行，等待響應收到時觸發事件。經過使用回調來管理這種過程，程序可以以有效的方式運行，避免了數據來回傳輸帶來的延遲
    JavaScript：利用JavaScript咱們能夠接受來自服務器端返回的數據，並將這些數據實時的更新到頁面上
    XML：最開始術語 Ajax 被創造，常常用XML文檔返回，但實際上能夠發送許多不一樣類型的數據。目前爲止 Ajax 最經常使用的是JSON，他比XML更輕量且更容易解析，它還具有JS原生支持的優勢，因此咱們能夠處理JS對象，沒必要使用DOM來解析XML
   優勢
    頁面無刷新，在頁面內在於服務器通訊，減小用戶等待時間，加強用戶體驗
    用異步方法與服務器通訊，響應速度快
    能夠把一些本來服務器的馮做轉接到客戶端，利用客戶端閒置能力處理，減輕了服務器和寬帶的負擔，節約空間和寬帶租用成本
    基於標準化的並被普遍支持的技術，並不須要下載插件或者小程序。
   缺點
    沒法操做後退，就是不支持瀏覽器頁面後退
    對搜索引擎的支持比較弱
    可能會影響程序中的異步處理機制
    安全問題，對一些網站攻擊，如csrf,xxs,sql注入等不能很好的防護
  原生Ajax的實現
   建立XMLHttpRequest對象
   發出HTTP請求
   接收服務器傳回的數據
   更新網頁數據
  Mock.js
   先後端分離：讓前端工程師獨立於後端開發
   開發無侵入：不須要修改既有的代碼，就能夠攔截Ajax請求，返回模擬的響應數據
   數據類型豐富：支持生成隨機的文本、數字。布爾值、日期、郵箱、連接、圖片和顏色等
   增長單元測試的真實性：經過隨機數據，模擬各類場景
   用法簡單：符合直覺的接口
   方便擴展：支持擴展更多數據類型，支持自定義函數和正則
   語法規範
    數據模板定義規範DTD
     數據模板中的每一個屬性由3部分構成：屬性名、生成規則、屬性值