daily-question-03（前端每日一題03）
- 2019 年 11 月 5 日
- 筆記
在這裡記錄著每天自己遇到的一道印象深刻的前端問題，以及一道生活中隨處可見的小問題。
強迫自己形成積累的習慣，鞭撻自己不斷前行，共同學習。
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` 為止。 “`js 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(); 複製程式碼- 創建一個對象
const obj = {} - 設置新對象的 constructor 屬性為構造函數的名稱，設置新對象的proto屬性指向構造函數的 prototype 對象
obj.constructor = Test; obj.__proto__ = Test.prototype;
- 使用新對象調用函數，函數中的 this 被指向新實例對象
Test.call(obj) - 將初始化完畢的新對象地址，保存到等號左邊的變數中
- 創建一個對象
-
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 複製程式碼
