整理1

一：頁面性能優化：
1，減小http請求，資源的合併與壓縮，恰當的緩存，不濫用float，雪碧圖代替圖片，異步加載。減小dom節點，
二： 數組的深淺拷貝
1，假設B複製了A，當修改A時，看B是否會發生變化，
若是B也跟着變了，說明這是淺拷貝，。若是B沒變，那就是深拷貝。
2，基本數據類型有哪些，number,string,boolean,null,undefined五類。
引用數據類型：對象，數組，函數。
3，如何深拷貝？
借用JSON對象的parse和stringify。
借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )；
let a=[0,1,[2,3],4],

b=$.extend(true,[],a);

a[0]=1;
a2=1;
console.log(a,b);
4，使用場景？
但多人開發狀況下，你是沒辦法明確這堆數據是否有其它功能也須要使用， 直接修改可能會形成隱性問題，深拷貝能幫你更安全安心的去操做數據，
根據實際狀況來使用深拷貝，

三： 先後端分離的原理
1，原始人時代：
發佈，須要用eclipse把代碼打成一個war包，而後把這個war包發佈到生產環境下的web容器裏。這時候先後端代碼都在這個war包裏，html，js，css，各類第三方庫等。這樣服務器壓力會很大，頁面中的全部請求都要經過這個服務器，若是同時不少人訪問這個網站速度就會很慢。一旦服務器出現情況，先後端一塊兒玩完，用戶體驗級差。。
2， 先後端分離的優點
1，能夠實現正真的先後端解耦，前端服務器放 css，js，圖片等一系列資源，前端服務器負責控制頁面引用，跳轉，路由。前端頁面異步調用後端的接口。加快總體響應速度。
3，減小後端服務器的開發/負載壓力。除了接口外的http請求所有轉到 前端nginx上。
前端大量的組件化代碼 能夠抽出來複用，組件化開發提高效率。
前端與後端是兩個項目。放在兩個不一樣的服務器，須要獨立部署。

四：同步和異步的區別
1，javascript語言是一門「單線程」的語言，
其實同步和異步，
不管如何，作事情的時候都是隻有一條流水線（單線程），
同步和異步的差異就在於這條流水線上各個流程的執行順序不一樣。
最基礎的異步是setTimeout和setInterval函數，

五：異步promise
1,本身身上有all、reject、resolve這幾個眼熟的方法，原型上有then、catch等一樣很眼熟的方法。
2,一： 優勢和缺點
能夠將異步操做以同步操做流程的方式表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。
3,使用
新建new一個promise，傳入resove和reject兩個參數分別表明成功失敗的方法。

六：經常使用的ES6
1，let和const 只在聲明指令的塊級做用域內有效。
let所聲明的變量能夠改變，const聲明常量，不能改變
2，Object.assign()方法用於對象的合併
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
3，promise對象
4，import 導入模塊
5，字符串拼接
Es6的這種新的「字符串拼接」方法比較簡單，沒有繁瑣的加號和引號，只須要在所須要的字符串「邊界」加上``便可。

var name = 'Datura';
var age = 18;
var sex = 'nü';
var hobby = '敲代碼';
var str1 = `我是${name}，今年${age}歲，性別${sex}的了，愛好${hobby}`; //注意此處有兩個「 `` 」
var str2 = '我是'+name+'，今年'+age+'歲，性別'+sex+'，愛好'+hobby+''; //這個是原來的寫法
alert(st1r);

6，map對象
let map = new Map();
map.set('a','apple');
map.set('b','banana');
console.log(map); // Map {"a" => "apple", "b" => "banana"}
7，for in循環， for of循環（不能循環json數據）
8，箭頭函數

var show = function(){
    alert(12);  
};
show();   // 12
const show = () =>{
    alert(12);  
};
show();  // 12 
//我的理解：這裏將function關鍵字去掉而後在「()」後面加一個「=>」

七：app裏面的支付功能，分享功能
（能夠查看微信開發文檔）
1，商戶APP調用微信提供的SDK調用微信支付模塊，
商戶APP會跳轉到微信中完成支付，支付完後跳回到商戶APP內，最後展現支付結果。
步驟：
1，用戶在商戶APP中選擇商品，提交訂單，選擇微信支付。
建立訂單接口須要的參數：
(1) 交易金額
(2) 交易類型trade_type
JSAPI--JSAPI支付（或小程序支付）、NATIVE--Native支付、APP--app支付，MWEB--H5支付，不一樣trade_type決定了調起支付的方式，請根據支付產品正確上傳
(3) 貨幣類型
境內商戶號僅支持人民幣
CNY：人民幣
(4) 換算成北京時間爲2014年11月11日8時0分0秒。
(5)部分系統取到的值爲毫秒級，須要轉換成秒(10位數字)。
(6)商戶訂單號
。微信支付要求商戶訂單號保持惟一性
(7)
2，商戶後臺收到用戶支付單，調用微信支付統一下單接口。
（須要傳的參數都有：appid， 隨機字符串，不長於32位，簽名sign，訂單號，交易時間，訂單金額，）
3，統一下單接口返回正常的prepay_id，生成簽名
4，掉起微信支付，
5，返回支付結果。
分享功能：
1，先引入weixin.js。 而後經過config接口注入權限驗證配置

wx.config({
debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
appId: '', // 必填，公衆號的惟一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

});
經過ready接口處理成功驗證，

wx.ready(function(){
// config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

});

八： html5的新特性
1，繪畫的canvas元素
2，video和audio元素
3，本地離線存儲localStorage 和 sessionStorage
4,新的特殊內容元素，好比 article、footer、header、nav、section
5,
(1) localStorage和sessionStorage都是用來存儲客戶端臨時信息的對象。
(2) cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
(3) cookie不是很安全，考慮到安全應當使用session
(4) session會在必定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie。
(5) 建議將登陸信息等重要信息存放爲session，其餘信息若是須要保留，能夠放在cookie中
localStorage - 用於長久保存整個網站的數據，保存的數據沒有過時時間，直到手動去除。
sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據。

6，表單新增了輸入類型和驗證
<datalist> 元素規定輸入域的選項列表。（輸入框底部有提示功能）
type輸入類型Number,placeholder默認值，required必填，min 和 max 屬性，設置元素最小值與最大值。
height 和 width 屬性，用於 image 類型的 <input> 標籤的圖像高度和寬度。

九：攔截器
統一處理錯誤及配置請求信息
登錄攔截設置
路由攔截：
1，
1，在定義路由的時候就須要多添加一個自定義字段，
用於判斷該路由的訪問是否須要登陸。若是用戶已經登陸，則順利進入路由， 不然就進入登陸頁面。

{
    path: '/repository',
    name: 'repository',
    meta: {
        requireAuth: true,  // 添加該字段，表示進入這個路由是須要登陸的
    },
    component: Repository
},

2，用vue-router提供的鉤子函數beforeEach()對路由進行判斷。

router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {  // 判斷該路由是否須要登陸權限
    if (store.state.token) {  // 經過vuex state獲取當前的token是否存在
        next();
    }
    else {
        next({
            path: '/login',
            query: {redirect: to.fullPath}  // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
        })
    }
}
else {
    next();
}

})

第二步：攔截器
要想統一處理全部http請求和響應，就得用上 axios 的攔截器。經過配置http response inteceptor，當後端接口返回401 Unauthorized（未受權），讓用戶從新登陸。

// http request 攔截器
axios.interceptors.request.use(
config => {
    if (store.state.token) {  // 判斷是否存在token，若是存在的話，則每一個http header都加上token
        config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
},
err => {
    return Promise.reject(err);
});

// http response 攔截器
axios.interceptors.response.use(
response => {
    return response;
},
error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息並跳轉到登陸頁面
                store.commit(types.LOGOUT);
                router.replace({
                    path: 'login',
                    query: {redirect: router.currentRoute.fullPath}
                })
        }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的錯誤信息
});

十：跨域問題
1，jsonp方法
只需配置一個dataType:'jsonp'，就能夠發起一個跨域請求。
2， window.name + iframe跨域
3，postMessage跨域
用法：postMessage(data,origin)方法接受兩個參數
data： html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。
origin： 協議+主機+端口號，也能夠設置爲"*"，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。
4，WebSocket協議跨域
原生WebSocket API使用起來不太方便，咱們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。
<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socke...;></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 鏈接成功處理
socket.on('connect', function() {
// 監聽服務端消息
socket.on('message', function(msg) {
    console.log('data from server: ---> ' + msg); 
});

// 監聽服務端關閉
socket.on('disconnect', function() { 
    console.log('Server socket has closed.'); 
});

});

document.getElementsByTagName('input')[0].onblur = function() {

socket.send(this.value);

};
</script>
5，

十一：什麼叫優雅降級和漸進加強？
1，漸進加強：
先根據低版本進行構建頁面，保證最基本的功能。而後再根據高級瀏覽器進行效果，達到更好的用戶體驗。
2，優雅降級：
一開始就構建完整的功能，而後在根據低版本瀏覽器兼容。

十二：對前端界面工程師這個職位是怎麼樣理解的？
1，快速高效精準的完成效果圖，注重用戶體驗。
2，與團隊成員，UI，產品經理的溝通。
3，寫出優美的代碼格式。註釋
4，優化頁面

十三：JavaScript 的同源策略
1，同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

十四：電商網站若是有大量圖片，怎麼去優化界面？
1，圖片懶加載，滾動到位置再發送請求
2，rem，em，px的區別
使用它們的目的就是爲了適應各類手機屏幕。
em：而em是繼承父元素的字體
相對長度的單位，用來設置文本的字體尺寸的，相對於當前對象內文本的尺寸，
以上實例em是相對於父級元素div的，div設置的字體大小爲30px，因此0.5em計算後的字體大小爲：30px x 0.5 = 15px
3，rem是相對於html元素字體大小的設置。字體大小是html的值 * 倍數。
(1) em:

十五：JQUERY篇章
1，選擇器：
CSS 選擇器，ID選擇器，標籤選擇器，屬性選擇器$("[href]") 選取全部帶有 href 屬性的元素。
attr()，$("button").click(function(){
alert($("#w3s").attr("href"));
});
2，show(), hide(),fadeIn(), fadeOut(),
3,操做DOM
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容
before() - 在被選元素以前插入內容
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

十六： css篇，定位問題position
1，relative ,相對定位。
若是元素添加了relative，設置偏移量，元素會有移動可是所佔據的那個位置空間依然還在，也不會擠掉其餘的元素。
2，position:absolute，絕對定位。
元素加了絕對定位，在頁面中是不佔據空間的，他會浮動起來。他會相對於他的父元素定位。
若是它的父元素沒有設置定位，那麼就得看它父元素的父元素是否有設置定位 ，若是仍是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設置了除static定位以外的定位（好比position:relative）的第一個祖先元素，若是全部的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文檔body來定位（並不是窗口,相對於窗口定位的是fixed）
3，fixed相對於瀏覽器窗口進行定位。
4， 1.id選擇器（ # myid）

2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）

5，CSS3新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。
6，css3動畫
(1) @keyframes規則定義動畫
設置動畫的名稱, 對關鍵幀進行操做。
動畫至少須要兩個關鍵幀：一個from關鍵幀，它是咱們動畫的起始狀態，一個to幀，它是它的結束狀態。在每一個單獨的關鍵幀塊中，咱們能夠定義要設置動畫的屬性：

十七：瀏覽器兼容性問題
1，css透明，
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
2，元素水平居中問題
FF: margin:0auto;
IE: 父級{ text-align:center; }
3，頁面的最小高度：
(1)IE不識別min,能夠經過js的判斷來添加
4，圖片下有空隙產生
img爲display:block
5，

十八： 移動端兼容性問題
1，防止手機中頁面放大和縮小
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2，上下拉動滾動條時卡頓、慢

body
{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

3，iphone及ipad下輸入框默認內陰影

element
{
    -webkit-appearance:none;
}

4，click的300ms延遲問題
方案一：禁用縮放，
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
方案二：安裝第三方依賴包。
npm install fastclick ---save
(2)在入口文件main.js中引入並使用，方法以下：

import fastClick from 'fastclick'
fastClick.attach(document.body)

5, 響應式圖片
解決方法：讓圖片最大隻能是本身的寬度

img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

6，輸入框的問題：

var oHeight = $(document).height(); //瀏覽器當前的高度   
$(window).resize(function(){
    if($(document).height() < oHeight){
     
    $("#footer").css("position","static");
}else{
     
    $("#footer").css("position","absolute");
}

});
7，Input 的placeholder會出現文本位置偏上的狀況
input 的placeholder會出現文本位置偏上的狀況：PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決是設置line-height：normal

十九：flex彈性佈局
1，使用flex盒模型來實現兩欄佈局，左側固定200px,右側自適應寬度
父元素: display:flex
子元素1: width:200px; /固定寬度/
子元素2: flex: 1; /這裏設置爲佔比1，填充滿剩餘空間/
2,容器的屬性6個：
(1) flex-direction決定主軸的方向（即項目排列的方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。
(2) flex-wrap屬性
默認狀況下，項目都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap: 不換行
wrap: 換行，第一行在上方。
wrap-reverse: 換行，第一行在上方
(3) flex-flow:
是flex-direction和flex-wrap的簡寫形式，默認值row, nowrap
(4) justify-content屬性
定義了項目在主軸上的對齊方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}  
//flex-start左對齊， flex-end右對齊，  center居中對齊， space-between兩端對齊中間間隔相等
//space-around:每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

(5) align-items屬性
定義項目在縱向對齊方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

(6)align-content屬性
定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around |         stretch;
}

3,項目屬性，不經常使用

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4，flex屬性
是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

二十：vuex
vuex就是把組件的共享狀態提取出來，以一個全局方式管理。
任何組件均可以獲取狀態或者觸發行爲。vuex就是專門爲vue設計的狀態管理庫。
1，state
定義初始化狀態變量。
改變state中的狀態惟一方式就是顯示的提交(commit) mutation.
2，getters
能夠監聽state裏面值的變化。有時候咱們須要從state中派生出一些狀態
，例如對列表過濾。相似於計算屬性。
能夠以屬性的形式訪問這些值
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
3，mutation
改變state中狀態的惟一方法就是顯示提交mutations。是同步的
4，action方法
action相似於mutation不一樣在於：
(1) action提交mutation，而不是直接變動狀態
(2) action能夠包含任意異步操做。
使用方式：

const mutations ={
      increment(state){
        return state.count++;
      }
   };
   const actions = {
      increment(context){
        context.commit('increment');
      }
   };
//在組件中使用 this.$store.dispatch('xxx') 分發 action

二十一：移動端打包問題
打包安卓apk過程：
(1)，基本依賴環境
nodejs環境
jdk(java的開發基礎類庫，由於 android )
SDK(安卓開發集成包，集成了安卓的開發工具，插件，API等等)
(2)，環境配置
nodejs
jdk (無需配置環境變量)
sdk (須要配置環境變量)
gradle安裝
安裝ionic和cordova
全局安裝ionic和cordova（IONIC是UI，cordova負責打包成apk,而且能夠調用原生安卓的各類API）
(3)打包
ionic cordova build android --release
如若你聰慧的雙眼發現以下字眼：Build Success! 說明你已經成功打包了。耐心等待，命令行結束會提示你apk的生成位置
給包生成簽名
2，移動端Mint UI。基於 Vue.js 的移動端組件庫
(1)包案豐富的css和js組件。

二十二： js篇基礎
1，事件委託
把綁定到子元素的事件 委託到父元素上，原理就是事件冒泡

事件委託的優勢？
(1) 由於每個函數都是一個對象，對象越多，內存佔有率就越大，天然性能就越差，使用事件委託，只須要在其父元素中定義一個事件就能夠。
(3) 減小事件註冊，好比在ul上代理全部li的click事件就很是棒

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>// ...... 表明中間還有未知數個 li。
若是給每一個li列表項都綁定一個函數，那對內存的消耗是很是大的，
所以較好的解決辦法就是將li元素的點擊事件綁定到它的父元素ul身上，執行事件的時候再去匹配判斷目標元素。

能夠實現當新增子對象時無需再次對其綁定（動態綁定事件）

實現方式用：event.target能夠斷定當前點擊的目標對象

2， 適合事件委託的事件有：

click，
mousedown，
mouseup，
keydown，
keyup，
keypress

3， this做用域問題
(1) this老是指向調用它所在方法的對象。
this是在函數生成的時候，自動生成的一個內部對象，只能在函數內部使用。
(2) 全局函數調用
this表明的全局對象window。
(3) 對象方法的調用
若是函數做爲對象的方法調用，this指向的是這個上級對象，即調用方法的對象。
(4) 構造函數的調用
構造函數中的this指向新建立的對象自己。

3，冒泡排序
(1) 原理：
依次比較相鄰的兩個值，若是後面的比前面的小，則將小的元素排到前面。依照這個規則進行屢次而且遞減的迭代，直到順序正確
(2) 實現方法：

4，閉包
(1) 如何從外部讀取局部變量？
在函數的內部，再定義一個函數。

function f1(){
       n = 999;
       function f2(){
           console.log(n);　　//999
       }
   }

在上面的代碼中，函數f2就被包括在函數f1內部，

這時f1內部的全部局部變量，對f2都是可見的。可是反過來就不行，
f2內部的局部變量對f1就是不可見的。
這就是javascript語言特有的‘鏈式做用域’結構(chain scope)，子對象會一級一級地向上尋找全部父對象的變
量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立。

既然f2能夠讀取f1中的局部變量，那麼只要把f2做爲返回值，咱們就能夠在f1外部讀取它的內部變量了。

function f1(){
       n = 999;
       function f2(){
           console.log(n);
       }
       return f2;

   }
   var result = f1();　　//返回的是f2函數
   result();　　//999

(2) 閉包的概念：
上一節代碼中的f2函數就是閉包。
閉包能夠簡單理解成：
定義在一個函數內部的函數，
本質上閉包就是將函數內部和函數外部鏈接的一座橋樑。

(3)閉包的用途：
一個是前面提到的能夠讀取函數內部的變量
另外一個就是讓這些變量的值始終保持在內存中。

function f1(){
       var n = 999;
       nAdd = function(){
           n += 1;
       }
       function f2(){
           console.log(n);
       }
       return f2;
   }
   var result = f1();
   result();　　//從函數外部經過閉包f2獲取到函數f1內部局部變量的值
   nAdd();　　//從函數外部經過閉包修改局部變量n的值
   result();　　//再次經過閉包f2獲取到函數f1內部局部變量的值  
   //console.log出的值是， 999， 1000

(4) 使用閉包的注意點：
1>因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法時，在退出函數以前，將不使用的局部變量所有刪除。

2>閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象(object)使用，把閉包看成它的公用方法，把內部變量看成它的私有屬性，這時必定要當心，不要隨便改變父函數內部變量的值。

5，JS繼承
(1) 屬性繼承
就是將對象的成員複製一份給須要繼承的對象
存在問題：
父構造函數的原型對象和子構造函數的原型對象上的成員有共享問題
只能繼承父構造函數的原型對象上的成員, 不能繼承父構造函數的實例對象的成員
(2) 原型鏈繼承
prototype 英[ˈprəʊtətaɪp]
即 子構造函數.prototype = new 父構造函數()

(3) 借用構造函數

// 建立父構造函數
function Person(name){
  this.name = name;
  this.freinds = ['小王', '小強'];
  this.showName = function(){
     console.log(this.name);
  }
}
// 建立子構造函數
 function Student(name){
  // 使用call借用Person的構造函數
  Person.call(this, name);
 }
 // 測試是否有了 Person 的成員
 var stu = new Student('Li');
 stu.showName(); // Li
 console.log(stu.friends); // ['小王','小強']

使用call和apply借用其餘構造函數的成員, 能夠解決給父構造函數傳遞參數的問題, 可是獲取不到父構造函數原型上的成員.也不存在共享問題

(4) 組合繼承 (構造函數 + 原型式繼承)
(5) 借用構造函數 + 深拷貝

function Person(name,age){
    this.name = name;
    this.age = age;
    this.showName = function(){
        console.log(this.name);
    }
}
Person.prototype.friends = ['小王','小強','小王八'];
function Student(name,25){
    // 借用構造函數(Person)
    Person.call(this,name,25);
}
// 使用深拷貝實現繼承
deepCopy(Student.prototype,Person.prototype);
Student.prototype.constructor = Student;

6：BOM
(1) BOM的核心對象是window，它表示瀏覽器的一個實例。
(2) 全局做用域：
在全局做用域中生成的變量，函數都是window的屬性和方法。
全局變量與在window對象上直接定義的屬性仍是有一些差異，
全局變量不能經過delete刪除，window對象能夠。
(3) window對象有如下方法：

open 
close 
alert 
setTimeout 
clearTimeout 
setInterval 
clearInterval 
moveBy 
moveTo 
resizeBy 
resizeTo 
scrollBy 
scrollTo 
find 
back 
forward 
home 
stop 
print 
blur 
focus 
handleEvent 
releaseEvent 
routeEvent 
scroll

(4) http狀態碼
200：請求成功
404：請求的資源不存在
500：內部服務器錯誤
5XX服務端錯誤：
501,502,503,504,505
4XX客戶端錯誤
401，402，403
304： 對客戶端有緩存的狀況下，服務端的一種響應。
403： 表示對請求資源的訪問被服務器拒絕
401： 表示發送的請求須要有經過 HTTP 認證的認證信息

7：數組的哪些方法會改變原數組？那些不會？
(1) 變原數組：

pop()   刪除最後一個元素並把長度減一
shift() 數組的第一個元素被刪除
shift(0,1) 0: 開始的索引，1：要刪除的個數。
push()  添加元素

(2) 不改變原數組

concat() 鏈接多個數組，返回新的數組
slice()   
foreach()

二十三： vue篇1，簡述Vue的響應式原理