前端技術面——（js基礎一）

時間 2019-12-17

標籤前端技術基礎欄目 JavaScript 简体版

原文原文鏈接

一、Vue雙向數據綁定是如何實現的？原文

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調

Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。
訪問器屬性是對象中的一種特殊屬性，它不能直接在對象中設置，而必須經過 defineProperty() 方法單獨定義。
訪問器屬性的"值"比較特殊，讀取或設置訪問器屬性的值，其實是調用其內部特性：get和set函數。
get 和 set 方法內部的 this 都指向 obj，這意味着 get 和 set
函數能夠操做對象內部的值。另外，訪問器屬性的會"覆蓋"同名的普通屬性，由於訪問器屬性會被優先訪問，與其同名的普通屬性則會被忽略。

Angularjs和Vue.js對比javascript

二、極簡雙向數據綁定是如何實現的？

三、原型和原型鏈是什麼？原文

一、構造函數建立對象咱們先使用構造函數建立一個對象：

二、 prototype 每一個函數都有一個prototype屬性，函數的prototype屬性指向了一個對象，這個對象正是調用該構造函數而建立的實例的原型,也就是這個例子中的person1和person2的原型。每個JavaScript對象(null除外)在建立的時候就會與之關聯另外一個對象，這個對象就是咱們所說的原型，每個對象都會從原型」繼承」屬性。

三、proto 這是每個JavaScript對象(除了null)都具備的一個屬性，叫__proto__，這個屬性會指向該對象的原型。css

四、construcotr，每一個原型都有一個constructor屬性指向關聯的構造函數html

五、實例與原型當讀取實例的屬性時，若是找不到，就會查找與對象關聯的原型中的屬性，若是還查不到，就去找原型的原型，一直找到最頂層爲止。前端

六、原型鏈那Object.prototype的原型呢？ null，嗯，就是null,因此查到Object.prototype就能夠中止查找了

四、總結ES6經常使用的新特性。原文

在這裏列舉幾個經常使用的：vue

箭頭函數
Promise
Let與Const
類
模塊化
函數參數默認值
模板字符串
解構賦值
延展操做符
對象屬性簡寫

五、箭頭函數。原文

箭頭函數被調用的時候，不會自動綁定一個this對象。換句話說，箭頭函數根本就沒有本身的this。它的this都是捕獲自其所在上下文的this值。

做爲匿名函數被調用。

做爲方法被調用

在方法內部被調用

使用new 操做符調用，會拋出錯誤
使用call和apply，bind()調用

總結一下

箭頭函數沒有本身的this對象，它老是搬運外部環境的this對象。所以，只要離它最近的外部環境中的this改變，箭頭函數中的this就改變。若是離它最近的環境中的this，沒有改變。那麼箭頭函數中的this就不會改變。

原文html5

6.promise是什麼？原文

什麼是Prmoisejava

Promise對象能夠理解爲一次執行的異步操做，使用promise對象以後可使用一種鏈式調用的方式來組織代碼

Promise對象的特色：react

一、對象的狀態不受外界影響。
Promise對象表明一個異步操做，有三種狀態:
pending（執行中）
Resolved（成功，又稱Fulfilled）
rejected（拒絕）
二、一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。
Promise對象的狀態改變，只有兩種可能：從Pending變爲Resolved和從Pending變爲Rejected

Promise對象的缺點：jquery

一、沒法取消Promise，一旦新建它就會當即執行，沒法中途取消。
二、若是不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
三、當處於Pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

promise兼容性webpack

除了IE這種古老的瀏覽器和一些低版本的安卓外，現代瀏覽器支持仍是挺好的

Promise的使用

一、基本用法：
（1）、首先咱們new一個Promise,將Promise實例化
（2）、而後在實例化的promise能夠傳兩個參數，一個是成功以後的resolve，一個是失敗以後的reject
（3）、Promise實例生成之後，能夠用then方法分別指定Resolved狀態和Reject狀態的回調函數

二、鏈式操做
也許你會說，Promise只是簡化層層回調的寫法而已吧，其實否則，它的精髓是經過維護狀態、傳遞狀態的方式來使回調方式可以及時的調用，所以，相比於callback，它更靈活，更簡單。

promise.all方法

Promise.all 能夠接收一個元素爲 Promise 對象的數組做爲參數，當這個數組裏面全部的 Promise 對象都變爲 resolve 時，該方法纔會返回。
all接收一個數組做爲參數，p1,p2是並行執行的，等兩個都執行完了，纔會進入到then，all會把全部的結果放到一個數組中返回，因此咱們打印出咱們的結果爲一個數組。

promise.race方法

race只返回跑的快的值，也就是說result返回比較快執行的那個。

七、JS中事件冒泡與捕獲。原文

一、document 往 target節點，捕獲前進，遇到註冊的捕獲事件當即觸發執行
二、到達target節點，觸發事件（對於target節點上，是先捕獲仍是先冒泡則捕獲事件和冒泡事件的註冊順序，先註冊先執行）
三、target節點往 document 方向，冒泡前進，遇到註冊的冒泡事件當即觸發

總結下就是:

對於非target節點則先執行捕獲在執行冒泡
對於target節點則是先執行先註冊的事件，不管冒泡仍是捕獲

八、http和https

(1)http和https的基本概念

http: 超文本傳輸協議，是一個客戶端和服務器端請求和應答的標準（TCP），用於從WWW服務器傳輸超文本到本地瀏覽器的傳輸協議。
https: 是以安全爲目標的HTTP通道，簡單講是HTTP的安全版，即HTTP下加入SSL層。
https協議的主要做用是：創建一個信息安全通道，來確保數組的傳輸，確保網站的真實性。

(2)http和https的區別？

https協議是由http和ssl協議構建的可進行加密傳輸和身份認證的網絡協議，比http協議的安全性更高。

1.Https協議須要ca證書，費用較高。
2.http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
3.使用不一樣的連接方式，端口也不一樣，通常而言，http協議的端口爲80，https的端口爲443
4.http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

(3)https協議的工做原理

客戶端在使用HTTPS方式與Web服務器通訊時有如下幾個步驟。

1.客戶使用https url訪問服務器，則要求web 服務器創建ssl連接。
2.web服務器接收到客戶端的請求以後，會將網站的證書（證書中包含了公鑰），返回或者說傳輸給客戶端。
3.客戶端和web服務器端開始協商SSL連接的安全等級，也就是加密等級。
4.客戶端瀏覽器經過雙方協商一致的安全等級，創建會話密鑰，而後經過網站的公鑰來加密會話密鑰，並傳送給網站。
5.web服務器經過本身的私鑰解密出會話密鑰。
6.web服務器經過會話密鑰加密與客戶端之間的通訊。

9.tcp三次握手，一句話歸納

三次握手能夠簡化爲：C發起請求鏈接S確認，也發起鏈接C確認咱們再看看每次握手的做用：

第一次握手：S只能夠確認本身能夠接受C發送的報文段
第二次握手：C能夠確認 S收到了本身發送的報文段，而且能夠確認本身能夠接受S發送的報文段
第三次握手：S能夠確認 C收到了本身發送的報文段

10.TCP和UDP的區別

TCP是面向鏈接的，udp是無鏈接的即發送數據前不須要先創建連接。
TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保證可靠交付。而且由於tcp可靠，面向鏈接，不會丟失數據所以適合大數據量的交換。
TCP是面向字節流，UDP面向報文，而且網絡出現擁塞不會使得發送速率下降（所以會出現丟包，對實時的應用好比IP電話和視頻會議等）。
TCP只能是1對1的，UDP支持1對1,1對多。
TCP的首部較大爲20字節，而UDP只有8字節。
TCP是面向鏈接的可靠性傳輸，而UDP是不可靠的。

11.Cookie、sessionStorage、localStorage的區別

共同點：都是保存在瀏覽器端，而且是同源的

Cookie：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下,存儲的大小很小隻有4K左右。（key：能夠在瀏覽器和服務器端來回傳遞，存儲容量小，只有大約4K左右）

sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持，localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。（key：自己就是一個回話過程，關閉瀏覽器後消失，session爲一個回話，當頁面不一樣即便是同一頁面打開兩次，也被視爲同一次回話）

localStorage：localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。（key：同源窗口都會共享，而且不會失效，無論窗口或者瀏覽器關閉與否都會始終生效）

12.本身實現一個bind函數

原理：經過apply或者call方法來實現。

1三、preventDefault 和 stopPropagation

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程序被執行。 preventDefault阻止元素髮生的默認行爲。

例如：當點擊提交按鈕時阻止對錶單的提交
阻止一下URL的連接

## 1四、寫一個通用事件偵聽函數

1五、爲何要用閉包

閉包就是可以讀取其餘函數內部變量的函數
閉包的做用在於，能夠經過閉包，設計私有變量及方法。

閉包的三大特色爲：

一、函數嵌套函數
二、內部函數能夠訪問外部函數的變量
三、參數和變量不會被回收。

1六、call和apply和bind有什麼不同？

相同點

都是實現繼承或者轉換對象指針的做用
一、call和apply能夠改變this的指向
二、第一個參數都是this要指向的對象
三、均可以利用後續參數繼續傳參

不一樣點

一、call和apply是對函數的直接調用，而bind方法返回的是一個函數，bind後函數不會當即執行，而是返回了一個改變上下文的函數副本
二、call和apply均可以傳遞參數

什麼是bind

bind()會建立一個新函數，當這個新函數被調用時，bind（）的第一個參數將做爲運行時的this，以後的一序列參數將會在傳遞的實參前做爲傳遞的參數

1七、前端性能優化你瞭解哪些

內容層面

使用CDN
單域名、多域名，單域名能夠減小DNS查找次數，多域名能夠增長瀏覽器並行下載數量，這須要權衡，通常同一個域下不要超過四個資源。
避免重定向(分場景)
避免404

網絡層面

利用緩存，能夠參考另外一篇文章手寫文件服務器，說說先後端交互
文件壓縮(經過響應頭Accept-Encoding: gzip, deflate, br告訴服務器你支持的壓縮類型)
按需加載，提取公共代碼，tree-shaking等(均可以經過webpack來實現)
減小cookie大小
文件合併，經過css雪碧圖合併圖片
文件預加載、圖片懶加載

渲染層間

js放底部，css放頂部
減小reflow(迴流)和repaint(重繪)
減小dom節點

代碼層面

緩存dom節點，減小節點查找，css選擇器層級優化
減小dom節點操做
合理使用break、continue、return等，優化循環
像react用到的事件委託、對象池等手段

1八、說說瀏覽器的reflow和repaint

瀏覽器解析過程

解析html生成dom樹
解析css
把css應用於dom樹，生成render樹(這裏記錄這每個節點和它的樣式和所在的位置)
把render樹渲染到頁面

reflow(迴流)

reflow翻譯爲迴流，指的是頁面再次構建render樹。每一個頁面至少發生一次迴流，就是第一次加載頁面的時候此外，當頁面中有任何改變可能形成文檔結構發生改變(即元素間的相對或絕對位置改變)，都會發生reflow，常見的有：

添加或刪除元素(opacity:0除外，它不是刪除)
改變某個元素的尺寸或位置
瀏覽器窗口改變(resize事件觸發)

repaint(重繪)

repaint翻譯爲重繪，它能夠類比爲上面的第四步，根據render樹繪製頁面，它的性能損耗比迴流要小。每次迴流必定會發生重繪。此外，如下操做(不影響文檔結構的操做，影響結構的會發生迴流)也會發生重繪：

元素的顏色、透明度改變
text-align等

1九、深拷貝

function deepcopy(obj) {
        let res = {};
        for (key in obj) {
            if (typeof obj[key] == 'object') {
                res[key] = deepcopy(obj[key]);
            } else {
                res[key] = obj[key];
            }
        }
        return res;
    }
複製代碼

20、defer和async的區別原文

定義

defer：此布爾屬性被設置爲向瀏覽器指示腳本在文檔被解析後執行。
async：設置此布爾屬性，以指示瀏覽器若是可能的話，應異步執行腳本。
1. 對於defer，咱們能夠認爲是將外鏈的js放在了頁面底部。js的加載不會阻塞頁面的渲染和資源的加載。不過defer會按照本來的js的順序執行，因此若是先後有依賴關係的js能夠放心使用。
2. 對於async，這個是html5中新增的屬性，它的做用是可以異步的加載和執行腳本，不由於加載腳本而阻塞頁面的加載。一旦加載到就會馬上執行在有async的狀況下，js一旦下載好了就會執行，因此頗有可能不是按照本來的順序來執行的。若是js先後有依賴性，用async，就頗有可能出錯。

區別

相同點：

1. 加載文件時不阻塞頁面渲染
2. 對於inline的script（內聯腳本）無效
3. 使用這兩個屬性的腳本中不能調用document.write方法
4. 有腳本的onload的事件回調

不一樣點：

1. html的版本html4.0中定義了defer；html5.0中定義了async
2. 瀏覽器兼容性
3. 執行時刻每個async屬性的腳本都在它下載結束以後馬上執行，同時會在window的load事件以前執行。因此就有可能出現腳本執行順序被打亂的狀況；每個defer屬性的腳本都是在頁面解析完畢以後，按照本來的順序執行，同時會在document的DOMContentLoaded以前執行。

結語

1. 若是async爲true，那麼腳本在下載完成後異步執行。
2. 若是async爲false，defer爲true，那麼腳本會在頁面解析完畢以後執行。
3. 若是async和defer都爲false，那麼腳本會在頁面解析中，中止頁面解析，馬上下載而且執行。

最後給一點我的的建議，不管使用defer仍是async屬性，都須要首先將頁面中的js文件進行整理，哪些文件之間有依賴性，哪些文件能夠延遲加載等等，作好js代碼的合併和拆分，而後再根據頁面須要使用這兩個屬性。

2一、詳解toString

toString() 方法返回一個表示該對象的字符串。 valueOf() 方法返回指定對象的原始值。

2二、如何去除字符串首位空格？

//es6
' ab '.trim()      //"ab" 
//正則
' ab '.replace(/^\s*|\s*$/g,'')  //"ab"
複製代碼

2三、jsonp原理？缺點?

工做原理：使用script標籤實現跨域訪問，可在url中指定回調函數，獲取JSON數據並在指定的回調函數中執行jquery實現jsop。
缺點：只支持GET方式的jsonp實現，是一種腳本注入行爲存在必定的安全隱患。若是返回的數據格式有問題或者返回失敗了，並不會報錯。

2四、設計模式

一、工廠模式
 function People() {
    var obj = new Object();
    obj.name = '小明';
    obj.age = 12;
    obj.say = function() {
        // alert(this.name);
        return this.name;
    }
    return obj;
}

二、構造函數模式
function People() {
    this.name = '小明';
    this.say = function() {
        return this.name;
    }
}

三、原型模式
function People(name) {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
複製代碼

2五、繼承

一、原型鏈繼承
function People(name) {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
function Student(name, grade) {
    this.name = name;
    this.grade = grade;
    this.sayGrade = function() {
        console.log(this.grade);
    }
}
Student.prototype = new People();


二、構造函數繼承
function People() {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
People.prototype.type = function() {
    console.log('人');
};
function Student(name, grade) {
    this.name = name;
    this.grade = grade;
    People.apply(this);
}
var student = new Student('小蘭', 5);
student.type();
複製代碼

2六、HTTP的幾種請求方法用途

一、GET方法

發送一個請求來取得服務器上的某一資源

二、POST方法

向URL指定的資源提交數據或附加新的數據

三、PUT方法

跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有

四、HEAD方法

只請求頁面的首部

五、DELETE方法

刪除服務器上的某資源

六、OPTIONS方法

它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息
瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求（preflight request），從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求。

七、TRACE方法

TRACE方法被用於激發一個遠程的，應用層的請求消息迴路

八、CONNECT方法

把請求鏈接轉換到透明的TCP/IP通道

2七、從瀏覽器地址欄輸入url到顯示頁面的步驟

瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；連接
服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。

2八、如何進行網站性能優化

1. content方面

減小HTTP請求：合併文件、CSS精靈、inline Image
減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
減小DOM元素數量

2. Server方面

使用CDN
配置ETag
對組件使用Gzip壓縮

3. Cookie方面

減少cookie大小

4. css方面

將樣式表放到頁面頂部
不使用CSS表達式
使用不使用@import

5. Javascript方面

將腳本放到頁面底部
將javascript和css從外部引入
壓縮javascript和css
刪除不須要的腳本
減小DOM訪問

6. 圖片方面

優化圖片：根據實際顏色須要選擇色深、壓縮
優化css精靈
不要在HTML中拉伸圖片

2九、HTTP狀態碼及其含義

1XX：信息狀態碼

100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

2XX：成功狀態碼

200 OK 正常返回信息

201 Created 請求成功而且服務器建立了新的資源

202 Accepted 服務器已接受請求，但還沒有處理

3XX：重定向

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

304 Not Modified 自從上次請求後，請求的網頁未修改過。

4XX：客戶端錯誤

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務器錯誤

500 Internal Server Error 最多見的服務器端錯誤。

503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

3一、介紹js有哪些內置對象？

Object 是 JavaScript 中全部對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其餘對象：Function、Arguments、Math、Date、RegExp、Error

3二、JavaScript的基本數據類型和引用數據類型？你能畫一下他們的內存圖嗎？

棧：原始數據類型（Undefined，Null，Boolean，Number，String）
堆：引用數據類型（Object，Array，Function，Data）
兩種類型的區別是：存儲位置不一樣；
原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。不一樣是，你不能夠直接訪問堆內存空間中的位置和操做堆內存空間。只能操做對象在棧內存中的引用地址。連接

總結區別

聲明變量時不一樣的內存分配：
不一樣的內存分配機制也帶來了不一樣的訪問機制
複製變量時的不一樣
參數傳遞的不一樣（把實參複製給形參的過程）

3三、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN]由於 parseInt 須要兩個參數 (val, radix)，其中radix 表示解析時用的基數。
map傳了 3個(element, index, array)，對應的 radix 不合法致使解析失敗。

3四、同步和異步的區別?

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

3五、談一談let與var的區別？

let命令不存在變量提高，若是在let前使用，會致使報錯
若是塊區中存在let和const命令，就會造成封閉做用域
不容許重複聲明，所以，不能在函數內部從新聲明參數

3六、瀏覽器兼容問題

微信H5

1.設置 overflow scroll 在IOS中滑動不流暢的問題 -webkit-overflow-scrolling: touch
2. 用bootstrap 模態框彈在IOS中彈不出的問題
cursor: pointer;

微信小程序

上下兩張圖片之間的空隙，設置img爲：display:block;
小程序button的邊框去不掉的時候，:after{border:none;}

3七、判斷一個數組

arr instancof Array
Array.isArray(arr)
Object.prototype.toString.call(arr)=='[Object Array]'

3八、如何保證一個變量裏面的屬性不被修改

const object1 = { property1: 42 };

const object2 = Object.freeze(object1);

object2.property1 = 33;

3九、splice和slice和substring和substr

分類	改變原數據	名稱	第一個參數	第二個參數	第三個參數
數組方法	改變	splice	start(可負值)	len	add
數組方法	不改變	slice	start	end
字符串方法	不改變	substring	start	end
字符串方法	不改變	substr	start(可負值)	len