前端面試之JavaScript（總結）

1. JS基本的數據類型和引用類型

• 基本數據類型：number、string、null、undefined、boolean、symbol -- 棧
• 引用數據類型：object、array、function -- 堆
• 兩種數據類型存儲位置不一樣
• 原始數據類型是直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據；
• 引用數據類型存儲在堆(heap)中的對象，佔據空間大、大小不固定，若是存儲在棧中，將會影響程序運行的性能；
• 引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。
• 當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

2.介紹JS的內置對象

• 數據封裝類對象：Object、String、Number、Boolean、Array
• 其餘對象：Function、Data、Math、Arguments、RegExp、Error
• ES6新增對象：Promise、Proxy、Map、Set、Symbol、Reflect

3.說幾條JavaScript的基本規範

• 變量和函數在使用前聲明
• 語句結束後添加分號
• 代碼段使用{}包裹
• 以大寫字母開頭定義構造函數，以全大寫定義常量
• 用{} 和 []聲明對象和數組
• 使用===和!==來比較true和false或者數字值

4.eval是作什麼的

• 他的功能是把對應的字符串解析成JS代碼並運行；
• 他不安全，並且很是耗能（執行兩次，一次解析成JS代碼，一次執行）

5.對閉包的理解

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數裏建立另外一個函數，經過另外一個函數訪問這個函數的局部變量，利用閉包能夠突破做用域鏈，將函數內部的變量和方法傳遞到外部

閉包的特性：函數內嵌套函數；內部函數能夠引用外部的參數和變量；參數和變量不會被垃圾回收機制回收

6.http狀態碼有哪些

簡單版

100  Continue   繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
  200  OK         正常返回信息
  201  Created    請求成功而且服務器建立了新的資源
  202  Accepted   服務器已接受請求，但還沒有處理
  301  Moved Permanently  請求的網頁已永久移動到新位置。
  302 Found       臨時性重定向。
  303 See Other   臨時性重定向，且老是使用 GET 請求新的 URI。
  304  Not Modified 自從上次請求後，請求的網頁未修改過。

  400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
  401 Unauthorized 請求未受權。
  403 Forbidden   禁止訪問。
  404 Not Found   找不到如何與 URI 相匹配的資源。

  500 Internal Server Error  最多見的服務器端錯誤。
  503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

完整版

1**(信息類)：表示接收到請求而且繼續處理
    100——客戶必須繼續發出請求
    101——客戶要求服務器根據請求轉換HTTP協議版本

  2**(響應成功)：表示動做被成功接收、理解和接受
    200——代表該請求被成功地完成，所請求的資源發送回客戶端
    201——提示知道新文件的URL
    202——接受和處理、但處理未完成
    203——返回信息不肯定或不完整
    204——請求收到，但返回信息爲空
    205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
    206——服務器已經完成了部分用戶的GET請求

  3**(重定向類)：爲了完成指定的動做，必須接受進一步處理
    300——請求的資源可在多處獲得
    301——本網頁被永久性轉移到另外一個URL
    302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續經過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
    303——建議客戶訪問其餘URL或訪問方式
    304——自從上次請求後，請求的網頁未修改過，服務器返回此響應時，不會返回網頁內容，表明上次的文檔已經被緩存了，還能夠繼續使用
    305——請求的資源必須從服務器指定的地址獲得
    306——前一版本HTTP中使用的代碼，現行版本中再也不使用
    307——申明請求的資源臨時性刪除

  4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
    400——客戶端請求有語法錯誤，不能被服務器所理解
    401——請求未經受權，這個狀態代碼必須和WWW-Authenticate報頭域一塊兒使用
    402——保留有效ChargeTo頭響應
    403——禁止訪問，服務器收到請求，可是拒絕提供服務
    404——一個404錯誤代表可鏈接服務器，但服務器沒法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
    405——用戶在Request-Line字段定義的方法不容許
    406——根據用戶發送的Accept拖，請求資源不可訪問
    407——相似401，用戶必須首先在代理服務器上獲得受權
    408——客戶端沒有在用戶指定的餓時間內完成請求
    409——對當前資源狀態，請求不能完成
    410——服務器上再也不有此資源且無進一步的參考地址
    411——服務器拒絕用戶定義的Content-Length屬性請求
    412——一個或多個請求頭字段在當前請求中錯誤
    413——請求的資源大於服務器容許的大小
    414——請求的資源URL長於服務器容許的長度
    415——請求資源不支持請求項目格式
    416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
    417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求長。

  5**(服務端錯誤類)：服務器不能正確執行一個正確的請求
    500 - 服務器遇到錯誤，沒法完成請求
    502 - 網關錯誤
    503：因爲超載或停機維護，服務器目前沒法使用，一段時間後可能恢復正常

7.描述瀏覽器渲染的過程，DOM書和渲染樹的區別

瀏覽器渲染過程：

• 解析HTML構建DOM，並行請求css、image、js
• css文件下載完成，開始構建CSSOM（CSS樹）
• CSSOM構建結束後，和DOM一塊兒生成Render Tree（渲染樹）
• 佈局（layout）：計算出每一個節點在屏幕中的位置
• 顯示：經過顯卡把頁面畫到屏幕上

DOM樹和渲染樹的區別

• DOM樹與HTML標籤一一對應，包括head和隱藏元素
• 渲染樹不包括head和隱藏元素，大段文本的每個行都是獨立節點，每個獨立節點都有對應的css屬性

8.如何最小化重繪（repaint）和迴流（reflow）

• 須要建立多個DOM節點時，使用DocumentFragment建立完成後一次性的加入document
• 緩存layout屬性值，減小回流次數，如const offsetLeft=element.offsetLeft
• 儘可能避免使用table佈局（table元素一旦觸發迴流就會致使table裏全部的其餘元素迴流）
• 避免使用css表達式，由於每次調用都會從新計算值（也會從新加載頁面）
• 儘可能使用css屬性簡寫
• 將屢次修改元素樣式合併成一次操做

9.介紹JavaScript的原型、原型鏈？有啥特色

原型：

• JavaScript的全部對象中都包含了一個 (__proto__ ) 內部屬性，這個屬性所對應的就是該對象的原型
• JavaScript的函數對象，除了原型 (__proto__) 以外，還預置了 prototype 屬性
• 當函數對象做爲構造函數建立實例時，該 prototype 屬性值將被做爲實例對象的原型( __proto__)。

原型鏈：

• 當一個對象調用的屬性/方法自身不存在時，就會去本身(__proto__ )關聯的前輩 prototype 對象上去找
• 若是沒找到，就會去該 prototype 原型 ( __proto__) 關聯的前輩 prototype 去找。依次類推，直到找到屬性/方法或 undefined 爲止。從而造成了所謂的「原型鏈」

原型特色：

• JavaScript對象是經過引用來傳遞的，當修改原型時，與之相關的對象也會繼承這一改變

10.JavaScript如何實現繼承

構造函數綁定：使用 call 或 apply 方法，將父對象的構造函數綁定在子對象上

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6使用extends繼承

class Apple extends Fruit{
    constructor() {
        super()
    }
}

實例繼承：將子對象的prototype指向父對象的一個實例

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型繼承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

拷貝繼承：若是把父對象的全部屬性和方法，拷貝進子對象

function extend(Child, Parent) {
  　　var p = Parent.prototype;
  　　var c = Child.prototype;
  　　for (var i in p) {
  　　　   c[i] = p[i];
  　　}
}

11.什麼是window對象，什麼是Document對象

• Window 對象表示當前瀏覽器的窗口，是JavaScript的頂級對象。
• 咱們建立的全部對象、函數、變量都是 Window 對象的成員。
• Window 對象的方法和屬性是在全局範圍內有效的。
• Document 對象是 HTML 文檔的根節點與全部其餘節點（元素節點，文本節點，屬性節點, 註釋節點）
• Document 對象使咱們能夠經過腳本對 HTML 頁面中的全部元素進行訪問
• Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問

12. 在一個DOM上同時綁定兩個點擊事件：一個用捕獲，一個用冒泡。事件會執行幾回，先執行冒泡仍是捕獲？

• 該DOM上的事件若是被觸發，會執行兩次（執行次數等於綁定次數）
• 若是該DOM是目標元素，則按事件綁定順序執行，不區分冒泡/捕獲
• 若是該DOM是處於事件流中的非目標元素，則先執行捕獲，後執行冒泡

13. 事件的代理/委託

• 事件委託是指將事件綁定目標元素的到父元素上，利用冒泡機制觸發該事件

優勢：

• 能夠減小事件註冊，節省大量內存佔用
• 能夠將事件應用於動態添加的子元素上

缺點：

• 使用不當會形成事件在不該該觸發時觸發

14. 編寫一個方法 求一個字符串的字節長度

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

15. 列舉一下JavaScript數組和對象有哪些原生方法？

數組：

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

對象：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);