整理的一些常見問題

Limyes發表於2018-09-19

1、 什麼是閉包?閉包有什麼作用?

var a=1;
function  (){
    a++;
    return a;
}複製程式碼

一個變數,一個函式,在函式裡可以訪問到變數,這就叫閉包,即如果一個函式引用了除了它自身內部變數外的變數,這個外部變數和這個函式就形成了一個閉包。

閉包的作用:
從外部讀取函式內部變數,讓這些變數始終保持在記憶體中:

function  fn1(n){
    return function fn2(){
        return n++;
    }
}
var fn3=fn1(1);
fn3()//1
fn3()//2複製程式碼

閉包使內部變數記住上一次的運算結果,不會因為沒有被直接引用而被瀏覽器的垃圾回收機制回收。

同時閉包也可以用來封裝物件的私有屬性和方法:

function  fn1(n){
    return function fn2(){
        return n++;
    }
}
var fn3=fn1(1);
fn3()//1
var fn4=fn1(2);
fn4()//2
//fn3和fn4互不影響,各自返回不同的數值複製程式碼

2、call、apply、bind 的用法分別是什麼?

相同點:
接受的第一個引數都是this,都能改變this 的指向。
區別:
call可以接受第二個,第三個,第N個引數,apply接受的第二個引數是一個陣列,bind和call可以接受的引數一樣,但是bind的返回值是一個函式,也就是就算傳引數進去也不會立即執行,還需要再次呼叫執行一次函式才算真正的執行。

var obj = {
    name: 'Lim',
    age:'18'
}

function printName(gender,school) {
    console.log(this.name+this.age+gender+school)
}

printName.call(obj,'man','BBC');
printName.apply(obj,['woman','BBC']);
printName.bind(obj,'man','ORC')();複製程式碼

3、幾個常用的HTTP狀態碼

狀態碼200表示請求成功
狀態碼202表示伺服器成功接收請求
狀態碼301表示被請求的資源已經永久移動到新位置
狀態碼302表示被請求的資源暫時不可以訪問,以後可以再訪問
狀態碼400表示請求報文中存在語法錯誤
狀態碼404表示請求失敗,請求所希望得到的資源沒有在伺服器上找到
狀態碼500表示伺服器錯誤
狀態碼502表示作為閘道器或代理工作的伺服器嘗試執行請求時,從上游伺服器得到無效的響應

4、寫出一個http請求和響應

HTTP請求常見格式,分為四部分:
第一部分:請求方式(get/post)  路徑(/path)  協議/版本號(HTTP/1.1)

第二部分:鍵值對(key:value)

第三部分:回車符

第四部分:請求的資料

1 POST /path HTTP/1.1
2 Host:www.baidu.com
2 Content-Length: 24
2 Content-Type: application/x-www-form-urlencoded
3 
4 username=ff&password=123複製程式碼

HTTP響應常見格式,分為四部分:

第一部分:協議/版本號(HTTP/1.1) 狀態碼   狀態碼解釋 

第二部分:鍵值對(key:value)

第三部分:回車符

第四部分:響應資料(根據第二部分的Content-Type決定該部分的內容格式)

1 HTTP/1.1   200  ok
2 Content-Length: 200
2 Content-Type: text/html
3 
4 <html>...</html>複製程式碼

5、一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼?

5-1.DNS解析:瀏覽器根據URL中的域名查詢對應的IP地址。
5-2.TCP連線:瀏覽器根據IP地址向伺服器發起TCP連線,產生三次握手:
(1)瀏覽器向伺服器發起連線請求
(2)伺服器接到請求,回覆同意連線
(3)瀏覽器接到伺服器返回的確認連線資訊,再次確認,正式建立連線。
5-3.傳送http請求:建立連線後,瀏覽器傳送http請求,包括請求行,請求頭,請求資料內容
5-4.伺服器處理請求並返回響應內容
5-5.瀏覽器渲染頁面:瀏覽器收到響應開始解析渲染頁面,先解析html構建DOM樹,再解析  css構建規則樹,根據樹然後繪製頁面。
5-6.關閉連線或者繼續保持連線

6、如何實現陣列去重?

假設有陣列 array = [1,5,2,3,4,2,3,1,3,4]
你要寫一個函式 unique,使得
unique(array) 的值為 [1,5,2,3,4]
也就是把重複的值都去掉,只保留不重複的值。

要求:

  1. 不要做多重迴圈,只能遍歷一次
  2. 請給出兩種方案,一種能在 ES 5 環境中執行,一種能在 ES 6 環境中執行(提示 ES 6 環境多了一個 Set 物件)

ES5:

var array = [1,5,2,3,4,2,3,1,3,4];
function unique(arr){
    var newArray = [];
    var hasharr={};
    for (var i = 0; i < arr.length; i++) {
        if (hasharr[arr[i] ]===undefined) {
            newArray.push(arr[i]);
            hasharr[arr[i]]=1;
        }
    }
    return newArray;
}
unique(array);
複製程式碼

ES6:

var array = [1,5,2,3,4,2,3,1,3,4];
function unique(arr){
  return Array.from(new Set(arr));
}
unique(array);複製程式碼

7、JSON 和 JavaScript 是什麼關係?JSON 和 JavaScript 的區別有哪些?

關係:JSON 是一門借鑑 JavaScript 的語言,同時也是一種資料互動格式,JSON 是 JavaScript 的子集(或者說 JSON 只借鑑了一部分 JavaScript 語法,而且沒有新增任何原創的語法)

區別:JSON 不支援函式、undefined、變數、引用、單引號字串、物件的key不支援單引號也不支援不加引號、沒有內建的 Date、Math、RegExp 等。
而 JavaScript 全都支援。

8、什麼是 JSONP?

JSONP是一種跨域請求資料方式,原理是動態建立script標籤,利用script傳送請求不受同源策略限制的特性,實現的過程是:
1.請求方即瀏覽器在頁面建立一個script標籤指向響應地址,同時傳遞一個查詢引數callback=函式名,這個函式裡可以自己定義處理引數的過程
2.響應方根據前端頁面傳過來的查詢引數,建立一個形如:函式名.call('undefined',{key:value,key:value,......})或者 函式名({key:value,key:value,......})這樣的響應
3.瀏覽器收到響應,呼叫函式,按照自己定義的方式來處理接收到的資料

9、JSONP 為什麼不支援 POST

因為JSONP的使用原理是動態建立script標籤,利用script傳送請求不受同源策略限制的特性來實現跨域請求資料,而動態建立的script標籤只能傳送get請求,不支援post。

10、有哪些可以發請求的標籤?

form可以發post和get請求,會重新整理或新開啟頁面 。a只能發get,會重新整理或新開啟頁面。 img只能發get,只能以圖片形式顯示。 link只能發get,必須放在頁面裡才能發,只能以css或者favicon形式展示 。script只能發get,必須放在頁面裡,但是隻能以指令碼的形式執行。

11、什麼是前端MVC?

Model(模型)-- View(檢視)--Controller(控制器)
MVC 就是一種有規律的程式碼規範,把程式碼按照三層的結構進行梳理,更清晰易懂,具體就是:
Model 資料管理,包括資料邏輯、資料請求、資料儲存等功能。前端 Model 主要負責 AJAX 請求或者 LocalStorage 儲存
View 負責使用者介面,前端 View 主要負責 HTML 渲染。
Controller 負責處理 View 的事件,並更新 Model;也負責監聽 Model 的變化,並更新 View,Controller 控制其他的所有流程。
流程:
使用者在檢視層進行操作,然後控制器監聽到檢視層的操作,向模型層請求呼叫資料,模型層收到請求向伺服器發出請求呼叫資料,伺服器把資料響應給模型層,模型層再把資料返回給控制器,控制器更新檢視層資料。

// M:1.初始化資料2.獲取資料3.儲存資料
var model={
    data:null,
    init:function(){},
    getData:function(){},
    saveData:function(){},
}
// V:獲取檢視範圍
var view={
    init() {},
    template: ''}// C:1.初始化檢視和模型,以及一些事件2.根據檢視層操作做出響應展示更新資料或者其它3.給檢視層繫結事件
var controller={
    init:function(){},
    showData:function(){},
    bindEvents:function(){},
}複製程式碼

12、在 ES5 中如何用函式模擬一個類?

function Person(options){
    // 此處可以新增不同的私有屬性
    this.name=name
    this.age=age
        ...
}
// 此處設定Person類的公有屬性
Person.prototype.walk=function(){console.log('walk')}
Person.prototype.gender="woman"

var person1=new Person({name:'hi',age:'18'})複製程式碼

13、怎樣使用Promise?

window.myFunction=function(options){
    return new Promise(function(resolve,reject){
        if(success){
            resolve.call(this,responseText)
        }else{
            reject.call(this,errorText)
        }
    })
}

window.myFunction(options).then(
    (responseText)=>console.log(responseText),//resolve
    (errorText)=>console.log(errorText)//reject
)複製程式碼

14、請使用原生 JS 寫出一個 AJAX 請求(程式碼中必須出現 XMLHttpRequest)

let  request=new XMLHttpRequest();
request.open('GET','/path');
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4){
        if(request.status>=200&&request.status<300){
            console.log('success');
        }else if(request.status>=400){
            console.log('failed');
        }
    }
}複製程式碼

15、關於Cookie、Session和Localstorage

cookie和session的關係 :一般來說,session是基於cookie實現的  

cookie和Localstorage的區別 :cookie每次都會被帶給伺服器,帶給每個頁面,但是localstorage不會,跟http無關,只被儲存在本地 cookie一般最大4K左右,localstorage最大5MB 跟瀏覽器有關 

Localstorage和sessionStorage的區別 :sessionStorage在使用者關閉頁面以後即Session(會話)結束以後就會失效,Localstorage只要使用者不主動清理快取就會永久有效 

expries和cache-control區別:expries是以前的用法,expires表示什麼時候過期,cache-control表示過多久過期,expires表示的時間是使用者本地時間,如果使用者本地時間錯亂就會出問題,所以優先使用cache-control 

ETAG和cache-control區別 :cache-control直接不請求,ETAG請求但是不下載


相關文章