在前端學(xué)習(xí)道路上，容易混淆的幾個知識點！

async與defer

async: 可選屬性。表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效（寫在html文件中的js代碼，添加此屬性無效，仍按代碼加載順序執(zhí)行）。

defer: 可選屬性。標(biāo)識腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對外部腳本文件有效。

script標(biāo)簽屬性async與defer之間的區(qū)別：藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。
偽元素與偽類

偽元素： 是一個附加至選擇器末的關(guān)鍵詞，允許你對被選擇元素的特定部分修改樣式。例如::before，::after，::first-letter等。它是創(chuàng)造出一個并不存在的“元素”內(nèi)容，并附加樣式。

偽類： 沒有創(chuàng)造元素內(nèi)容，只是選中某些狀態(tài)下的已有元素，并附加樣式。比如:first-child，:active，:focus等等。
防抖與節(jié)流

函數(shù)防抖： 當(dāng)持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。

function debounce(handle, delay) {
    var timer = null;
    return function () {
        var _self = this,
            _args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            handle.apply(_self, _args)
        }, delay)
    }
}

 

函數(shù)節(jié)流： 當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。

function throttle(handler, wait) {
    var lastTime = 0;
    return function (e) {
        var nowTime = new Date().getTime();
        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }
    }
}

 

call、apply、bind

為了改變方法內(nèi)部this的指向，第一個參數(shù)為this的指向，其余參數(shù)是一個普通的參數(shù)列表。

call： 第一個參數(shù)為this的指向，其余參數(shù)就是一個普通的參數(shù)列表。

apply： 第一個參數(shù)為this的指向，其余參數(shù)接受一個數(shù)組類型的參數(shù)。

bind： 第一個參數(shù)為this的指向，其余參數(shù)就是一個普通的參數(shù)列表。但是返回是函數(shù)。

當(dāng)然，三者的參數(shù)不限定是 string 類型，允許是各種類型，包括函數(shù) 、 object 等等！
cookie、localStorage、sessionStorage



prototype與__proto__

__proto__是每個對象都有的一個屬性，而prototype是函數(shù)才會有的屬性。

__proto__指向的是當(dāng)前對象的原型對象，而prototype指向的，是以當(dāng)前函數(shù)作為構(gòu)造函數(shù)構(gòu)造出來的對象的原型對象。

①只要創(chuàng)建了一個函數(shù)，該函數(shù)的原型對象也隨之同時被創(chuàng)建出來，原型對象中的屬性和方法被經(jīng)由其相對應(yīng)的構(gòu)造函數(shù)所創(chuàng)建的實例所共享。

②每個函數(shù)在創(chuàng)建之后都會獲得一個prototype的屬性，這個屬性指向該函數(shù)的原型對象。

③每個對象的__proto__屬性都指向其構(gòu)造函數(shù)的原型。

function Fun() {}
var f = new Fun();
console.log(f.__proto__ === Fun.prototype); // true
console.log(f.__proto__.__proto__);
console.log(Fun.__proto__.__proto__);
console.log(Fun.__proto__.__proto__ === f.__proto__.__proto__); // true
console.log(f.prototype);
console.log(Fun.prototype);

function a() {}
console.log(a.prototype);
console.log(a instanceof Function) // true
console.log(a.__proto__ === Function.prototype) // true

 

        歡迎關(guān)注我的公眾號前端歷劫之路
        回復(fù)關(guān)鍵詞電子書，即可獲取12本前端熱門電子書。
        回復(fù)關(guān)鍵詞紅寶書第4版，即可獲取最新《JavaScript高級程序設(shè)計》（第四版）電子書。
        我創(chuàng)建了一個技術(shù)交流、文章分享群，群里有很多大廠的前端大佬，關(guān)注公眾號后，點擊下方菜單了解更多即可加我微信，期待你的加入。

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路