1. 程式人生 > >前端面試知識點大全——JS篇(二)

前端面試知識點大全——JS篇(二)

目錄

1.1 閉包

1.6 小結

5.1 區別

9.1 作用

9.2 使用

9.6 優點

9.7 缺點

10.跨域

1.閉包 與 作用域、作用域鏈、執行環境

1.1 閉包

《JS高程》定義:有權訪問另一個函式作用域內變數的函式都是閉包。通俗說法,可以訪問其他函式內部變數的函式。

閉包的作用:

1、函式柯里化的核心

2、匿名自執行函式(可以訪問全域性物件,同時有不會汙染全域性)

3、快取結果(父函式的變數不會釋放)

4、程式碼封裝

5、實現類和繼承

閉包的缺點:

(1)由於閉包會使得函式中的變數都被儲存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的效能問題,在IE中可能導致記憶體洩露。解決方法是,在退出函式之前,將不使用的區域性變數全部刪除。

(2)閉包會在父函式外部,改變父函式內部變數的值。所以,如果你把父函式當作物件(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函式內部變數的值。

1.2 執行環境(執行上下文)

《JS高程》中的解釋是:執行環境定義了變數或者函式有權訪問的其他資料,決定了他們各自的行為。每個執行環境都至少有一個與之關聯的變數物件,環境中定義的所有變數和函式都儲存在這個物件中。

通俗的說,所謂的執行環境,可以看做程式碼當前執行的環境。

全域性執行環境(上下文)是最外圍的一個執行環境。在web瀏覽器中,全域性執行環境指的是window物件,因此所有全域性變數和函式都是作為window物件的屬性和方法建立的。

某個執行環境的所有程式碼執行完畢後,該環境被銷燬,儲存在其中的所有變數和函式定義也隨之銷燬。全域性執行環境直到應用程式退出(例如關閉網頁或瀏覽器)時才會被銷燬。

執行環境會隨著函式的呼叫和返回,不斷的重建和銷燬。但變數物件在有變數引用(如閉包)的情況下,將留在記憶體中不被銷燬。整個變數物件不銷燬,而不是某個變數不銷燬。

三類執行環境(上下文):

1、全域性級別的程式碼 – 這個是預設的程式碼執行環境,一旦程式碼被載入,js引擎最先進入的就是這個環境

2、函式級別的程式碼 – 當執行一個函式時,執行函式體中的程式碼

3、Eval的程式碼 – 在Eval函式內執行的程式碼(這個不常使用,也不推薦使用,故不作了解)

PS:不管什麼情況下,只存在一個全域性的上下文,該上下文能被任何其它的上下文所訪問到。函式上下文的個數是沒有任何限制的,每到呼叫執行一個函式時,js 引擎就會自動新建出一個函式上下文。在外部的上下文中是無法直接訪問到其內部上下文裡的變數的,但是內部上下文可以訪問到外部上下文中的的變數。

存在一個執行環境棧,全域性執行環境肯定是在最底部。當執行流進入一個函式時,函式的環境就會被推入一個環境棧中。在函式執行之後,棧將其環境彈出,把控制權返回給之前的執行環境。

1.3 作用域

ES5只有函式作用域和全域性作用域,沒有塊級作用域,ES6引入let和const,有了塊級作用域。一段程式程式碼中所用到的名字並不總是有效/可用的,而限定這個名字的可用性的程式碼範圍就是這個名字的作用域。其本身是一套規則,用於確定在何處以及如何查詢識別符號,規定了函式和變數可使用的位置

1.4 作用域鏈

《JS高程》:作用域鏈本質上是一個指向變數物件的指標列表,它只引用但不實際包含變數物件。

保證對執行環境有權訪問的所有變數和函式的有序訪問。每個函式都有一個執行環境,定義了變數或函式有權訪問的其他資料,與之關聯的就是一個變數物件,這個物件中包含了當前函式可訪問的變數及函式。當代碼在執行環境中執行時,就形成了作用域鏈。而作用域鏈就是指向這些變數物件的一個指標列表,他的最前端指向的就是當前執行環境的變數物件,最後面指向window全域性執行環境的變數物件。

作用域鏈的延長:with會將物件繫結到作用域鏈的頂端,try...catch語句中的catch捕獲到的物件會被放到作用域頂端,離開的時候會自動銷燬。

作用域的作用:使用作用域鏈主要是進行識別符號的查詢,識別符號解析就是沿著作用域鏈一級一級地搜尋識別符號的過程,而作用域鏈就是要保證對變數和函式的有序訪問

1.5 LHS(left-hand side)和RHS(right-hand side)查詢

在引擎執行的第一步操作中,對變數a進行了查詢,這種查詢叫做LHS查詢。實際上,引擎查詢共分為兩種:LHS查詢和RHS查詢 。

從字面意思去理解,當變量出現在賦值操作的左側時進行LHS查詢,出現在右側時進行RHS查詢。

更準確地講,RHS查詢與簡單地查詢某個變數的值沒什麼區別,而LHS查詢則是試圖找到變數的容器本身,從而可以對其賦值。

1.6 小結

1、執行環境有全域性執行環境(也稱為全域性環境)和函式執行環境之分

2、每次進入一個新執行環境,都會建立一個用於搜尋變數和函式的作用域鏈

3、函式的區域性環境不僅有權訪問函式作用域中的變數,而且有權訪問其包含(父)環境,乃至全域性環境,沿作用域鏈向外訪問變數

4、全域性環境只能訪問在全域性環境中定義的變數和函式,而不能直接訪問區域性環境中的任何資料

5、變數的執行環境有助於確定應該合適釋放記憶體

【1】javascript使用的是詞法作用域。對於函式來說,詞法作用域是在函式定義時就已經確定了,與函式是否被呼叫無關。通過作用域,可以知道作用域範圍內的變數和函式有哪些,卻不知道變數的值是什麼。所以作用域是靜態的

【2】對於函式來說,執行環境是在函式呼叫時確定的,執行環境包含作用域內所有變數和函式的值。在同一作用域下,不同的呼叫(如傳遞不同的引數)會產生不同的執行環境,從而產生不同的變數的值。所以執行環境是動態的

2.匿名函式

在js中分為匿名函式和命名函式,匿名函式常配合閉包和IIFE使用,用於減少全域性變數的汙染。也可以用變數繫結匿名函式,這樣變數就會指向匿名函式。

有一種特殊情況 const func = function bar(){};

這種情況下外部使用bar()會是未定義,bar主要用於函式內部使用,比如遞迴。

3.你是如何組織自己的程式碼?是使用模組模式,還是使用經典繼承的方法?

內部一些模組或者元件使用模組的方式,外部呼叫和正常使用時使用繼承的方式。

4.請指出以下程式碼的區別:function Person(){}、var person = Person()、var person = new Person()?

第一個是宣告定義一個Person函式

第二個是直接呼叫Person()函式,並將返回值賦值給變數person

第三個是建立了一個Person例項物件

5.apply call bind

5.1 區別

1、apply 、 call 、bind 三者都是用來改變函式的this物件的指向的;

2、apply 、 call 、bind 三者第一個引數都是this要指向的物件,也就是想指定的上下文;

3、apply 、 call 、bind 三者都可以利用後續引數傳參,call和bind一個一個寫,apply傳入陣列;

4、bind 是返回對應函式,便於稍後呼叫;apply 、call 則是立即呼叫 。

5.2 實現原理

apply 和call 是返回執行後的結果,所以在要繫結物件的物件內繫結一個函式執行即可。引數使用arguments匯出一個數組將剩餘的引數傳入。

1. 將函式設為物件的屬性

2. 執行該函式

3. 刪除該函式

(注:arguments是一個類似陣列的東西,只有索引和長度。在不手動的情況下可以使用Array.prototype.slice.call(arguments);但是這裡是手動情況所以要一點點讀取匯出。)

bind 的話,對於執行上面使用eval直接運算函式。返回函式的時候使用一個閉包

5.3 手動實現

call和apply就是將函式加入到繫結的物件中,然後在這個物件中執行函式。

比如:bar.call(foo),將this繫結到foo物件上,執行bar方法,就相當於,

var foo = {
    value: 1,
    bar: function() {
        console.log(this.value);
    }
};
foo.bar();

call的模擬實現:

Function.prototype.myCall = function(context) {
    //call方法,第一項可以是null或者沒有,預設指向window
    var context = context || window;
    //獲取呼叫call的函式,用this獲取
    context.fn = this;
    //存放後面的陣列
    var args = [];
    //可以ES5的語法,args = Array.prototype.slice.call(arguments, 1);
    for(var i=1,len=arguments.length;i<len; i++) {
        //只有變成字串,在eval時才能轉成程式碼執行
        args.push('arguments['+ i +']');
    }

    //直接呼叫toString方法
    var result = eval('context.fn('+ args +')');
    delete context.fn;
    return result;
};

apply的模擬實現:

Function.prototype.myApply = function(context, argsArr) {
    //call方法,第一項可以是null或者沒有,預設指向window
    var context = context || window;
    //獲取呼叫call的函式,用this獲取呼叫方法的物件(這裡是函式呼叫的apply,所以this指向函式本身,函式也是物件)
    context.fn = this;
    var result;
    if (!argsArr) {
        result = context.fn();
    } else {
        var args = [];
        for(var i = 0, len = argsArr.length; i < len; i++) {
            args.push('argsArr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }
    delete context.fn
    return result;
};

bind的模擬實現:

bind() 方法會建立一個新函式。當這個新函式被呼叫時,bind() 的第一個引數將作為它執行時的 this之後的序列引數將會在傳遞的實參前傳入作為它的引數。

Function.prototype.myBind2 = function(context) {
    var aArgs = Array.prototype.slice.call(arguments, 1);
    var that = this;
    return function() {
        return that.apply(context, aArgs.concat(Array.prototype.slice.call(arguments)))
    }
}

6.new操作符

一個new操作符的內部行為,比如let func = new Func(params);

第一步:新建一個空物件,let obj=new Object();

第二步:為這個新建物件設定原型,繼承建構函式的原型 obj.__proto__ = Func.prototype;//有可能是基本型別

第三步:使用指定的引數呼叫建構函式 Foo ,並將 this 繫結到新建立的物件。let result = Func.call(obj,params); 執行建構函式並繫結this

第四步:判斷建構函式的返回型別,基本型別或無返回值就返回obj,是物件就返回result,即return typeof result === 'object' ? result : obj;

上述步驟具體等同於:

new Animal('cat') = {
    var obj = {};
    obj.__proto__ = Animal.prototype;
    var result = Animal.call(obj,"cat");
    return typeof result === 'object'? result : obj;
}

7.document.write() 與 innerHTML

document.write()用於寫入文件內容,可以傳入多個字串,寫入的字串會被HTML解析;返回undefined

注意事項:

1、如果document.write()在DOMContentLoaded或load事件的回撥函式中,當文件載入完成,則會先清空文件(自動呼叫document.open()),再把引數寫入body內容的開頭。也就是說原文件內容會被清除

2、在非同步引入的js和DOMContentLoaded或load事件的回撥函式中執行document.write(),執行完後,最好手動關閉文件寫入(document.close())。非同步引用外部js檔案,JS檔案中必須先執行document.open()清空文件,然後才能執行document.write(),引數寫在body內容的開頭。如果不先執行document.open(),直接執行document.write(),則無效。

document.write() 只能重新渲染繪製整個頁面

innerHTML 可以迴流頁面的一部分

8.特性檢測 特性推斷 UA字串嗅探

8.1 能力檢測(也稱為特性檢測)

能力檢測是識別瀏覽器的能力,只需要確定瀏覽器支援特定的能力,就能給出解決方案

通用方法檢測默寫方法和屬性是否可用或者存在,其次利用typeof進行能力檢測

8.2 怪癖檢測

也就是bug檢測,如果有bug就先修復

8.3 使用者代理檢測

navigator.useAgent屬性訪問,可以獲取使用者代理字串。這種方法優先順序最靠後,因為可以欺騙。

例如:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36

9.Ajax工作原理

9.1 作用

區域性重新整理頁面。就是能在不更新整個頁面的前提下維護資料。這使得Web應用程式更為迅捷地迴應使用者動作,並避免了在網路上傳送那些沒有改變過的資訊。

9.2 使用

const xhr = new XMLHttpRequest() //或者IE情況下使用ActiveXObject('Microsoft.XMLHttp')
xhr.open('POST','ajax.php',true);//預設就是async非同步
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("fname=suifeng&lname=nifeng");

//非同步
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200){
        document.getElementById("id").innerHTML = xhr.responseText;
    }
}

//同步
xhr.open('GET','ajax.txt',false);
xhr.send(null);
document.getElementById("id").innerHTML = xhr.responseText;

9.3 響應資料格式

responseText:獲得字串形式的響應資料(DOMString)

responseXML:獲得XML形式的響應資料(document)

9.4 state表示xhr的狀態

0:請求未初始化,尚未呼叫open()方法

1:伺服器連線已建立,已呼叫open(),尚未呼叫send()

2:請求已接收,已呼叫send(),尚未收到響應

3:請求處理中,已經接收部分響應資料

4:請求已完成,且響應已就緒。資料全部接收,可以使用

9.5 status表示http狀態碼

200:“ok”

204:無內容

301:(永久重定向)

302:(臨時重定向)

304:(未修改)伺服器資源未修改,http響應不會返回網頁內容

403:(禁止)伺服器拒絕請求

404:(未找到)伺服器找不到請求的資源

500:(伺服器內部錯誤)伺服器遇到錯誤,無法完成請求

502:(錯誤閘道器) 伺服器作為閘道器或代理,從上游伺服器收到無效響應。

503:(服務不可達)伺服器維護或者過載,無法發完成請求

504:(閘道器超時)伺服器作為閘道器或代理,但沒有及時從上游伺服器收到請求

9.6 優點

1、最大的一點是頁面無重新整理,使用者的體驗非常好。

2、使用非同步方式與伺服器通訊,具有更加迅速的響應能力。

3、可以把以前一些伺服器負擔的工作轉嫁到客戶端,利用客戶端閒置的能力來處理,減輕伺服器和頻寬的負擔,節約空間和寬頻租用成本。並且減輕伺服器的負擔,ajax的原則是“按需取資料”,可以最大程度的減少冗餘請求,和響應對伺服器造成的負擔。

4、基於標準化的並被廣泛支援的技術,不需要下載外掛或者小程式。

9.7 缺點

1、ajax不支援瀏覽器back按鈕。

2、安全問題 AJAX暴露了與伺服器互動的細節。

3、對搜尋引擎的支援比較弱。

4、破壞了程式的異常機制。

5、不容易除錯。

10.跨域

跨域請求:從一個域的網頁去請求另一個域的資源,實現不同的域之間進行資料傳輸或通訊。協議、域名、埠有任何一處不一樣都被視為跨域。

PS:1、如果是協議和埠造成的跨域問題,前端是無能為力的;2、在跨域問題上,域僅僅是通過“URL的首部(協議、域名、埠)”來識別,而不會根據域名對應的IP地址是否相同來判斷。(也就是IP地址沒用)

10.1 圖片ping

它是與伺服器進行簡單、單項跨域通訊的一種方式。請求的資料是通過查詢字串形式傳送的(比如http://www.example.com/test.html?name=Jhon),他的響應通常書畫素圖或者204(無內容)響應,通過監聽load和error事件,可以知道響應是什麼時候收到的。

var img = new Image();
img.onload = img.onerror = function () {
    console.log("receive");
};
img.src = "http://www.example.com/test.html?name=Jhon";

用途:影象ping最常用於跟蹤使用者點選頁面或者動態廣告曝光次數。

缺點:1、只能傳送get請求;2、無法訪問伺服器的響應文字

10.2 JSONP

JSON with padding(填充式JSON或引數式JSON)。通過動態生成script標籤,然後新增src,產生get請求,且不會發生跨域問題。通過get請求新增callback引數的方式,後臺返回由callback函式包裹JSON資料的方式傳回給前端,這個程式碼會在前端作為js程式碼直接執行,只要前端這邊提前寫好了callback函式即可。(需要後臺配合)

優點:相容性更好,可以在舊瀏覽器中執行,在請求完畢後可以通過呼叫callback的方式回傳結果

缺點:1、只支援get請求;2、安全問題(請求返回的程式碼中可能存在安全隱患,需要字串過濾?);3、要確定jsonp請求是否失敗並不容易;4、需要商量基礎token作為身份驗證,不然是個網站都可以拿到網站的資料。

10.3 CORS(跨域資源共享 )

請求頭部設定Origin:URL,響應頭部設定Acess-Control-Access-Origin:URL(或者*,表示所有的都行),兩個URL相同就可以實現跨域訪問了。

10.4 document.domain

document.domain="example.com"的方式進行修改二級域名,實現後兩個域名相同的網頁通訊。一般適用於不同子域的框架之間的通訊,這樣可以獲取別的框架頁面的指令碼的物件和屬性

如果你想通過ajax的方法去與不同子域的頁面互動,除了使用jsonp的方法外,還可以用一個隱藏的iframe來做一個代理。原理就是讓這個iframe載入一個與你想要通過ajax獲取資料的目標頁面處在相同的域的頁面,所以這個iframe中的頁面是可以正常使用ajax去獲取你要的資料的,然後就是通過我們剛剛講得修改document.domain的方法,讓我們能通過js完全控制這個iframe(利用iframe框架的contentWindow屬性可以獲取該頁面window物件,裡面包含了頁面內的所有活動屬性和物件),這樣我們就可以讓iframe去傳送ajax請求,然後收到的資料我們也可以獲得了。

10.5 window.name

window.name:window物件有個name屬性,該屬性有個特徵:即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的許可權,window.name是持久存在一個視窗載入過的所有頁面中的,並不會因新頁面的載入而進行重置。

10.6 postMessage

postMessage:跨文件訊息則是通過向Window例項傳送訊息來完成的。在使用時,軟體開發人員需要通過呼叫一個Window的postMessage()函式來向該Window例項傳送訊息。此時Window例項內部的onmessage事件將被觸發,進而使得該事件的訊息處理函式被呼叫。但是在接收到訊息的時候,訊息處理函式首先需要判斷訊息來源的合法性,以避免惡意使用者通過傳送訊息的方式來非法執行程式碼。otherWindow.postMessage(message, targetOrigin, [transfer]);