web筆試

時間 2019-11-18

標籤 web 筆試欄目 HTML 简体版

原文原文鏈接

類型判斷用到哪些方法？php

typeof和instanceofcss

值類型和引用類型的區別？html

根據 JavaScript中的變量類型傳遞方式，又分爲值類型和引用類型，在參數傳遞方式上，值類型是按值傳遞，引用類型是按共享傳遞。前端

說出下面代碼的執行結果，並分析其緣由？vue

function foo(a){node

a = a * 10;git

}es6

function bar(b){github

b.value = 'new';web

}

var a = 1;

var b = {value: 'old'};

foo(a);

bar(b);

console.log(a); // 1

console.log(b); // value: new

如何理解 JavaScript 的原型？

全部的引用類型（數組、對象、函數），都具備對象特性，便可自由擴展屬性（null除外）

全部的引用類型（數組、對象、函數），都有一個__proto__屬性，屬性值是一個普通的對象

全部的函數，都有一個prototype屬性，屬性值也是一個普通的對象全部的引用類型（數組、對象、函數），__proto__屬性值指向它的構造函數的prototype屬性值

// 要點一：自由擴展屬性

var obj = {};obj.a = 100;

var arr = [];arr.a = 100;

function fn () {}

fn.a = 100;

//要點二：__proto__

console.log(obj.__proto__);

console.log(arr.__proto__);

console.log(fn.__proto__);

// 要點三：函數有 prototype

console.log(fn.prototype)

// 要點四：引用類型的 __proto__ 屬性值指向它的構造函數的 prototype 屬性值

console.log(obj.__proto__ === Object.prototype)

執行printName時很好理解，可是執行alertName時發生了什麼？這裏再記住一個重點當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找，所以f.alertName就會找到Foo.prototype.alertName

JS中構造函數有普通函數有什麼區別？

1.通常規則

　　構造函數都應該以一個大寫字母開頭，eg:

　　function Person(){...}

　　而非構造函數則應該以一個小寫字母開頭，eg:

　　function person(){...}

2.調用方式

　　任何函數，只要經過 new 操做符來調用，那它就能夠做爲構造函數；

　　任何函數，若是不經過 new 操做符來調用，那它跟普通函數也沒有什麼兩樣。

prototype與__proto__區別？

如何理解 JS 的原型鏈？

當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找。若是仍是沒有找到，繼續往上找，這樣一直往上找，你會發現是一個鏈式的結構，因此叫作「原型鏈」。若是一直找到最上層都沒有找到，那麼就宣告失敗，返回undefined。

最上層是什麼 —— Object.prototype.__proto__= = null

變量提高？

把變量聲明提高到當前執行環境的最頂端，先賦undefined（首先js引擎在讀取js代碼時會進行兩個步驟，第一個步驟是解釋，第二個步驟是執行。

所謂解釋就是會先通篇掃描全部的Js代碼，而後把全部聲明提高到頂端，第二步是執行，執行就是操做一類的）

什麼是執行上下文？

在一段 JS 腳本（即一個<script>標籤中）執行以前，要先解析代碼，解析的時候會先建立一個全局執行上下文環境，先把代碼中即將執行的（內部函數的不算，由於你不知道函數什麼時候執行）變量、函數聲明都拿出來。變量先暫時賦值爲undefined，函數則先聲明好可以使用。這一步作完了，而後再開始正式執行程序。再次強調，這是在代碼執行以前纔開始的工做。

另外，一個函數在執行以前，也會建立一個函數執行上下文環境，跟全局上下文差很少，不過函數執行上下文中會多出this arguments和函數的參數

總結一下：

範圍：一段<script>、js 文件或者一個函數
全局上下文：變量定義，函數聲明
函數上下文：變量定義，函數聲明，this，arguments

題目：說出下面執行的結果（執行上下文，這裏筆者直接註釋輸出了）

console.log(a) // undefined

var a = 100

fn('zhangsan') // 'zhangsan' 20

function fn(name) {

age = 20

console.log(name, age)

var age

}

console.log(b); // 這裏報錯

// Uncaught ReferenceError: b is not defined

b = 100;

爲何a是undefined，而b卻報錯了，實際 JS 在代碼執行以前，要「全文解析」，發現var a，知道有個a的變量，存入了執行上下文，而b沒有找到var關鍵字，這時候沒有在執行上下文提早「佔位」，因此代碼執行的時候，提早報到的a是有記錄的，只不過值暫時尚未賦值，即爲undefined，而b在執行上下文沒有找到，天然會報錯（沒有找到b的引用）。

請解釋this的問題？

this的值是在執行的時候才能確認，定義的時候不能確認！爲何呢 —— 由於this是執行上下文環境的一部分，而執行上下文須要在代碼執行以前肯定，而不是定義的時候。

var a = {
    name: 'A', fn: function () { console.log(this.name) } } a.fn() // this === a a.fn.call({name: 'B'}) // this === {name: 'B'} var fn1 = a.fn fn1() // this === window

this執行會有不一樣，主要集中在這幾個場景中

做爲構造函數執行，

構造函數中做爲對象屬性執行，上述代碼中a.fn()

做爲普通函數執行，上述代碼中fn1()

用於call apply bind，上述代碼中a.fn.call({name: 'B'})

題目：如何理解 JS 的做用域和做用域鏈？

JS 沒有塊級做用域，只有全局做用域和函數做用域，ES6纔有塊級做用域，全局做用域就是最外層的做用域，若是咱們寫了不少行 JS 代碼，變量定義都沒有用函數包括，那麼它們就所有都在全局做用域中。這樣的壞處就是很容易衝突。 jQuery、Zepto 等庫的源碼，全部的代碼都會放在(function(){....})()中。由於放在裏面的全部變量，都不會被外泄和暴露，不會污染到外面，不會對其餘的庫或者 JS 腳本形成影響。這是函數做用域的一個體現。

當前做用域沒有定義的變量，這成爲自由變量。自由變量如何獲得 —— 向父級做用域尋找。若是父級也沒呢？再一層一層向上尋找，直到找到全局做用域仍是沒找到，就宣佈放棄。這種一層一層的關係，就是做用域鏈。自由變量將從做用域鏈中去尋找，可是依據的是函數定義時的做用域鏈，而不是函數執行時

閉包主要有哪些應用場景？

①函數做爲返回值

②函數做爲參數傳遞

閉包的優缺點？

1.保護函數內的變量安全,增強了封裝性？

2.在內存中維持一個變量，若b爲a的內部函數，閉包之因此會佔用資源是當函數a執行結束後, 變量i不會由於函數a的結束而銷燬, 由於b的執行須要依賴a中的變量。閉包的缺點就是常駐內存，會增大內存使用量，使用不當(例如用得太多)很容易形成內存泄露？

講解下面代碼的執行過程和結果？

var a = true;

setTimeout(function(){

a = false;

}, 100)

while(a){

console.log('while執行了')

}

由於JS是單線程的，因此進入while循環以後，沒有「時間」（線程）去跑定時器了，因此這個代碼跑起來是個死循環！

ES6 箭頭函數中的this和普通函數中的有什麼不一樣？

第一寫起來更加簡潔，第二 this是父做用域的 this

function fn() {

console.log('real', this) // {a: 100} ，該做用域下的 this 的真實的值

var arr = [1, 2, 3]

// 普通 JS

arr.map(function (item) {

console.log('js', this) // window 。普通函數，這裏打印出來的是全局變量，使人費解

return item + 1

})

// 箭頭函數

arr.map(item => {

console.log('es6', this) // {a: 100} 。箭頭函數，這裏打印的就是父做用域的 this

return item + 1

})

}

fn.call({a: 100})

ES6 模塊化如何使用？

看筆記

設置文字居中？

橫向：text-align：center

縱向：height等於line-height

ES6 class 和普通構造函數的區別

function MathHandle(x, y) {

this.x = x;

this.y = y;

}

MathHandle.prototype.add = function () {

return this.x + this.y;

};

var m = new MathHandle(1, 2);

console.log(m.add())

class MathHandle {

constructor(x, y) {

this.x = x;

this.y = y;

}

add() {

return this.x + this.y;

}

const m = new MathHandle(1, 2);

console.log(m.add())

JS 構造函數實現繼承

// 動物

function Animal() {

this.eat = function () {

console.log('animal eat')

}

// 狗

function Dog() {

this.bark = function () {

console.log('dog bark')

}

Dog.prototype = new Animal()

// 哈士奇

var hashiqi = new Dog()

ES6 class 實現繼承

class Animal {

constructor(name) {

this.name = name

}

eat() {

console.log(`${this.name} eat`)

}

class Dog extends Animal {

constructor(name) {

super(name)

this.name = name

}

say() {

console.log(`${this.name} say`)

}

const dog = new Dog('哈士奇')

dog.say()

dog.eat()

ES6 中新增的數據類型有哪些？

Set 和 Map

DOM 和 HTML 區別和聯繫？

HTML 是一個有既定標籤標準的 XML 格式，標籤的名字、層級關係和屬性，都被標準化（不然瀏覽器沒法解析），它也是一棵樹。HTML 是一棵樹，DOM 也是一棵樹。能夠認爲 DOM 就是 JS 能識別的 HTML 結構，一個普通的 JS 對象或者數組。

property 和 attribute 的區別是什麼？

兩種有很大的區別，property 的獲取和修改，是直接改變 JS 對象，而 attribute 是直接改變 HTML 的屬性，attribute 就是對 HTML 屬性的 get 和 set，和 DOM 節點的 JS 範疇的 property 沒有關係。

什麼是事件冒泡？

DOM 結構中，事件會沿着 DOM 樹向上級節點冒泡，若是咱們在上級節點中都綁定了事件，它是會根據 DOM 的結構來冒泡，從下到上挨個執行的。可是咱們可使用e.stopPropagation()來阻止冒泡

使用事件代理有何好處？

使用代理的優勢以下：使代碼簡潔，減小瀏覽器的內存佔用

HTTP 協議中，response 的狀態碼，常見的有哪些？

xhr.status即 HTTP 狀態碼，有 2xx 3xx 4xx 5xx 這幾種，比較經常使用的有如下幾種：

200 正常

3xx

301 永久重定向。如http://xxx.com這個 GET 請求（最後沒有/），就會被301到http://xxx.com/（最後是/）

302 臨時重定向。臨時的，不是永久的

304 資源找到可是不符合請求條件，不會返回任何主體。如發送 GET 請求時，head 中有If-Modified-Since: xxx（要求返回更新時間是xxx時間以後的資源），若是此時服務器端資源未更新，則會返回304，即不符合要求

404 找不到資源

5xx 服務器端出錯了

另：

xhr.readyState是瀏覽器判斷請求過程當中各個階段的，xhr.status是 HTTP 協議中規定的不一樣結果的返回狀態說明。

xhr.readyState的狀態碼說明：

0 -代理被建立，但還沒有調用 open() 方法。

1 -open() 方法已經被調用。

2 -send() 方法已經被調用，而且頭部和狀態已經可得到。

3 -下載中， responseText 屬性已經包含部分數據。

4 -下載操做已完成

什麼是跨域，如何實現跨域？前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決？

瀏覽器中有同源策略，url 協議、域名、端口不一樣算跨域

解決跨域 - 服務器端設置 http header

一、JSONP

可是 HTML 中幾個標籤能逃避過同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，這三個標籤的src/href能夠加載其餘域的資源，不受同源策略限制。

二、服務器端設置 http header

response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/"); // 第二個參數填寫容許跨域的域名稱，不建議直接寫 "*"

response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");

response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie

response.setHeader("Access-Control-Allow-Credentials", "true");

cookie 和 localStorage 有何區別？

它是設計用來在服務器和客戶端進行信息傳遞的，所以咱們的每一個 HTTP 請求都帶着 cookie。可是 cookie 也具有瀏覽器端存儲的能力（例如記住用戶名和密碼），所以就被開發者用上了。

使用方法：document.cookie = '···'

缺點：

存儲量過小，只有 4KB

全部 HTTP 請求都帶着，會影響獲取資源的效率

API 簡單，須要封裝才能用

locationStorage 和 sessionStorage區別？

二者的區別就在於sessionStorage根據 session 過去時間而實現，而localStorage會永久有效。一些須要及時失效的重要信息放在sessionStorage中，一些不重要可是不常常設置的信息，放在localStorage中。

優勢

存儲量增大到 5MB

不會帶到 HTTP 請求中

API 適用於數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)

說下你經常使用的幾種佈局方式？

盒模型、flex佈局

談談你對flex佈局的理解？

如下6個屬性設置在容器上：
flex-direction屬性決定主軸的方向
flex-wrap屬性定義，若是一條軸線排不下，如何換行
justify-content屬性定義了項目在主軸上的對齊方式。
align-items屬性定義項目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式

如下6個屬性設置在項目上：
order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0
flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小
flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選
align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch

什麼是盒子模型？

內邊距、邊框和外邊距。它們三者就構成了一個「盒子」

盒子模型的寬度如何計算？

固定寬度的盒子：內容寬度（固定的寬度） + border寬度 + padding寬度 + margin寬度之和

充滿父容器的盒子：內容寬度 + border寬度 + padding寬度 + margin寬度之和，內容寬度=父容器的內容寬度-（本身的 border寬度 + 本身的padding寬度 + 本身的margin寬度）

包裹內容的盒子：內容的寬度按照內容計算，盒子的寬度=內容寬度的基礎上+padding寬度 + border寬度 + margin寬度之和。

爲什麼 float 會致使父元素塌陷？

被設置了 float 的元素會脫離文檔流，破壞了父標籤的本來結構，使得父標籤出現了坍塌現象

float 的重要的特性是什麼？

包裹性和清空格

relative、absolute 和 fixed 有何區別？什麼是定位上下文？

relative 會致使自身位置的相對變化，而不會影響其餘元素的位置、大小，就是 relative 產生一個新的定位上下文。

absolute 元素脫離了文檔結構，只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌，absolute 元素具備「包裹性」。bsolute 元素具備「跟隨性」。雖然 absolute 元素脫離了文檔結構，若咱們沒有設置 top、left 的值，它的位置並不發生變化，呆在它本來的位置。absolute 元素會懸浮在頁面上方，會遮擋住下方的頁面內容。置了 top、left 值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。

fixed 和 absolute 是同樣的，惟一的區別在於：absolute 元素是根據最近的定位上下文肯定位置，而 fixed 根據 window （或者 iframe）肯定位置。

relative 元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

absolute 設置了 top、left，瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。

fixed 元素的定位是相對於 window （或 iframe）邊界的，和其餘元素沒有關係。可是它具備破壞性，會致使其餘元素位置的變化。

相對於flex佈局，傳統佈局的方式是什麼？

佈局的傳統解決方案基於盒子模型，依賴 display 屬性 + position 屬性 + float 屬性

如何實現水平居中？

inline 元素用text-align: center;

block 元素可以使用margin: auto;

絕對定位元素可結合left和margin實現，可是必須知道寬度

.container { //container是item的父級

position: relative;

width: 500px;

}

.item {

width: 300px;

height: 100px;

position: absolute;

left: 50%;

margin: -150px;

}

如何實現垂直居中？

inline 元素可設置line-height的值等於height值

絕對定位元素，可結合left和margin實現，可是必須知道尺寸（優勢：兼容性好

缺點：須要提早知道尺寸）

.container {

position: relative;

height: 200px;

}

.item {

width: 80px;

height: 40px;

position: absolute;

left: 50%;

top: 50%;

margin-top: -20px;

margin-left: -40px;

}

絕對定位可結合transform實現居中（優勢：不須要提早知道尺寸

缺點：兼容性很差）

.container {

position: relative;

height: 200px;

}

.item {

width: 80px;

height: 40px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: blue;

}

絕對定位結合margin: auto（不須要提早知道尺寸，兼容性好）

測試：

<html>

<head>

<style>

.container {

position: relative;

height: 300px;

border:1px blue solid;

}

.item {

width: 100px;

height: 50px;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

background:red

}

</style>

<title>個人第一個 HTML 頁面</title>

</head>

<body>

</body>

</html>

如何理解 HTML 語義化？

所謂「語義」就是爲了更易讀懂，分兩部分：讓人（寫程序、讀程序）更易讀懂和讓機器（瀏覽器、搜索引擎）更易讀懂

爲了增強 HTML 語義化，HTML5 標準中又增長了header section artical等標籤。

CSS 的transition（過渡）和animation（動畫）有何區別？一些常見的屬性說下？

首先transition和animation均可以作動效，從語義上來理解，transition是過渡，由一個狀態過渡到另外一個狀態，好比高度100px過渡到200px；而animation是動畫，即更專業作動效的，animation有幀的概念，能夠設置關鍵幀keyframe，一個動畫能夠由多個關鍵幀多個狀態過渡組成，另外animation也包含多個屬性。

transition: property duration timing-function delay

ransition-property ：規定設置過渡效果的css屬性名稱

transition-duration ：規定完成過渡效果須要多少秒或毫秒

transition-timing-function ：指定過渡函數，規定速度效果的速度曲線

transition-delay ：指定開始出現的延遲時間

animation: name duration timing-function delay iteration-count direction

animation-name 規定須要綁定到選擇器的 keyframe 名稱。。

animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。

animation-timing-function 規定動畫的速度曲線。

animation-delay 規定在動畫開始以前的延遲。

animation-iteration-count 規定動畫應該播放的次數。

animation-direction 規定是否應該輪流反向播放動畫。

動畫相關

transform（變形）、translate（移動）

transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

translate() 方法轉換畫布的用戶座標系統，translate(dx, dy)

什麼是重繪和迴流？

重繪：指的是當頁面中的元素不脫離文檔流，而簡單地進行樣式的變化，好比修改顏色、背景等，瀏覽器從新繪製樣式

迴流：指的是處於文檔流中 DOM 的尺寸大小、位置或者某些屬性發生變化時，致使瀏覽器從新渲染部分或所有文檔的狀況

迴流要比重繪消耗性能開支更大。

找出下面代碼的優化點，而且優化它？

var data = ['string1', 'string2', 'string3'];

for(var i = 0; i < data.length; i++){

var dom = document.getElementById('list');

dom.innerHTML += '<li>' + data[i] + '</li>';

}

var dom = document.getElementById('list');

var data = ['string1', 'string2', 'string3'];

var frag = document.createDocumentFragment();

var li;

for(var i = 0; i < data.length; i++){

li = document.createElement("li");

li.innerHTML = data[i];

frag.appendChild(li); // 先放在 frag 中，最後一次性插入到 DOM 結構中。

}

listNode.appendChild(frag);

前端常見的安全問題有哪些？

XSS（跨站腳本攻擊）和CSRF（跨站請求僞造）

何爲構建工具，爲何要使用？

構建」也可理解爲「編譯」，就是將開發環境的代碼轉換成運行環境代碼的過程。開發環境的代碼是爲了更好地閱讀，而運行環境的代碼是爲了更快地執行，二者目的不同，所以代碼形式也不同，爲了達到這個目的，就要使用構建工具。

總結一下須要構建工具處理的幾種狀況：

構建工具的做用？

處理模塊化、編譯語法、代碼壓縮

何爲抓包？

PC 端的網頁，咱們能夠經過 Chrome、Firefox 等瀏覽器自帶的開發者工具來查看網頁的全部網絡請求，以幫助排查 bug。這種監聽、查看網絡請求的操做稱爲抓包。

如何抓取數據？如何使用工具來配置代理？

監聽請求：

Mac 系統下推薦使用 Charles，Windows 系統推薦使用 Fiddler

一、將安裝好 Charles 的電腦和要抓包的手機，鏈接到同一個網絡，保證 IP 段相同

二、手機設置網絡代理，（代理IP）代理到電腦的 IP，代理的端口爲8888，Charles選擇「容許」代理

三、使用手機端訪問的網頁或者聯網的請求，Charles 就能監聽到

線上的地址代理到測試環境：

一、Charles 爲例，點擊菜單欄中 Tools 菜單，二級菜單中點擊 Map Remote

二、選中 Enable Map Remote 複選框，而後點擊 Add 按鈕，添加一個代理項

三、將添加的代理項，map from 設置https://www.aaa.com/api/getuser?name=xxx，Map to設置http://168.1.1.100:8080/api/getuser?name=xxx

四、單擊OK

談談Vue的生命週期的鉤子？

beforeCreate （掛載目標（el）undefined，數據（data）undefined）
created（掛載目標（el）已被初始化，數據（data）已被初始化）
beforeMount（掛載目標（el）已被初始化，數據（data）已被初始化）模板的佔位{{message}} 被替換
mounted（掛載目標（el）已被初始化，數據（data）已被初始化）模板的佔位{{message}} 被替換

首先會判斷對象是否有el選項。若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)
render函數選項 > template選項 > outer HTML

beforeUpdate（掛載目標（el）undefined，數據（data）undefined）
updated（掛載目標（el）undefined，數據（data）undefined）
beforeDestroy（掛載目標（el）undefined，數據（data）undefined）
destroyed（掛載目標（el）undefined，數據（data）undefined）
beforeDestroy鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用。
destroyed鉤子函數在Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

前端趨勢？

簡單一致（前端開發更加規範，統一），模塊化，全棧

權限和Vue-Router的動態註冊？

什麼是restful？

要講RESTful還得講REST，REST是一種軟件架構風格、設計風格，而不是標準，它規定了一些約束條件和原則，知足這些約束條件和原則的應用程序或（架構）設計就是 RESTful。

Vue改變數據的方式？

This和model

你之前的開發流程是怎樣的？

多種開發方式結合使用，先確認大方向，根據需求用自頂向下，逐步求精方式，先定一個架構，再肯定各模塊。在各模塊開發時，採用敏捷開發，迭代。通俗的說，是先打通業務邏輯，再扣細節。

React和Vue的對比？

Vue 數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好，可是模板很容易出現運行時錯誤，難以測試，也不容易重構或分解。React Native是用JavaScript建立原生APP的庫，若是你學習了React.js，那麼你很快就能夠學會React Native。開發人員能夠構建一個web或者原生APP，他們不須要不一樣的知識體系和工具，可是學習成本較高，應用體積較大。

說一下你對原型與原型鏈的瞭解度，有幾種方式能夠實現繼承，用原型實現繼承有什麼缺點，怎麼解決？

原型鏈繼承、構造繼承、拷貝繼承

缺點：要想爲子類新增屬性和方法，必需要在new Animal()這樣的語句以後執行，不能放到構造器中，沒法實現多繼承，來自原型對象的引用屬性是全部實例共享的，建立子類實例時，沒法向父類構造函數傳參，解決用ES6的class

iframe的優缺點有哪些？

1.iframe可以原封不動的把嵌入的網頁展示出來。

2.若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。

3.網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。

4.若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

5.重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，增長了網頁下載速度)

6.方便製做導航欄，航欄在頁面位置固定不變

①iframe會阻塞主頁面的Onload事件；

② 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

③ 會影響頁面的並行加載（並行加載：同一時間針對同一域名下的請求。通常狀況，iframe和所在頁面在同一個域下面，而瀏覽器的並加載的數量是有限制的）。

解決方案：

document.getelementbyid("fram").src="a2.html"

爲何會有同源策略？

防止XSS

從發送一個url地址到返回頁面，中間發生了什麼？

一、首先，在瀏覽器地址欄中輸入url

二、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，若是緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操做。

三、在發送http請求前，須要域名解析(DNS解析)，解析獲取相應的IP地址。

四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手。

五、握手成功後，瀏覽器向服務器發送http請求，請求數據包。

六、服務器處理收到的請求，將數據返回至瀏覽器

七、瀏覽器收到HTTP響應

八、讀取頁面內容，瀏覽器渲染，解析html源碼

九、生成Dom樹、解析css樣式、js交互

十、客戶端和服務器交互

十一、ajax查詢

說下工做中你作過的一些性能優化處理？

減小頁面體積，提高網絡加載：

靜態資源的壓縮合並（JS 代碼壓縮合並、CSS 代碼壓縮合並、雪碧圖）

靜態資源緩存（資源名稱加 MD5 戳）

使用 CDN 讓資源加載更快

優化頁面渲染：

CSS 放前面，JS 放後面

懶加載（圖片懶加載、下拉加載更多）

減小DOM 查詢，對 DOM 查詢作緩存

減小DOM 操做，多個操做盡可能合併在一塊兒執行（DocumentFragment）

事件節流

儘早執行操做（DOMContentLoaded）

使用 SSR 後端渲染，數據直接輸出到 HTML 中，減小瀏覽器使用 JS 模板渲染頁面 HTML 的時間

箭頭函數有什麼特性，其this指向誰？

特性：

1.對 this 的關聯。函數內置 this 的值，取決於箭頭函數在哪兒定義，而非箭頭函數執行的上下文環境。

2.new 不可用。箭頭函數不能使用 new 關鍵字來實例化對象，否則會報錯。

3.this 不可變。函數內置 this 不可變，在函數體內整個執行環境中爲常量。

4.沒有arguments對象。更不能經過arguments對象訪問傳入參數。只能使用顯式命名或其餘ES6新特性來完成。

This：

箭頭函數沒有本身的this, 它的this是繼承而來; 默認指向在定義它時所處的對象(宿主對象),而不是執行時的對象, 定義它的時候,可能環境是window; 箭頭函數能夠方便地讓咱們在 setTimeout ,setInterval中方便的使用this

如何實現一個promise，promise的原理，以及它的兩個參數是什麼？

=newPromise(function(,){const promiseresolvereject

 // ... some code

if(/* 異步操做成功 */){

resolve();   value

}else{

reject();   error

});

.then(function(){promisevalue

 // success

},function(){error

 // failure

});

也就是說promise對象表明了一個異步操做，能夠將異步對象和回調函數脫離開來，經過then方法在這個異步操做上面綁定回調函數，使用catch方法捕獲異常

promise中第二個參數的reject中執行的方法和promise.catch()都是失敗執行的，分別這麼寫有什麼區別，什麼狀況下會兩個都同時用到？

reject中執行的方法僅能處理調用reject()時的異常，而catch同時處理聲明Promise裏的函數和then裏的異常

舉例：

auto.getData().then(function (results) {

res.send(results);

}, next);

這種寫法，next函數只會處理getData中的reject時的異常狀況。

auto.getData().then(function (results) {

res.send(results);

}).catch(next);

這種寫法，catch會捕捉到在它以前的promise鏈上的代碼拋出的異常,不只getData，還包括then()裏面。

map和set有沒有用過，map數據結構有什麼優勢？

set成員的值都是惟一的，可用for of遍歷

map各類類型的值（包括對象）均可以看成鍵，Map 結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。若是須要「鍵值對」的數據結構，Map 比 Object 更合適。

http、https、以及websocket的區別？

https協議須要到ca申請證書，通常免費證書不多，須要交費。http是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的ssl加密傳輸協議http和https使用的是徹底不一樣的鏈接方式用的端口也不同,前者是80,後者是443。http的鏈接很簡單,是無狀態的HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議要比http協議安全。

WebSocket他是爲了解決客戶端發起多個http請求到服務器資源瀏覽器必需要通過長時間的輪詢問題而生的，他實現了多路複用，他是全雙工通訊。在webSocket協議下客服端和瀏覽器能夠同時發送信息。

Websocket與HTTP比較：

相同點：

1.都是基於TCP的應用層協議。

2.都使用Request/Response模型進行鏈接的創建。

3.在鏈接的創建過程當中對錯誤的處理方式相同，在這個階段WS可能返回和HTTP相同的返回碼。

4.能夠在網絡中傳輸數據。

不一樣點：

1.WS使用HTTP來創建鏈接，可是定義了一系列新的header域，這些域在HTTP中並不會使用。

2.WS的鏈接不能經過中間人來轉發，它必須是一個直接鏈接。

3.WS鏈接創建以後，通訊雙方均可以在任什麼時候刻向另外一方發送數據。

4.WS 鏈接創建以後，數據的傳輸使用幀來傳遞，再也不須要Request消息。

5.WS的數據幀有序。

協商緩存和強緩存的區別？

說下計算機網絡的相關協議？

TCP/IP協議

H5新特性？

新增選擇器 document.querySelector、document.querySelectorAll

拖拽釋放(Drag and drop) API

媒體播放的 video 和 audio

本地存儲 localStorage 和 sessionStorage

離線應用 manifest

桌面通知 Notifications

語意化標籤 article、footer、header、nav、section

加強表單控件 calendar、date、time、email、url、search

地理位置 Geolocation

多任務 webworker

全雙工通訊協議 websocket

歷史管理 history

跨域資源共享(CORS) Access-Control-Allow-Origin

頁面可見性改變事件 visibilitychange

跨窗口通訊 PostMessage

Form Data 對象

繪畫 canvas

DOM的操做：讀，移動，移除，複製，建立

（1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)

getElementById() //經過元素Id，惟一性

自動化，代碼壓縮工具？

UglifyJS

有什麼樣的MVC、MVVM前端框架？

bootstrap、Angular、React、Vue

小程序原理？

1. 提供了JavsScript運行環境，由JavaScript編寫的業務代碼完成邏輯層的處理2. 經過數據傳輸接口（註冊Page時的data屬性及後續的setData方法調用）將邏輯層的數據傳輸給視圖層3. 視圖層由WXML語言編寫的模板經過「數據綁定」與邏輯層傳輸過來的數據merge成展示結果並展示4. 視圖的樣式控制由WXSS語言編寫的樣式規則進行配置

小程序異步？

wx.request({

url: 'test.php', //僅爲示例，並不是真實的接口地址

data: {

x: '' ,

y: ''

header: {

'content-type': 'application/json' // 默認值

success: function(res) {

console.log(res.data)

}

})

小程序如何提高應用速度？

小程序雙向綁定和Vue區別？

如何實現一個自定義組件，不一樣組件之間如何通訊的？

Vue父子組件如何通訊的？

父組件向子組件，用props選項，子組件向父組件傳遞用事件

Vue的響應式原理你知道是怎麼實現的嗎？

新窗口打開網頁，用到如下哪一個值

_blank -- 在新窗口中打開連接
_parent -- 在父窗體中打開連接
_self -- 在當前窗體打開連接,此爲默認值
_top -- 在當前窗體打開連接，並替換當前的整個窗體(框架頁)
一個對應的框架頁的名稱 -- 在對應框架頁中打開

談談document.ready和window.onload的區別

在Jquery裏面，咱們能夠看到兩種寫法:$(function(){}) 和$(document).ready(function(){})，這兩個方法的效果都是同樣的，都是在dom文檔樹加載完以後執行一個函數（注意，不是所有文件加載完），而window.onload是在dom文檔樹加載完和全部文件加載完以後執行一個函數。也就是說$(document).ready要比window.onload先執行。

Doctype和嚴格模式與混雜模式的描述？

若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了

請寫出下面的代碼執行結果：

var str = 'google';

var reg = /o/g;

console.log(reg.test(str))

最後一個不是爲true，而是false，這是由於reg這個正則有個g，即global全局的屬性，這種狀況下lastIndex就發揮做用了，由於有標誌g，因此每次匹配都從上一次匹配文本以後的第一個字符的位置開始，所以第三個是false，解決方法以下：

(function(){

const reg = /o/g;

function isHasO(str){

// reg.lastIndex = 0; 這樣就能夠避免這種狀況

return reg.test(str)

}

var str = 'google';

console.log(isHasO(str))

}())

讓你寫後端，你能寫嗎？

先後端通吃的就說沒問題，懂一點或不懂的就說寫過，若被安排到寫後端，基本的例如接口，基本的業務邏輯，緩存、基本增刪改查等沒問題，較複雜的能夠作到邊學邊開發。

xx平臺是你獨立開發的嗎？

如何實現：左側自適應，右側固定寬度？

小程序會嗎？

若是你有web前端基礎，小程序實現通常應用根本不難。若沒相關的經驗，那就先了解結構，寫個Hello World。面試時你就直接說作過簡單的Demo，實際經驗很少可是能夠邊學習邊開發，通常當作拓展技能時他不會再問你更多的問題，如果專門應聘小程序崗位，你須要瞭解得更深，這個就不用多說了。

如：

寫過簡單的Demo，瞭解它的框架，它相似MVVM，自定義的標籤語言WXML，樣式WXSS，JavaScript原生實現業務邏輯。

一段文字，第一行居中，第二行居左，如何實現？

用嵌套解決

<!-- 只有一行時居中顯示文字，多行居左顯示，最多兩行超過用省略號結尾 -->
<div class="container">
    <h2><p><em>我是單行標題居中</em></p></h2>
    <h2><p><em>我是兩行標題兩行標題兩行標題居左</em></p></h2>
    <h2><p><em>我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略我是超過兩行的標題最後點號省略省略省略</em></p></h2>
</div>

*{
    margin:0;
    padding:0;
}

h2 em {
    position: relative;
    font-style: normal;
    text-align: left;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.container{
    width:320px;
    padding:0 10px;
    margin:10px auto;
    background: #ddd;
}

.container p {
    display: inline-block;
    text-align: center;
}

h2{
    text-align: center;
    padding:10px 0;
}

計算出item元素的寬度，padding的值

.box{

font-size:14px;

}

.item{

font-size:16px;

width:1em;

padding-top:2em

}

有3個元素，分別設置他們的font-size爲0、 6 、12，在Chrome瀏覽器看到的字體實際的size爲？

谷歌下 css設置字體大小爲12px及如下時，顯示都是同樣大小，都是默認12px;

請計算item元素的padding、margin值

.box{

width:100px

}

.item{

width:80px;

height:80px;

padding-top:20%;

margin-top:20%

}

請解釋什麼是閉包？

請解釋什麼叫作原型鏈，實現繼承有哪些方法？

請解釋call、apply的做用，他們之間有什麼區別？

什麼是XSS、CSRF，如何防止？

請使用JS實現斐波那契數列？

請解釋var let const的區別？

請解釋如下代碼的最終輸出結果？請使用ES6解決？（不能使用閉包）

const arr=[10,22,3,41]

for(var i=0;i<arr.length;i++){

setTimeout(()=>{

console.log('index:'+i+',elemnt:'+arr[i])

},3000)

}

setTimeout是個異步定時函數，js是單線程，因此就算延時爲0，它也是要等到for循環執行完了，纔到它執行，每執行一次for語句就會就會產生一個異步執行，放在等待隊列裏，因此最後執行時就是輸出4個：

index:4,elemnt:undefined

傳統方法：閉包

不太可行

採用當即執行函數

const arr=[10,22,3,41]

for(var i=0;i<arr.length;i++){

（function(i){

setTimeout(()=>{

console.log('index:'+i+',elemnt:'+arr[i])

},3000)

})(i);

}

const arr=[10,22,3,41]

for(let i=0;i<arr.length;i++){

setTimeout(()=>{

console.log('index:'+i+',elemnt:'+arr[i])

},3000)

}

let 爲代碼塊的做用域，因此每一次 for 循環，console.log(i); 都引用到 for 代碼塊做用域下的i，由於這樣被引用，因此 for 循環結束後，這些做用域在 setTimeout 未執行前都不會被釋放。

下面是var帶來的不合理場景

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  }
}
arr[5]() //10,a[5]輸出f(){console.log(i);},後面加個括號表明執行f()

在上述代碼中，變量i是var聲明的，在全局範圍類都有效，因此用來計數的循環變量泄露爲全局變量。因此每一次循環，新的i值都會覆蓋舊值，致使最後輸出都是10。

而若是對循環使用let語句的狀況，那麼每次迭代都是爲x建立新的綁定代碼以下：

var arr = [];
for (let i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  }
}
arr[5]() //5,a[5]輸出f(){console.log(i);},後面加個括號表明執行f()

【拓展】

固然，除了這種方式讓數組找中的各個元素分別是不一樣的函數，咱們還能夠採用ES5中的閉包和當即函數兩種方法。

一、採用閉包

function showNum(i) {
  return function () {
    console.log(i)
  }
}
var a = []
for (var i = 0; i < 5; i++) {
  a[i] = showNum(i)(); //循環輸出1,2,3,4
}

二、採用當即執行函數

var a = []
for (var i = 0; i < 5; i++) {
  a[i] = (function (i) {
    return function () {
      console.log(i)
    }
  })(i)
}
a[2](); //2

把如下代碼使用兩種方法，依次輸出0-9

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func(); //輸出十個10
})

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func(); //輸出十個10
})

方法一：使用當即執行函數

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push((function (value) {
    return function () {
      console.log(value)
    }
  }(i)))
}
funcs.forEach(function (func) {
  func(); //依次輸出0-9
})

var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push((function (value) {
    return function () {
      console.log(value)
    }
  }(i)))
}
funcs.forEach(function (func) {
  func(); //依次輸出0-9
})

方法二：使用閉包

function show(i) {
  return function () {
    console.log(i)
  }
}
var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(show(i))
}
funcs.forEach(function (func) {
  func(); //0 1 2 3 4 5 6 7 8 9
})

function show(i) {
  return function () {
    console.log(i)
  }
}
var funcs = []
for (var i = 0; i < 10; i++) {
  funcs.push(show(i))
}
funcs.forEach(function (func) {
  func(); //0 1 2 3 4 5 6 7 8 9
})

方法三：使用let

var funcs = []
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func(); //依次輸出0-9
})

var funcs = []
for (let i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}
funcs.forEach(function (func) {
  func(); //依次輸出0-9
})

其餘知識點：forEach() 方法用於調用數組的每一個元素，並將元素傳遞給回調函數。

setTimeout(function () {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function () {
  console.log(4);
});
console.log(5);

首先，先碰到一個 setTimeout，因而會先設置一個定時，在定時結束後將傳遞這個函數放到任務隊列裏面，所以開始確定不會輸出 1 。 

而後，是一個 Promise，裏面的函數是直接執行的，所以應該直接輸出 2 3 。 

而後，方法指定的回調函數，將在當前腳本全部同步任務執行完纔會執行（Promise 構造函數是同步執行的，promise.then 中的函數是異步執行的）。 所以，應當先輸出 5，而後再輸出 4 ， 最後在到下一個 tick，就是 1 。then

分析下列程序代碼，得出運行結果，解釋其緣由？

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })


運行結果：
1  2

緣由：
promise 能夠鏈式調用。提起鏈式調用咱們一般會想到經過 return this 實現，不過 Promise 並非這樣實現的。promise 每次調用 .then 或者 .catch 都會返回一個新的 promise，從而實現了鏈式調用。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})

運行結果：
once
success 1001
success 1001

緣由：
promise 的 .then 或者 .catch 能夠被調用屢次，但這裏 Promise 構造函數只執行一次。或者說 promise 內部狀態一經改變，而且有了一個值，那麼後續每次調用 .then 或者 .catch 都會直接拿到該值。

參考：https://www.cnblogs.com/fengxiongZz/p/8191503.html

請使用正則驗證小於2000的數字？

let re=/^([1-9]{0,3}|(1)\d{3}|2000)$/g

給定兩個數，求這兩個數的和，不能夠直接使用這兩個相加？

//方法1
function add() {
    if (arguments.length === 1) {
        return arguments[0];
    }
    else {
        for (var i = 0, result = 0; i < arguments.length; i++) {
            result += arguments[i];
        }
         return result
    }
}


console.log(add(1,1,1))

//方法2
function sum() {
    var x = 0;
    for (var i = 0; i < arguments.length; ++i) {
        x += arguments[i];
    }
    return x;
}
console.log(sum(1,1,2))

請說明你的代碼是如何命名JS、CSS的？

BEM

get的缺點？post的缺點？二者區別

get安全性低（所發送的數據是 URL 的一部分，數據會被緩存）

傳送數據量小（數據量限制，各瀏覽器不一樣，其中Chrome最大長度8182byte）

（http協議並未規定get和post的長度限制，get的最大長度限制是由於瀏覽器和web服務器限制了URL的長度）

（1）post更安全（不會做爲url的一部分，不會被緩存、保存在服務器日誌、以及瀏覽器瀏覽記錄中）
（2）post發送的數據更大（get有url長度限制）
（3）post能發送更多的數據類型（get只能發送ASCII字符）
（4）post比get慢（缺點）
（5）post用於修改和寫入數據，get通常用於搜索排序和篩選之類的操做（淘寶，支付寶的搜索查詢都是get提交），目的是資源的獲取，讀取數據

更多，見：

http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

若是你和你團隊成員CSS命名有衝突，怎麼解決？

請本身實現一個promise？

ES6

       var fn=function(resolve, reject){
          console.log('begin to execute!');
          var number=Math.random();
          if(number<=0.5){
            resolve('less than 0.5');
        }else{
            reject('greater than 0.5');
        }
    }

    var p=new Promise(fn);
    p.then(function(data){
      console.log('resolve: ', data);
  }, function(data){
      console.log('reject: ', data);
  })

6、分析下列程序代碼，得出運行結果，解釋其緣由

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

運行結果及緣由

運行結果
then: Error: error!!!
    at Promise.resolve.then (...)
    at ...

緣由
.then 或者 .catch 中 return 一個 error 對象並不會拋出錯誤，因此不會被後續的 .catch 捕獲，須要改爲其中一種：
return Promise.reject(new Error('error!!!'))
throw new Error('error!!!')

由於返回任意一個非 promise 的值都會被包裹成 promise 對象，即 return new Error('error!!!') 等價於 return Promise.resolve(new Error('error!!!'))。

運行結果
then: Error: error!!!
    at Promise.resolve.then (...)
    at ...

緣由
.then 或者 .catch 中 return 一個 error 對象並不會拋出錯誤，因此不會被後續的 .catch 捕獲，須要改爲其中一種：
return Promise.reject(new Error('error!!!'))
throw new Error('error!!!')

由於返回任意一個非 promise 的值都會被包裹成 promise 對象，即 return new Error('error!!!') 等價於 return Promise.resolve(new Error('error!!!'))。

7、分析下列程序代碼，得出運行結果，解釋其緣由

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

運行結果及緣由

運行結果
TypeError: Chaining cycle detected for promise #<Promise>
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

緣由
.then 或 .catch 返回的值不能是 promise 自己，不然會形成死循環。

運行結果
TypeError: Chaining cycle detected for promise #<Promise>
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

緣由
.then 或 .catch 返回的值不能是 promise 自己，不然會形成死循環。

8、分析下列程序代碼，得出運行結果，解釋其緣由

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

運行結果及緣由

運行結果
1

緣由
.then 或者 .catch 的參數指望是函數，傳入非函數則會發生值穿透。

運行結果
1

緣由
.then 或者 .catch 的參數指望是函數，傳入非函數則會發生值穿透。

9、分析下列程序代碼，得出運行結果，解釋其緣由

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

運行結果及緣由

運行結果
fail2: Error: error
    at success (...)
    at ...

緣由
.then 能夠接收兩個參數，第一個是處理成功的函數，第二個是處理錯誤的函數。.catch 是 .then 第二個參數的簡便寫法，可是它們用法上有一點須要注意：.then 的第二個處理錯誤的函數捕獲不了第一個處理成功的函數拋出的錯誤，然後續的 .catch 能夠捕獲以前的錯誤。

運行結果
fail2: Error: error
    at success (...)
    at ...

緣由
.then 能夠接收兩個參數，第一個是處理成功的函數，第二個是處理錯誤的函數。.catch 是 .then 第二個參數的簡便寫法，可是它們用法上有一點須要注意：.then 的第二個處理錯誤的函數捕獲不了第一個處理成功的函數拋出的錯誤，然後續的 .catch 能夠捕獲以前的錯誤。

ES5

https://www.cnblogs.com/malingyang/p/6535805.html

有了解Vue數據綁定的原理嗎？

這道題，面試官可以當着你面寫出來的，沒幾個。他們只是知道原理而已，原理涉及觀察者模式，我當時回答這個答案時，面試官會抓着問我，觀察者模式是什麼？會被連着問出來不少東西，若你不是應聘高級開發或CTO，那麼Vue原理或拆Vue的輪子，你能夠說最近正在學習這方面的知識，畢竟初級開發，會用就夠了。

瞭解touch事件嗎？

click事件的300ms延遲問題。

2007年第一代iphone發佈，因爲那個年代全部的網頁都是針對大屏的pc端設計的，iphone的Safari瀏覽器爲了讓用戶瀏覽網頁的時候能夠瀏覽到整個網頁，把viewport設置爲960px(參考前面的文章)，好是好，可是因爲縮放了整個頁面，致使內容變得很是小，視力6.0的都不必定看得清楚。

因此Safari瀏覽器自帶了一個當時看起來至關酷的一個功能：雙擊縮放。你雙擊頁面的時候，瀏覽器會智能的縮放當前頁面到原始大小。

雙擊縮放的原理就是，當你click一次以後，會通過300ms以後檢測是否再有一次click，若是有的話，就會縮放頁面。不然的話就是一個click事件。

因此，當你想執行click操做的時候，就感受到了」卡頓」。若是點擊以後100ms以後沒有反應，基本就有卡頓的感受。
dblclick事件失效

因爲雙擊縮放的存在，pc端的dblclick事件也失效了。

隨着觸屏設備的普及，w3c爲移動端web新增了touch事件。

最基本的touch事件包括4個事件：

touchstart

當在屏幕上按下手指時觸發
touchmove

當在屏幕上移動手指時觸發
touchend

當在屏幕上擡起手指時觸發
touchcancel

當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操做，即觸發touchcancel。通常會在touchcancel時暫停遊戲、存檔等操做。

注意：必定是先要觸發touchstart事件，再有可能觸發 touchmove 事件。

jQuery的點穿問題？

（點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失後發現觸發了按鈕下面元素的click事件，蒙層的關閉按鈕綁定的是touch事件，而按鈕下面元素綁定的是click事件，touch事件觸發以後，蒙層消失了，300ms後這個點的click事件fire，event的target天然就是按鈕下面的元素，由於按鈕跟蒙層一塊兒消失了）

不要混用touch和click，只用touch，最簡單的解決方案，完美解決點擊穿透問題

（你們都知道移動端的click事件會延遲300ms觸發，這時你們可使用zepto的touch模塊，裏面定義了一個tap事件，經過綁定tap事件，能夠實現點擊當即觸發的功能）

參考：

https://blog.csdn.net/alex8046/article/details/52299837

https://blog.csdn.net/u012468376/article/details/72808761

什麼是觀察者模式？

平時有遇到什麼兼容性問題？

移動端點透問題

案例以下：

點頭事件測試

www.baidu.com

div是絕對定位的蒙層,而且z-index高於a。而a標籤是頁面中的一個連接，咱們給div綁定tap事件：