daily-question-03（前端每日一題03）

在這裏記錄着每天自己遇到的一道印象深刻的前端問題，以及一道生活中隨處可見的小問題。

強迫自己形成積累的習慣，鞭撻自己不斷前行，共同學習。

Github 地址

2019/04/29 - 2019/05/05

• ES6 class 構造以及繼承的底層實現原理

  《ES6 類以及繼承的實現原理》

• 手動實現一個 new ?

  function myNew(Obj, ...args) {
    var obj = Object.create(Obj.prototype); //使用指定的原型對象及其屬性去創建一個新的對象
    Obj.apply(obj, args); // 綁定 this 到obj, 設置 obj 的屬性
    return obj; // 返回實例
  }

• 手動實現一個 instanceof?

  instanceof 其原理就是判斷實例對象的 __proto__ 是不是強等於對象的prototype 屬性，如果不是繼續往原型鏈上找，直到 __proto__ 爲 null 爲止。

  function instanceOf(obj, object) {//obj 表示實例對象，object 表示對象
    var O = object.prototype;
    obj = obj.__proto__;
    while (true) { 
        if (obj === null) 
            return false; 
        if (O === obj) // 這裏重點：當 O 嚴格等於 obj 時，返回 true 
            return true; 
        obj = obj.__proto__; 
    } 
  }

• == 的類型轉化規則

  [] == false // true
  
  {} == false  // false

  1，null 和 undefined，相等。

  2，數字和字符串，轉化爲數字再比較。

  3，如果有 true 或 false，轉換爲 1 或 0，再比較。

  4，如果有引用類型，優先調用 valueOf。

  5，其餘都不相等。

• DOM 和 BOM 有什麼區別 ?

  • DOM
    Document Object Model，文檔對象模型

    DOM 是爲了操作文檔出現的 API，document 是其的一個對象

    DOM 和文檔有關，這裏的文檔指的是網頁，也就是 html 文檔。DOM 和瀏覽器無關，他關注的是網頁本身的內容。

  • BOM
    Browser Object Model，瀏覽器對象模型

    BOM 是爲了操作瀏覽器出現的 API，window 是其的一個對象

    window 對象既爲 javascript 訪問瀏覽器提供 API，同時在 ECMAScript 中充當 Global 對象

• doctype有什麼用?

  doctype 是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什麼樣的文檔類型定義（DTD）來解析文檔。

  聲明是用來指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。 聲明必須是 HTML 文檔的第一行，位於 html 標籤之前。
  瀏覽器本身分爲兩種模式，一種是標準模式，一種是怪異模式，瀏覽器通過 doctype 來區分這兩種模式，doctype 在 html 中的作用就是觸發瀏覽器的標準模式，如果 html 中省略了 doctype，瀏覽器就會進入到 Quirks 模式的怪異狀態，在這種模式下，有些樣式會和標準模式存在差異，而 html 標準和 dom 標準值規定了標準模式下的行爲，沒有對怪異模式做出規定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在 html 開頭使用 doctype。

• 箭頭函數和普通函數有什麼區別?

  • 函數體內的 this 對象，就是定義時所在的對象，而不是使用時所在的對象，用 call apply bind 也不能改變 this 指向
  • 不可以當作構造函數，也就是說，不可以使用 new 命令，否則會拋出一個錯誤。
  • 不可以使用 arguments 對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。
  • 不可以使用 yield 命令，因此箭頭函數不能用作 Generator 函數。
  • 箭頭函數沒有原型對象 prototype

2019/04/22 - 2019/04/28

• new 一個對象經歷了什麼

  function Test() {}
  const test = new Test();

  1. 創建一個對象 const obj = {}
  2. 設置新對象的 constructor 屬性爲構造函數的名稱，設置新對象的proto屬性指向構造函數的 prototype 對象

  obj.constructor = Test;
  obj.__proto__ = Test.prototype;

  1. 使用新對象調用函數，函數中的 this 被指向新實例對象 Test.call(obj)
  2. 將初始化完畢的新對象地址，保存到等號左邊的變量中
• event.target 和 event.currentTarget 區別

  event.target 返回觸發事件的元素, event.currentTarget 返回綁定事件的元素

• Vue <transition> 的類名詳解？

  在進入/離開的過渡中，會有 6 個 class 切換。

  v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

  v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。

  v-enter-to: 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

  v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

  v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。

  v-leave-to: 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

• 監聽頁面關閉或者刷新事件？

  頁面加載時只執行 onload 事件。

  頁面關閉時，先 onbeforeunload 事件，再 onunload 事件。

  頁面刷新時先執行 onbeforeunload 事件，然後 onunload 事件，最後 onload 事件。

  因此監聽 onbeforeunload 事件，如下：

  window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
  window.removeEventListener('beforeunload', e => this.beforeunloadFn(e));

• 如何實現點擊按鈕下載文件？

  這個時候就需要給 a 標籤添加一個屬性“download”，如：

  <a
    href="https://github.com/zxpsuper/Demo/archive/master.zip"
    download="master.zip"
    >點擊下載</a
  >

• 立即執行函數 ？

  立即執行函數（IIFE）常用於第三方庫，好處在於隔離作用域，任何一個第三方庫都會存在大量的變量和函數，爲了避免變量污染（命名衝突），開發者們想到的解決辦法就是使用立即執行函數。

  通過定義一個匿名函數，創建了一個新的函數作用域，相當於創建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞污染全局的命名空間。此時若是想訪問全局對象，將全局對象以參數形式傳進去即可

  (function() {})();

• 函數柯里化的理解？

  在數學和計算機科學中，柯里化是一種將使用多個參數的一個函數轉換成一系列使用一個參數的函數的技術。

  那究竟柯里化有什麼作用呢？常見的作用是：參數複用、延遲運行、扁平化

  函數柯里化（curry）的定義很簡單：傳遞給函數一部分參數來調用它，讓它返回一個函數去處理剩下的參數。

  比如對於加法函數 var add = (x, y) => x + y ，我們可以這樣進行柯里化：

  //比較容易讀懂的ES5寫法
  var add = function(x) {
    return function(y) {
      return x + y;
    };
  };
  
  //ES6寫法，也是比較正統的函數式寫法
  var add = x => y => x + y;
  
  //試試看
  var add2 = add(2);
  var add200 = add(200);
  
  add2(2); // =>4
  add200(50); // =>250