new 關鍵字都做了什么 this指向問題

1.創(chuàng)建一個簡單的空對象
2.原型的綁定，確定對象O的原型鏈
3.綁定this對象為O，傳入?yún)?shù)；執(zhí)行Person構(gòu)造函數(shù)，進行屬性和方法的賦值操作
4.返回結(jié)果
普通函數(shù)的this指向
函數(shù)的this指向有一個基本的原則，誰調(diào)用的函數(shù)，函數(shù)的this就指向誰，否則指向全局
箭頭函數(shù)的this指向
箭頭函數(shù)本身沒有this，箭頭函數(shù)的this是定義箭頭函數(shù)時父級作用域的this，也就是說使用箭頭函數(shù)的時候，箭頭函數(shù)內(nèi)部的this，我們只需要看檔箭頭函數(shù)定義時，該箭頭函數(shù)的父級的this即可
構(gòu)造函數(shù)指向new出來的新對象

JS事件流

DOM事件流是有兩種的，一種是捕獲事件一種是冒泡事件
事件捕獲（event capturing）：由微軟公司提出，事件從文檔根節(jié)點(Document對象）流向目標節(jié)點，途中會經(jīng)過目標節(jié)點的各個父級節(jié)點，并在這些節(jié)點上觸發(fā)捕獲事件，直至到達文檔根節(jié)點。（下圖點擊的粉色方塊）

事件冒泡（event bubbling）：由網(wǎng)景公司提出，與捕獲時間相反，世界會從目標節(jié)點流向文檔的根元素節(jié)點，途中會經(jīng)過目標節(jié)點的各個父級節(jié)點，并在這些節(jié)點上觸發(fā)捕獲事件，直至到達文檔的根節(jié)點。整個過程就像水中的奇葩一樣，從水底向上運動。（下圖點擊的淺粉色方塊）

W3C為了統(tǒng)一標準，采用了折中的方式，即將事件捕獲與事件冒泡合并，也就是現(xiàn)在的先捕獲后冒泡。

怎么阻止事件冒泡
1.w3c: event.stopPropagation()
2.IE: window.event.cancelBubble = true
3.vue （擴展）事件修飾符stop

** 怎么阻止默認事件**
event.preventDefault()

什么是事件委托
使用事件冒泡原理，自己所觸發(fā)的事件，讓其父元素代為執(zhí)行
例如：富文本解析在不改變富文本內(nèi)容的情況下給圖片實現(xiàn)點擊放大預覽效果 可以把事件給到解析富文本的那個盒子 然后通過event 去判斷點擊是不是圖片 再進行下面的事件處理

防抖節(jié)流函數(shù)

函數(shù)防抖：規(guī)定渙散至少間隔多久執(zhí)行（窗口大小的變化，模糊查詢）
函數(shù)節(jié)流 ：規(guī)定函數(shù)在某時間段內(nèi)最多執(zhí)行一次（典型案例就是鼠標不斷點擊觸發(fā)，規(guī)定在n秒內(nèi)多次點擊只有一次生效，用戶登錄等場景）

函數(shù)防抖和函數(shù)節(jié)流的對比：
不管是函數(shù)節(jié)流還是函數(shù)防抖，減少都是事件處理程序的調(diào)用頻率，而不是時間的調(diào)用頻率。

何時使用函數(shù)防抖，何時使用函數(shù)節(jié)流
當我們只需要處理最后一次觸發(fā)的事件時，用函數(shù)防抖。
當事件觸發(fā)過于頻繁，我們需要限制事件處理程序的調(diào)用頻率，用函數(shù)節(jié)流

用vue寫函數(shù)防抖節(jié)流指令文章來源地址http://www.zghlxwxcb.cn/news/detail-824522.html

export default {
    install(Vue, Options) {
        /*
         *  防抖，規(guī)定時間內(nèi)（默認300毫秒）最后一次點擊有效。
         *  @param {?Number|300} time - 間隔時間，毫秒
         *  @param {Function} fn - 執(zhí)行函數(shù)
         *  @param {?String|"click"} event - 事件類型 例："click"
         *  @param {Array} binding.value - [fn,event,time]
         *  例：<el-button v-debounce="[resetData,`click`,300]">刷新</el-button>
         *  也可簡寫成：<el-button v-debounce="[resetData]">刷新</el-button>
         */
        // 注冊一個全局自定義指令 `v-debounce`
        Vue.directive('debounce', {
            // 當被綁定的元素插入到 DOM 中時……
            inserted: function (el, binding) {
                //binding.value，使用自定義指令v-debounce時填寫的參數(shù)
                //解構(gòu)賦值，定義了3個變量，將參數(shù)（數(shù)組）按順序進行賦值
                let [fn, event = "click", time = 300] = binding.value
                let timer
                el.addEventListener(event, () => {
                    //默認監(jiān)聽的事件為click
                    //判斷計時器是否存在，存在則清除計時器。重新創(chuàng)建計時器，到時間后執(zhí)行函數(shù)fn
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => fn(), time)
                })
            }
        })

        /*
         *  節(jié)流，規(guī)定時間內(nèi)可點擊一次（第一次點擊有效）。
         *  @param {?Number|300} time - 間隔時間，毫秒
         *  @param {Function} fn - 執(zhí)行函數(shù)
         *  @param {?String|"click"} event - 事件類型 例："click"
         *  @param {Array} binding.value - [fn,event,time]
         *  例：<el-button v-throttle="[resetData,`click`,300]">刷新</el-button>
         *  傳遞參數(shù)則：<el-button v-throttle="[()=>resetData(param),`click`,300]">刷新</el-button>
         */
        // 注冊一個全局自定義指令 `v-throttle`
        Vue.directive('throttle', {
            // 當被綁定的元素插入到 DOM 中時……
            inserted: function (el, binding) {
                //binding.value，使用自定義指令v-throttle時填寫的參數(shù)
                //解構(gòu)賦值，定義了3個變量，將參數(shù)（數(shù)組）按順序進行賦值
                let [fn, event = "click", time = 300] = binding.value
                let timer = null;
                el.addEventListener(event, () => {
                    //默認監(jiān)聽的事件為click
                    //判斷計時器是否存在，不存在則執(zhí)行函數(shù)fn，創(chuàng)建計時器
                    if (timer == null) {
                        fn();
                        timer = setTimeout(() => timer = null, time)
                    }
                })
            }
        })

        /*
         *  節(jié)流方案二，通過禁用html標簽，規(guī)定時間內(nèi)可點擊一次（第一次點擊有效）。
         *  應用在封裝的組件中可能無效。
         *  @param {?String|"click"} event - 事件類型 例："click"
         *  @param {?Number|2000} time - 間隔時間，毫秒
         *  @param {Array} binding.value - [event,time]
         *  例：<button v-throttle-disabled="[]">測試按鈕</button>
         */
        //注冊一個全局自定義指令 `v-throttle-disabled`
        Vue.directive('throttle-disabled', {
            // 當被綁定的元素插入到 DOM 中時……
            inserted(el, binding) {
                let [event = "click", time = 2 * 1000] = binding.value
                el.addEventListener(event, () => {
                    //默認監(jiān)聽click事件
                    //當 dom元素el 非禁用狀態(tài)時 將其設置為禁用狀態(tài)，同時設置計時器，規(guī)定時間后（默認2秒）啟用。
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, time)
                    }
                })
            }
        })
    }
}

到了這里，關于前端面試題-js-new關鍵字-this指向-js事件流-防抖節(jié)流的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！