前端知識總結之JavaScript篇

一. this的使用場景?

• 普通函數中的this指向全局window
• 構造函數中的this指向實例對象
• 對象方法中調用this,this指向該方法的對象
• 當函數用call,apply或者bind調用時,this指向傳入的對象
• 箭頭函數中沒有this,this指向外部做用域中的this
• 經過事件綁定方法時,this指向事件源

二. New關鍵字的運行機制

• 建立一個新的空對象
• 將構造函數的this指向該空對象的方法
• 將該空對象原型指向構造函數原型
• 返回新對象

三. 做用域/預解析/做用域鏈

• 做用域:變量和函數可訪問的一個範圍,分爲全局變量,全局做用域.局部變量,局部做用域
• JS代碼讀取時,首先進行預解析,尋找做用域中的變量和函數,而後對其進行提早聲明,代碼從上往下執行,函數內的變量麼有var聲明就是全局變量
• 做用域鏈:執行函數時,先從函數內部尋找局部變量,若是沒找到,就會向聲明函數的做用域依次向上尋找

四. Array數組的相關方法:

• push:數組末尾添加
• pop:數組末尾刪除
• unshift:數組開頭添加
• shift:數組開頭刪除
• sort:數組排序
• join:數組拼接成字符串
• splice:刪除數組中第幾項,始終返回一個數組
• indexOf:數組中查找第一次出現的位置,未找到時返回-1
• lastIndexOf:數組中從末尾往前查找第一次出現的位置,未找到時返回-1
• concat: 合併兩個或多個數組,返回一個新數組
• sort: 數組排序,返回排序後的數組
• reverse: 數組進行翻轉(倒序)
• map: 對數組中的每一項數據進行加工處理,造成一個新的數組
• filter: 對數組中的每一項進行邏輯判斷,將知足條件的項造成一個新的數組
• some: 判斷數組中是否包含符合規則的數據,只要有一個元素符合就返回true,不然返回false,終止遍歷的條件爲return true
• every: 判斷數組中是否全部數據都符合規則,只要有一個不知足就返回false,所有知足纔會返回true

五. String字符串的相關方法:

• charAt():經過索引找到對應的字符,不傳參數時默認爲0,取值範圍0-字符串的length-1,若是超出範圍,返回一個空空字符串
• charCodeAt():經過索引找到對應字符的Unicode編碼,不傳參默認爲0,取值範圍0-字符串length-1,若是超出範圍,返回一個NaN
• indexOf():經過字符去找對應的索引,找到字符首次出現的位置(從左往右),未找到時返回-1
• lastIndexOf():跟indexOf做用同樣,順序是從右向左查找,找不到時返回-1
• slice():截取字符串,不包含結束位置的字符,起始位置不能大於結束位置,不然返回一個空字符串,不傳參時返回整個字符串,返回值爲截取後的字符串.原字符串不變
• split():把字符串按分隔符分割成數組
• substring():截取字符串,參數必須爲正數,起始位置能夠大於結束位置,會自動把兩個位置調換
• substr(start,length): 截取指定起始位置和長度的字符串
• toLowerCase():把字符串轉成小寫
• toUpperCase():把字符串轉成全大寫
• trim(): 去掉字符串先後的全部空格

六. 閉包/閉包的優缺點

• 簡單來說:函數A中有一個函數B,函數B能夠訪問到函數A中的變量,那麼函數B就是閉包,就是有權訪問另外一個函數做用域中的變量

• 當函數執行時,會造成一個私有做用域,會保護裏面的私有變量不受外界的干擾,

• 優勢:

  • 避免全局變量污染
  • 能夠長久的在內存中保存一個私有變量(不被垃圾回收機制回收)
  • 安全性提升,使變量私有化(不會被隨意修改)

• 缺點:

  • 過多的使用閉包,可能致使內存泄漏(內存泄漏是指被分配的內存沒有被使用,可是也不能被垃圾回收機制回收的一種現象)

七. 面向對象和麪向過程

• 面向過程:指的是在開發過程當中專一於每一個功能的具體實現方式
• 面向對象:指的是在開發過程當中,分析大致步驟,找到每一個步驟能夠輔助咱們開發的對象(工具)進行操做

八. 面向對象的三個特徵

• 封裝-->根據功能性,將多個用於相同操做的功能封裝到一個對象中(例如內置的Math)
• 繼承-->讓功能更好的複用
• 多態-->讓功能使用的靈活性加強

九. 對象的建立方式

• 對象字面量{}
• 構造函數建立方式new Object()
• 自定義構造函數

十. prototype屬性,原型鏈

• 函數自帶的屬性--原型

• 做用:用於保存構造函數中公用方法值

• 使用方式: 將構造函數中的方法設置給prototype便可,全部經過當前構造函數建立的對象均可以使用prototype中的方法

• 三者關係

  • 實例對象:都具備__proto__,就是原型對象
  • 原型對象:都具備constructor屬性,就是構造函數
  • 構造函數:都具備prototype屬性,就是原型對象

• 原型鏈:

  • 當訪問一個對象的某個屬性時,會先在這個對象自己屬性上查找,若是沒找到,則會去他的__proto__隱式原型上查找,既他的構造函數的prototype,若是沒找到就會再在構造函數的prototype的__proto__中查找,一層一層的向上查找就會造成一個鏈式結構,稱爲原型鏈.

十一. call/apply/bind不一樣點

• 共同點:

  • call和apply均可以調用函數
  • call和apply的參數1均可以設置本次調用中this的值

• 區別:

  • 實參傳入方式不一樣: call是在參數1後,設置多個參數做爲實參,數據形式不限 apply是在參數2設置數組,數組中的每一個元素爲實參

• bind設置的全部參數均爲永久設置,沒法修改(call,apply都不行)

  • bind方法的參數1,用於設置某個函數內的this
  • bind方法的後續參數,用於設置實參
  • bind方法的返回值爲當前函數

十二. 遞歸

• 在函數中調用自身的形式,稱爲遞歸函數

• 可能出現的問題: 用多了可能出現死循環的狀況

  • 解決方式: 給遞歸限制執行次數,根據規律設置遞歸的結束條件

十三. 正則表達式

• 匹配,替換,提取功能

• 正則匹配方式:test()參數爲要匹配的字符串,返回值true表示匹配成功(字符串知足正則的規則)false表示是匹配失敗

• 正則替換操做:replace()參數1爲要替換的內容,參數2爲替換的目標值

• 正則提取操做:

  • 字符串方法match()參數爲正則表達式,返回值爲數組形式,包含提取的內容
  • 正則方法exec()參數爲要提取內容的字符串,返回值爲數組,特性:經過同一個正則對字符串進行屢次提取操做,內容會進行累計

十四. BOM

• window中的經常使用屬性

  • window.document 也是DOM的頂級對象,用於操做瀏覽器中的頁面功能
  • window.console 用於操做瀏覽器中的控制檯功能
  • window.location 用於操做瀏覽器中的地址欄相關功能
  • window.history 用於操做瀏覽器中的歷史記錄相關功能
  • window.navigator 用於操做瀏覽器與系統的一些相關信息

• window中的經常使用方法

  • window.alert(); -- 彈出提示框
  • window.confirm() ; ---彈出確認提示框
  • window.prompt(); -- 彈出一個提示框,容許用戶輸入內容
  • window.open(); 用於開啓新窗口
  • window.close(); 用於關閉指定窗口

• location對象 (地址欄相關功能)

  • location.href=''; 讓頁面跳轉
  • location.reload(); 讓頁面刷新
  • window.location.hash ; 哈希值#後面
  • window.location.host; 服務器名+端口號
  • window.location.hostname; 服務器名
  • window.location.port; 端口
  • window.location.pathname; 路徑名
  • window.location.protocol; 協議
  • window.location.search; 參數

十五. DOM

• 事件三個階段

  • 事件冒泡
  • 事件委託
  • 事件捕獲

• 阻止事件冒泡

  • stopPropagation()
  • e.cancelBubble = true //兼容IE

• 阻止默認事件

  • e.preventDefault() 取消默認事件
  • return false //推薦使用

• 事件捕獲

  • addEventListener() // IE9如下不支持

十六. 常見的元素操做(對DOM元素的增刪改查)

• 建立節點的方法:document.createElement().
• 添加:appendChild(),insertBefore(),innerText(),innerHTML()
• 替換:replaceChild()
• 刪除:removeChild()

十七. 如何獲取頁面元素位置?鼠標位置?滾動條的捲曲值?

• 元素位置:offsetLeft(),offsetTop()
• 鼠標位置:offsetWidth(),offsetHeight()
• 捲曲值:scrollTop(),scrollLeft()

十八. async和await的理解:

• 執行異步操做的時候可以以同步的方式寫異步的方法,async定義在函數的前面,函數執行後返回一個promise,await後面只能跟一個promise函數.

十九. 事件冒泡和事件捕獲?

• 事件冒泡: 當時使用事件冒泡時,子級元素先觸發,父級元素後觸發
• 事件捕獲: 當你使用事件捕獲時,父級元素先觸發,子級元素後觸發

二十. 實現繼承有哪些方式?

• 原型繼承
• 構造函數繼承
• 組合式繼承
• 寄生組合式繼承
• ES6中的class

二十一. 變量提高如何理解?

• js中,函數及變量的聲明都將被提高到函數的最頂部
• js中,變量能夠先使用再聲明
• js中只用聲明的變量會提高,初始化的不會

二十二. 宏任務和微任務(微任務要優先於宏任務執行)

• 宏任務: 進入瀏覽器事件隊列的任務
  • 定時器
  • 事件函數
  • ajax的回調函數
• 微任務: 不進入瀏覽器事件隊列,而是經過js方式模擬出本身的隊列
  • Promise的相關回調: then/catch/finally
  • Object.observe()
  • MutationObserve監控DOM的變化