整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
現象一：先定義在使用，正常執(zhí)行可以理解
var num = 1; console.log(num);//1
現象二：先使用，在定義，報錯也能接受
console.log(num);//報錯 num = 1;
現象三：先使用在定義，居然沒有報錯？為什么輸出undefined？
console.log(num);//undefined; var num = 1;
現象一：先定義函數，在使用。能夠理解
function sum(){ console.log(1);
}
sum(); 現象二：先使用，在定義。也能正常執(zhí)行？？？？？ sum();
function sum(){
console.log(1);
}
JavaScript解析過程分為兩個階段：
一個是編譯階段，另外一個就是執(zhí)行階段。
編譯階段：編譯階段就是我們常說的JavaScript預解析（預處理）階段，在這個階段JavaScript解釋器將完成把JavaScript腳本代碼轉換到字節(jié)碼。
執(zhí)行階段：在編譯階段JavaScript解釋器借助執(zhí)行環(huán)境把字節(jié)碼生成機械碼， 并頁序執(zhí)行。
以上文言文翻譯成漢語是： js代碼執(zhí)行分兩個階段：首先做預解析，然后代碼從上到下執(zhí)行。 那么，預解析都做了些什么呢？
Javascript在預解析時，在當前的作用域中,js代碼執(zhí)行之前瀏覽器首先會默認把所有帶var和function的進行提前的聲明或者定義.
var num = 1;
sum();
function sum(){
console.log(num);//1
}
以上代碼執(zhí)行時：
1.預解析：查找var，發(fā)現了變量num，按照預解析的規(guī)則，變量預解析只聲明不賦值。相當于把num變量放在了全局的小倉庫中。告訴javascript代碼，現在程序中有一個全局變量num，但是此時num并沒有賦值即num此時的值為undefined。
查找function關鍵字，發(fā)現了函數sum，按照預解析的規(guī)則，聲明并定義。相當于把sum函數放在全局 的小倉庫中，并且賦值了。
2.執(zhí)行：代碼從上到下執(zhí)行，預解析過的直接略過。第一行 var num=1;已經預解析過num，所以這句只執(zhí)行 賦值操作。第二行 sum(); 執(zhí)行sum函數，js會到當前作用域的小倉庫中查找，預解析過sum函數，那么 函數執(zhí)行，函數執(zhí)行console.log(num);變量num在當前作用域的小倉庫中沒有，那么去上級作用域查 找，發(fā)現上級作用域的小倉庫中有預解析過num變量，并且變量的值在第一行代碼執(zhí)行時已經被賦值為 1，所以console.log(num);輸出1
任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問范圍，即作用域控制著變量與函數的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。
在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創(chuàng)建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。
function add(num1,num2){
var sum = num1+ num2;
return sum;
}
在函數add創(chuàng)建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變量，如下圖所示（注意：圖片只例舉了全部變量中的一 部分）
作用域鏈
函數add的作用域將會在執(zhí)行時用到。例如執(zhí)行如下代碼：
var total = add(5,10);
執(zhí)行此函數時會創(chuàng)建一個稱為“運行期上下文(execution context)”的內部對象，運行期上下文定義了函數執(zhí)行時 的環(huán)境。每個運行期上下文都有自己的作用域鏈，用于標識符解析，當運行期上下文被創(chuàng)建時，而它的作 用域鏈初始化為當前運行函數的[[Scope]]所包含的對象。這些值按照它們出現在函數中的頁序被復制到運 行期上下文的作用域鏈中。它們共同組成了一個新的對象，叫“活動對象(activation object)”，該對象包含了 函數的所有局部變量、命名參數、參數集合以及this，然后此對象會被推入作用域鏈的前端，當運行期上下 文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：
在函數執(zhí)行過程中，每遇到一個變量，都會經歷一次標識符解析過程以決定從哪里獲取和存儲數據。該過程從作用域鏈頭部，也就是從活動對象開始搜索，查找同名的標識符，如果找到了就使用這個標識符對應的變量，如果沒找到繼續(xù)搜索作用域鏈中的下一個對象，如果搜索完所有對象都未找到，則認為該標識符未定義。函數執(zhí) 行過程中，每個標識符都要經歷這樣的搜索過程。
結論：從作用域鏈的結構可以看出，在運行期上下文的作用域鏈中，標識符所在的位 置越深，讀寫速度就會越慢。如上圖所示，因為全局變量總是存在于運行期上下文 作用域鏈的最末端，因此在標識符解析的時候，查找全局變量是最慢的。所以，在 編寫代碼的時候應盡量少使用全局變量，盡可能使用局部變量。一個好的經驗法則 是：如果一個跨作用域的對象被引用了一次以上，則先把它存儲到局部變量里再使用。
段時間在面試web開發(fā)前端工程師，整理了一些web前端相關的面試題及答案，包含原生html、js、微信小程序、uni-app等。有些答案包含了一些個人見解在里面，僅供參考。
切圖工具
Ps， sketch，figma
行內元素和塊級元素的區(qū)別？
行內元素：不會獨立出現在一行，單獨使用的時候后面不會有換行符的元素。
塊級元素：獨立在一行的元素，他們后面會自動帶有換行符。
行內元素轉換成塊元素，只要設置其display屬性為block即可，display:block; 。塊元素轉換成行內元素，只要將其display屬性設置為inline即可，display:inline。
（1）行內元素有：a b span img input select
（2）塊級元素有：div p ul ol li dl dt dd h1-h6
（3）常見的空元素：br-換行，hr-水平分割線
瀏覽器（客戶端）存儲方式
SessionStorage， LocalStorage， Cookie 這三者都可以被用來在瀏覽器端存儲數據，而且都是字符串類型的鍵值對。區(qū)別在于前兩者的目的便于客戶端存儲數據。而 cookie 是網站為了標示用戶身份而儲存在用戶本地終端上的數據（通常經過加密）。cookie 數據始終在同源（協議、主機、端口相同）的 http 請求中攜帶（即使不需要），會在瀏覽器和服務器間來回傳遞。
存儲大小：
cookie 數據大小不能超過4 k 。
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。
有期時間：
1、 localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據。
2、 sessionStorage 數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。在新標簽或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話。
3、 cookie 設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉。
作用域：
1、 sessionStorage 只在同源的同窗口（或標簽頁）中共享數據，也就是只在當前會話中共享。
2、 localStorage 在所有同源窗口中都是共享的。
3、 cookie 在所有同源窗口中都是共享的。
瀏覽器端常用的存儲技術是 cookie 、localStorage 和 sessionStorage。
img標簽的title和alt是什么
title：解釋信息，鼠標移上去顯示的信息
alt：替換信息、圖片不能顯示時的信息
html5新特性
語義化標簽：比如 article、footer、header、nav、section;
表單控件：calendar、date、time、email、url、search;
媒體元素video和audio元素
本地存儲：localStorage sessionStorage
新的技術，websocket
前端需要注意哪些SEO搜索引擎
合理的title、description、keywords：搜素時對這三項的權重逐個減少，title強調重點，重要關鍵詞不要超過兩次，而且要靠前，不同頁面title要有所不同，description高度概括頁面內容，長度合適，不過分堆砌關鍵詞，不同頁面description有所不同，keywords列出重要關鍵詞即可
語義化的html代碼，符合W3C標準
提高網站速度
重要HTML代碼放前面
重要內容不要用js輸出：爬蟲不會執(zhí)行js獲取內容
少用 iframe：搜索引擎不會抓取 iframe 中的內容
非裝飾性圖片必須加 alt
HTML和XHTML的區(qū)別
XHTML：重寫了HTML規(guī)范，比HTML更嚴格
XHTML中所有的標記都必須有一個相應的結束標簽；
XHTML所有標簽的元素和屬性的名字都必須使用小寫；
所有的XML標記都必須合理嵌套；
所有的屬性都必須用引號“”括起來；
把所有<和&特殊符號用編碼表示；
給所有屬性附一個值；
不要在注釋內容中使用“--”；
圖片必須使用說明文字。
文本超出部分顯示省略號
單行：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多顯示幾行
overflow: hidden;
前端頁面有哪三層構成，分別是什么？作用是什么？
答案：分成：結構層、表示層、行為層。
分別是：HTML、CSS、JavaScript
結構層（structural layer）
由 HTML 或 XHTML 之類的標記語言負責創(chuàng)建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”
表示層（presentation layer）
由 CSS 負責創(chuàng)建。 CSS 對“如何顯示有關內容”的問題做出了回答。
行為層（behaviorlayer）
負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
描述從輸入url到頁面展示的完整過程
網絡請求
解析
渲染
1)網絡請求:
DNS查詢（得到IP ) ，建立TCP連接（三次握手)
瀏覽器發(fā)起HTTP請求
收到請求響應，得到HTML 源代碼
繼續(xù)請求靜態(tài)資源
解析HTML過程中，遇到靜態(tài)資源還會繼續(xù)發(fā)起網絡請求
JS CSS圖片視頻等
注意:靜態(tài)資源可能有強緩存，此時不必請求
2)解析:字符串->結構化數據:
HTML構建 DOM樹
CSS構建CSSOM樹( style tree )
兩者結合，形成render tree
題外話：優(yōu)化解析
CSS放在<head> 中，不要異步加載CSS
JS放在<body>最下面（或合理使用defer async )
<img>提前定義width height
3）渲染: Render Tree云制到頁面
計算各個DOM的尺寸、定位，最后繪制到頁面
遇到JS 可能會執(zhí)行（參考defer async )
異步CSS、圖片加載，可能會觸發(fā)重新渲染
無樣式內容閃爍（FOUC）Flash of Unstyle Content
@import導入CSS文件會等到文檔加載完后再加載CSS樣式表。因此，在頁面DOM加載完成到CSS導入完成之間會有一段時間頁面上的內容是沒有樣式的。
解決方法：使用link標簽加載CSS樣式文件。因為link是順序加載的，這樣頁面會等到CSS下載完之后再下載HTML文件，這樣先布局好，就不會出現FOUC問題。
JavaScript的數據類型
值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol（獨一無二的值）。
引用數據類型：對象(Object)、數組(Array)、函數(Function)。注：Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。
基本數據類型與引用類型在存儲上有什么區(qū)別?
1.存儲位置不同:基本數據類型：以棧的形式存儲, 保存與賦值指向數據本身, 用typeof 來判斷類型,存儲空間固定。引用類型：以堆的形式存儲, 保存于賦值指向對象的一個指針, 用instanceof 來判斷類型 , 存儲空間不固定。2.傳值方式不同：基本數據類型按值傳遞，無法改變一個基本數據類型的值引用類型按引用傳遞，應用類型值可以改變
JS 中 == 和 === 區(qū)別是什么？
1、對于string,number等基礎類型，==和===有區(qū)別
1）不同類型間比較，==之比較“轉化成同一類型后的值”看“值”是否相等，===如果類型不同，其結果就是不等。
2）同類型比較，直接進行“值”比較，兩者結果一樣。
2、對于Array,Object等高級類型，==和===沒有區(qū)別
進行“指針地址”比較。
3、基礎類型與高級類型，==和===有區(qū)別
1）對于==，將高級轉化為基礎類型，進行“值”比較。
2）因為類型不同，===結果為false。
閉包的概念？優(yōu)缺點？使用場景？
閉包的概念：閉包就是能讀取其他函數內部變量的函數。
避免全局變量的污染
希望一個變量長期存儲在內存中（緩存變量）
缺點：
內存泄露（消耗）
常駐內存，增加內存使用量
使用場景：封裝功能時(需要使用私有的屬性和方法)，函數防抖、函數節(jié)流、函數柯里化、給元素偽數組添加事件需要使用元素的索引值。
造成內存泄露的原因
意外的全局變量(在函數內部沒有使用var進行聲明的變量)
console.log
閉包
對象的循環(huán)引用
未清除的計時器
DOM泄露(獲取到DOM節(jié)點之后，將DOM節(jié)點刪除，但是沒有手動釋放變量，拿對應的DOM節(jié)點在變量中還可以訪問到，就會造成泄露)
javascript中this指的是誰
this永遠指向函數運行時所在的對象，而不是函數被創(chuàng)建時所在的對象。
普通的函數調用，函數被誰調用，this就是誰。
構造函數的話，如果不用new操作符而直接調用，那即this指向window。用new操作符生成對象實例后，this就指向了新生成的對象。
匿名函數或不處于任何對象中的函數指向window 。
如果是call，apply等，指定的this是誰，就是誰。
繼承（6種方式）
原型鏈繼承
構造函數繼承
組合繼承（原型鏈繼承+構造函數繼承）
原型式繼承
寄生繼承
組合寄生繼承
document.onload和document.ready兩個事件的區(qū)別
頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內的所有元素都加載完成。
Js的淺拷貝和深拷貝
淺拷貝只復制指向某個對象的指針，而不復制對象本身，新舊對象還是共享同一塊內存。但深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內存，修改新對象不會改到原對象。
什么是跨域？有什么方法解決跨域帶來的問題？
跨域需要針對瀏覽器的同源策略來理解，同源策略指的是請求必須是同一個端口，同一個協議，同一個域名，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。
受瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。
常用解決方案：
跨域資源共享（CORS）
nginx代理跨域
nodejs中間件代理跨域
jsonp跨域
解釋什么是Json
(1)JSON 是一種輕量級的數據交換格式。
(2)JSON 獨立于語言和平臺，JSON 解析器和 JSON 庫支持許多不同的編程語言。
(3)JSON的語法表示三種類型值，簡單值(字符串，數值，布爾值，null),數組，對象
瀏覽器的線程
JS引擎線程：解釋執(zhí)行JS代碼、用戶輸入、網絡請求等
GUI線程（渲染線程）：繪制用戶界面、與JS主線程互斥
HTTP網絡請求線程：處理用戶的GET、POST等請求，等拿到返回結果后，將回調函數推入事件隊列
定時器觸發(fā)線程：setTimeout、setInterval等待時間結束后，將執(zhí)行函數推入事件隊列中
事件處理線程：將click、mouse、input等交互事件發(fā)生后，將事件處理函數推入事件隊列中
promise、async有什么區(qū)別
1、什么是Async/Await
async/await是寫異步代碼的新方式，使用的方式看起來像同步
async/await是基于Promise實現的，它不能用于普通的回調函數。
2、什么是promise
為了解決異步嵌套而產生，讓代碼更易于理解
區(qū)別：async/await讓代碼更像同步，進一步優(yōu)化了代碼
介紹各種異步方案
（1）回調函數（異步回調）
回調是一個函數被作為一個參數傳遞到另一個函數里，在那個函數執(zhí)行完后再執(zhí)行。
（2）promise
promise對象是commonJS工作組提出的一種規(guī)范，一種模式，目的是為了異步編程提供統一接口。
（3）async/await
（4）事件監(jiān)聽
采用事件驅動模式。任務的執(zhí)行不取決于代碼的順序，而取決于某個事件是否發(fā)生。
（5）發(fā)布/訂閱
XML與JSON的區(qū)別？
1) 數據體積方面。JSON相對于XML來講，數據的體積小，傳遞的速度更快些。
2) 數據交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
3) 數據描述方面。JSON對數據的描述性比XML較差。
4) 傳輸速度方面。JSON的速度要遠遠快于XML。
DOCTYPE的作用？嚴格模式和混雜模式的區(qū)別？
！DOCTYPE告訴瀏覽器以HTML5標準解析頁面，如果不寫，則進入混雜模式
嚴格模式（標準模式）：以w3c標準解析代碼
混雜模式（怪異模式）：瀏覽器用自己的方式解析代碼，混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作
HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的方法，實現時，已經盡可能大的實現了向后兼容(HTML5 沒有嚴格和混雜之分)。
“use strict”的作用是什么？
use strict 出現在 JavaScript 代碼的頂部或函數的頂部，可以幫助你寫出更安全的 JavaScript 代碼。如果你錯誤地創(chuàng)建了全局變量，它會通過拋出錯誤的方式來警告你。
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除代碼運行的一些不安全之處，保證代碼運行的安全；
提高編譯器效率，增加運行速度；
為未來新版本的Javascript做好鋪墊。
"嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發(fā)展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大項目已經開始全面擁抱它。
另一方面，同樣的代碼，在"嚴格模式"中，可能會有不一樣的運行結果；一些在"正常模式"下可以運行的語句，在"嚴格模式"下將不能運行。掌握這些內容，有助于更細致深入地理解Javascript，讓你變成一個更好的程序員。
漸進增強與優(yōu)雅降級
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進，達到更好的用戶體驗。
優(yōu)雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
Ajax使用
全稱 ： Asynchronous Javascript And XML 所謂異步，就是向服務器發(fā)送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續(xù)操作，與此同時，頁面是不會發(fā)生整頁刷新的，提高了用戶體驗。
什么是window對象? 什么是document對象?
window對象代表瀏覽器中打開的一個窗口。
document對象代表整個html文檔。
實際上，document對象是window對象的一個屬性。
null，undefined的區(qū)別？
null表示一個對象被定義了，但存放了空指針，轉換為數值時為0。
undefined表示聲明的變量未初始化，轉換為數值時為NAN。
typeof(null) -- object; typeof(undefined) -- undefined
new操作符具體干了什么呢?
創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
2) 屬性和方法被加入到 this 引用的對象中。
3) 新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
如果想獲取到頁面中所有的checkbox用什么方法？
document.getElementsByTagName(tagName);
從輸入 URL 到頁面展示，這中間發(fā)生了什么？
用戶輸入url并回車
瀏覽器進程檢查url，組裝協議，構成完整的url
瀏覽器進程通過進程間通信（IPC）把url請求發(fā)送給網絡進程
網絡進程接收到url請求后檢查本地緩存是否緩存了該請求資源，如果有則將該資源返回給瀏覽器進程
如果沒有，網絡進程向web服務器發(fā)起http請求（網絡請求）
網絡進程解析響應流程，如果是200，檢查響應類型Content-Type，如果是字節(jié)流類型，則將該請求提交給下載管理器，該導航流程結束，不再進行；如果是html則通知瀏覽器進程準備渲染進程準備進行渲染
準備渲染進程；瀏覽器進程檢查當前url是否和之前打開的渲染進程根域名是否相同，如果相同，則復用原來的進程，如果不同，則開啟新的渲染進程；
傳輸數據、更新狀態(tài)
http與https的區(qū)別
HTTP協議傳輸的數據都是未加密的，也就是明文的，所以使用HTTP協議傳輸隱私信息非常的不安全，為了保證隱私信息的安全傳輸。網景公司設計了SSL協議進行HTTP協議傳輸數據的加密，由此誕生了HTTPS。兩者的區(qū)別在于：
1.https協議需要用到ca申請證書，一般來說是需要一定費用的。
2.http協議是超文本傳輸協議，信息屬于明文傳輸，https是具有安全性的ssl加密傳輸協議
3.http和https使用的是兩種完全不同的連接方式，用的端口也不一樣，前者是80，后者是443
4.http的連接很簡單，是無狀態(tài)的；HTTPS協議是由HTTP+SSL協議共同構建的可以加密，身份認證的網絡協議，安全性高很多。
微信小程序
請談談微信小程序主要目錄和文件的作用？
project.config.json：項目配置文件，用的最多的就是配置是否開啟https校驗
App.js：設置一些全局的基礎數據等
App.json：底部tab，標題欄和路由等設置
App.wxss：公共樣式，引入iconfont等
pages：里面包含一個個具體的頁面
index.json：配置當前頁面標題和引入組件
index.wxml：頁面結構
index.wxss：頁面樣式表
index.js：頁面的邏輯，請求和數據處理
請談談wxml與標準的html的異同？
都是用來描述頁面的結構
都由標簽，屬性等構成
標簽名字不一樣，且小程序標簽更少，單一標簽更多
多了一些 wx:if 這樣的屬性以及{{}} 這樣的表達式
WXML僅能在微信小程序開發(fā)者工具中預覽，而HTML可以在瀏覽器內預覽
組件封裝不同，WXML對組件進行了重新封裝
小程序運行在JS Core內，沒有DOM樹和window對象，小程序中無法使用window對象和document對象。
請談談WXSS和CSS的異同？
都是用來描述頁面的樣子
WXSS具有CSS大部分的特性，也做了一些擴充和修改
WXSS新增了尺寸單位，WXSS在底層支持新的尺寸單位rpx
WXSS僅支持部分CSS選擇器
WXSS提供全局樣式與局部樣式
有沒有封裝過微信小程序的數據請求，是怎么封裝微信小程序的數據請求的？
在根目錄下創(chuàng)建util目錄及api.js文件和apiConfig.js文件
在apiConfig.js封裝基礎的get，post和put，upload等請求方法，設置請求體，帶上token和異常處理等
在api中引入apiConfig.js封裝好的請求方法.根據頁面數據請求的urls，設置對應的方法并導出
在具體的頁面中導入或
將所有的接口放在統一的js文件中并導出
在app.js中創(chuàng)建封裝請求數據的方法
在子頁面中調用封裝的請求數據
小程序頁面之間有哪些（傳值）傳遞數據的方法？
使用全局遍歷實現數據傳遞
頁面跳轉重定向時，使用url帶參數傳遞數據
使用組件模板 template傳遞參數
使用緩存?zhèn)鬟f參數
使用數據庫傳遞參數
給html元素添加data-*屬性來傳遞值，然后通過e.currentTarget.dataset或onload的param參數獲取（data- 名稱不能有大寫字母，不可以存放對象）
設置id 的方法標識來傳值，通過e.currentTarget.id獲取設置的id值，然后通過設置全局對象的方式來傳遞數據
在navigator中添加參數數值
請談談小程序的生命周期函數
onLoad()頁面加載時觸發(fā)，只會調用一次，可獲取當前頁面路徑中的參數
onShow()頁面顯示/切入前臺時候觸發(fā)，一般用來發(fā)送數據請求
onReady()頁面初次渲染完成時觸發(fā)，只會調用一次，代表頁面已可和視圖層進行交互
onHide()頁面隱藏/切入后臺時觸發(fā)，如底部tab切換到其他頁面或小程序切入后臺等
onUnload()頁面卸載時觸發(fā)，如redirectTO或navigateBack到其他頁面時
分析微信小程序的優(yōu)劣勢？
優(yōu)勢：容易上手，基礎組件庫比較全，基本不需要考慮兼容問題
開發(fā)文檔比較完善，開發(fā)社區(qū)比較活躍，支持插件式開發(fā)
良好的戶體驗，無需下載，通過搜索和掃一掃就可以打開，打開速度快，安卓上可以添加到桌面，與原生APP差不多
開發(fā)成本比APP要低
為用戶提供良好的保障（小程序發(fā)布，嚴格是審查流程）
劣勢：限制較多，頁面大小不能超過1M，不能打開超過5個層級的頁面
樣式單一，部分組件已經是成型的，樣式不可修改，例如：幻燈片，導航
推廣面窄，不能分享朋友圈，只能通過分享給朋友，附加小程序推廣
依托與微信，無法開發(fā)后臺管理功能
后臺調試麻煩，因為api接口必須https請求且公網地址
真機測試，個別安卓和蘋果表現迥異，例如安卓的定位功能加載很慢
微信小程序和H5的區(qū)別？
運行環(huán)境不同（小程序在微信運行，h5在瀏覽器運行）
開發(fā)成本不同（h5需要兼容不同的瀏覽器）
獲取系統權限不同（系統級權限可以和小程序無縫銜接）
應用在生成環(huán)境的運行速度流程（h5需不斷對項目優(yōu)化來提高用戶體驗）
使用webview直接加載要注意那些事項？
必須要在小程序后臺使用管理員添加業(yè)務域名
h5頁面跳轉至小程序的腳步必須是1.3.1以上
微信分享只可以是小程序的主名稱，如要自定義分享內容，需小程序版本在1.7.1以上
h5的支付不可以是微信公眾號的appid，必須是小程序的appid，而且用戶的openid也必須是用戶和小程序的
之前是如何管理小程序緩存的getstorage，setstorage？
簡述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 區(qū)別
wx.navigateTo() : 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
wx.redirectTo() : 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
wx.switchTab() : 跳轉到 TabBar 頁面，并關閉其他所有非 tabBar 頁面
wx.navigateBack() : 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層
wx.reLaunch() : 關閉所有頁面，打開到應用的某個頁面。
小程序運行機制
熱啟動 ：假如用戶已經打開了某個小程序，在一定時間內再次打開小程序的話，這個時候我們就不再需要重新啟動了，這需要把我們的后臺打開的小程序切換到前臺來使用。
冷啟動：用戶首次打開小程序或被微信主動銷毀再次打開的情況，此時小程序需要重新加載啟動。
小程序什么時候會主動銷毀？
小程序在進入后臺之后，客戶端會幫我們在一定時間內維持我們的一個狀態(tài)，超過五分鐘后，會被微信主動銷毀.
官方也沒有明確說明 什么時候銷毀， 在不同機型表現也不一樣，
2019年開發(fā)時：時間官方文檔沒有說明，但是經過詢問一般指5分鐘內
2020年開發(fā)時：時間官方文檔沒有說明，實測安卓沒有固定時間，內存足夠情況下，有時候一天了還在，有時候幾分鐘就沒了。
bindtap和catchtap的區(qū)別是什么
相同點：首先他們都是作為點擊事件函數，就是點擊時觸發(fā)。在這個作用上他們是一樣的，可以不做區(qū)分
不同點：他們的不同點主要是bindtap是不會阻止冒泡事件的，catchtap是阻值冒泡的
小程序調用后臺接口遇到哪些問題？
1.數據的大小有限制，超過范圍會直接導致整個小程序崩潰，除非重啟小程序；
2.小程序不可以直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會導致頁面加載變慢，所以最好在后臺對文章內容的html進行過濾，后臺直接處理批量替換p標簽div標簽為view標簽，然后其它的標簽讓插件來做，減輕前端的時間。
小程序組件生命周期
created 組件實例化，但節(jié)點樹還未導入，因此這時不能用setData
attached 節(jié)點樹完成，可以用setData渲染節(jié)點，但無法操作節(jié)點
ready(不是onReady) 組件布局完成，這時可以獲取節(jié)點信息，也可以操作節(jié)點
moved 組件實例被移動到樹的另一個位置
detached 組件實例從節(jié)點樹中移除
ReactJS
React組件分為哪兩種，各有什么特點？
功能組件：這些類型的組件沒有自己的狀態(tài)，只包含渲染方法，因此也被稱為無狀態(tài)組件。他們可能從其他組件中獲取數據作為道具（屬性）。
類組件：這些類型的組件可以保存和管理自己的狀態(tài)，并有一個單獨的渲染方法來在屏幕上返回 JSX。它們也被稱為有狀態(tài)組件，因為它們可以具有狀態(tài)。
React中如何更新組件的狀態(tài)？
Setstate
React的生命周期包含哪些？
· constructor(props)：初始化 props 和 State。
· componentWillMount()：一旦屬性被獲取并且也初始化了 State，該方法將會被觸發(fā)。該方法是在 DOM 被渲染之前觸發(fā)的，并且可以用來初始化第三方腳本庫、啟動動畫、請求數據，以及其他可能需要在組件被渲染之前執(zhí)行的額外步驟。還可以在該方法中觸發(fā) setState 方法，在組件被初次渲染之前修改組件的 State。
在組件被渲染完畢之前調用 setState 方法將不會啟動更新生命周期。在組件渲染完畢之后調用 setState 方法就會啟動更新生命周期。
如果用戶在 componentWillMount 方法中定義的回調函數內調用了 setState 方法，那么它將會在組件被渲染完成之后被觸發(fā)，并且會啟動更新生命周期。
· render()：只要父組件 render 被調用，其所有子組件的 render 都會被調用
· componentDidMount()：組件被渲染完畢之后觸發(fā)，可以獲取到 DOM。
· componentWillUnmount()：組件被卸載之前觸發(fā)，在這里可以清除一些后臺進程。
列舉常見的npm命令
Npm命令中install全局安裝使用哪個參數？
React與vue有什么區(qū)別？
· HTML 和 CSS
在 react 中，everything is JavaScript，不僅是 html 可以用 jsx 表示，連 css 也有 js 的解決方案。
Vue 的整體思想是擁抱經典的 Web 技術，并在其上進行擴展。使用 html，css 和 js 來構建模板。
在這個方面我覺得 vue 是在適應開發(fā)者，而 react 想要改變開發(fā)者。
同時，在組件作用域內的 css 上，react 是使用的 css-in-js 的解決方案或者是 css modules。而 vue 使用 scoped 來控制 css
· 規(guī)模
vue 的路由管理和狀態(tài)管理由官方維護，而 react 則是把這些問題交給社區(qū)，創(chuàng)建了一個更為分散的生態(tài)系統，因此react的生態(tài)系統相對于 vue 更加繁榮。
· 原生渲染
由于兩者都是使用的虛擬 dom 技術，因此都可以構建原生的安卓或者 ios 應用，例如 react-native 和 weex
Uni-app
Uniapp中的本地緩存
同步存儲：uni.setStorageSync，獲取：uni.getStorageSync
異步存儲：uni.setStorage，獲取：uni.getStorage
詳細描述一下Uniapp的工作原理，它是如何做到跨平臺開發(fā)的
Uniapp的工作原理是將Vue.js的模板語法轉換為各個平臺所支持的原生組件，再通過引擎的渲染器將其渲染到各個平臺上。同時，Uniapp還提供了平臺API以及對各平臺的配置文件支持，使得開發(fā)者能夠方便地在同一份代碼下實現對不同平臺的適配。
在Uniapp中，使用Vue.js的語法開發(fā)，同時通過Uniapp所提供的各平臺API和配置文件適配各種平臺的差異即可實現跨平臺開發(fā)。例如，在編寫頁面的時候，可使用Uniapp提供的原生組件替代HTML標簽，然后在編寫樣式時，可通過編寫針對各平臺的樣式代碼，使樣式在各平臺下呈現一致。
Uniapp 中的跳轉方式
標簽法：<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳轉到關于頁面</button>
</navigator>
跳轉tabBar頁面加open-type="switchTab"
頁面跳轉uni.navigateTo({url:})保留當前頁面，只能打開非 tabBar 頁面。uni.redirectTo({})關閉卸載當前頁面，只能打開非 tabBar 頁面
tabBar跳轉uni.switchTab關閉所有非tabbar頁面， 只能打開 tabBar 頁面，不能url傳參
uni.reLaunch({})關閉卸載所有頁面，可以打開任意頁面
應用的生命周期
onLaunch——當uni-app 初始化完成時觸發(fā)（全局只觸發(fā)一次）
onShow——當 uni-app 啟動，或從后臺進入前臺顯示
onHide——當 uni-app 從前臺進入后臺
onError——當 uni-app 報錯時觸發(fā)
onUniNViewMessage——對 nvue 頁面發(fā)送的數據進行監(jiān)聽，可參考 nvue 向 vue 通訊
onUnhandledRejection——對未處理的 Promise 拒絕事件監(jiān)聽函數（2.8.1+）
onPageNotFound——頁面不存在監(jiān)聽函數
onThemeChange——監(jiān)聽系統主題變化
頁面的生命周期
onInit——監(jiān)聽頁面初始化，其參數同 onLoad 參數，為上個頁面?zhèn)鬟f的數據，參數類型為 Object（用于頁面?zhèn)鲄ⅲ|發(fā)時機早于 onLoad
onLoad——監(jiān)聽頁面加載，其參數為上個頁面?zhèn)鬟f的數據，參數類型為 Object（用于頁面?zhèn)鲄ⅲ瑓⒖际纠?/p>
onShow——監(jiān)聽頁面顯示。頁面每次出現在屏幕上都觸發(fā)，包括從下級頁面點返回露出當前頁面
onReady——監(jiān)聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發(fā)
onHide——監(jiān)聽頁面隱藏
onUnload——監(jiān)聽頁面卸載
onResize——監(jiān)聽窗口尺寸變化
組件的生命周期
beforeCreate——在實例初始化之后被調用。
created——在實例創(chuàng)建完成后被立即調用。
beforeMount——在掛載開始之前被調用。
mounted——掛載到實例上去之后調用。詳見 注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔
beforeUpdate——數據更新時調用，發(fā)生在虛擬 DOM 打補丁之前。
updated——由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
beforeDestroy——實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed——Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
uni-app的用戶體驗如何
使用uni-app開發(fā)的微信小程序，和直接開發(fā)微信小程序相比性能沒有明顯差別，因為uni-app輸出到微信時也是編譯為wxml格式。uni-app編譯到微信使用的是mpvue框架，這個是業(yè)內廣泛使用的成熟框架。
uni-app打包成App后的體驗和微信小程序一樣好，在某些場景下更好；微信小程序的Hybrid應用框架是業(yè)內體驗上的標桿，實踐證明這種體驗足以承載一線互聯網開發(fā)商獲得上億用戶。
uni-app內置預載機制，加載新頁面速度極快，可實現無白屏極速渲染。
uni-app在App端還支持weex原生渲染（nvue），左右拖動長列表等復雜場景依然可實現高流暢性。
在Uniapp中，如何使用原生SDK以及插件
在Uniapp中，可通過uni-app plus的方式來集成原生SDK和插件。具體實現方式是，在manifest.json文件中添加對應的插件設置，并在代碼中調用相關API使用內置的SDK和插件。15. 描述一下在Uniapp中如何實現動態(tài)路由。在Uniapp中，可通過vue-router實現動態(tài)路由。具體實現方式是，在定義路由時，使用動態(tài)路由參數設置路由的路徑，然后在組件中通過$route.params來獲取路由參數，以便進行頁面的動態(tài)渲染。
實上，通過使用閉包，我們可以做很多事情。比如模擬面向對象的代碼風格;更優(yōu)雅，更簡潔的表達出代碼;在某些方面提升代碼的執(zhí)行效率，同時避免對命名空間的污染，最重要的是可以從一個域中取出原本訪問不到的變量去使用。
函數的作用域：
1.變量的聲明會提前。
2.全局變量和局部變量。
3.函數作用域的生命周期。
變量的聲明
tt='ee';
function b(){
function test(){
alert(tt);
var tt='ff';
}
test()
}
b()
第一段函數返回的是一個undefined， 因為變量的聲明會提前相當于
var tt='123'
function test(){
var tt;
alert(tt);
tt='ff';
}
2.
tt='ee';
function b(){
function test(){
alert(tt);
/*var tt='ff';*/
}
test()
}
b()
變量作用域
1.function outFn(){
function innerFn(){
var inner=0;
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
//每當這個內部函數被調用的時候，都會重新生命一個inner變量，然后讓這個變量自增。
2.
var inner=0;
function outFn(){
function innerFn(){
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
//每當內部函數被調用時，都會讓全局變量inner自增。
如果讓這個函數變成父元素的局部變量，會是什么結果?
3.
function outFn(){
var inner=0;
function innerFn(){
inner++;
console.log('inner='+inner)
}
return innerFn;
}
var fn1=outFn();
fn1();
fn1();
var fn2=outFn();
fn2();
fn2();
一段概念：
這次的結果可能會出人預料，因為當內部函數在定義它的作用域的外部被引用的時候，就創(chuàng)建了改內部函數的一個閉包，這種情況下我們稱既不是局部變量也不是其參數的變量為自由變量，稱內部函數的調用環(huán)境為封閉閉包的環(huán)境。從本質上將，如果內部函數引用了位于外部函數中的變量，相當于授權該變量能夠被延遲使用。因此，當外部函數調用完成后，這些變量的內存不會被釋放，因為閉包仍然需要使用它們。
閉包
一句話理解閉包： JavaScript中的函數運行在它們被定義的作用域里，而不是它們被執(zhí)行的作用域里。
一個故事理解閉包
我的年齡是秘密，你想知道。
但是每次我都含糊其辭的對你說undefined;
為了防止我自己也忘記或搞錯自己的年齡，我辦了一張身份證，上面記錄我的年齡信息，藏在我家里。
你知道了這件事，為了得到我的年齡，決定對我投其所好，
于是你送我一只逗比間諜貓。
作為感謝我給了你一把我家的鑰匙，方便你有空來看貓。
這只貓實在太神奇了，每次都能找到我的身份證，并把信息傳遞給你。
于是你每次想知道我的年齡的時候就來看貓，
然后間諜貓每次都能把我的最新的年齡信息反饋給你。
var day=0;
var timer=setInterval("dayChanges()",(24*60*60*1000)); //定時器，
function dayChanges(){
day++;
} //每過24小時 次函數運行一次，我的年齡又多了一天
//------------ 下面的代碼就是一個比較常見的閉包。
function isMyHome(){ //我家
var myAge=0; //我的身份證信息
if(day%365==0){ //我的年齡變化
myAge+=1;
}
function myHomeKey(){ // 我家鑰匙
return myAge; //return 就是間諜貓
}
return myHomeKey; //給你我家的鑰匙。
}
var key=isMyHome(); //你拿到我家鑰匙
var you=key(); //得到年齡。
匿名函數：
(functoin( ){
alert( 2 )
})()
特性：1.自調用
2.參數傳入方式;
閉包的使用方法：
1.
function outFn(){
console.log('我是外部函數');
function innerFn(){
console.log('我是內部函數');
}
innerFn()
}
outFn();
//可以在外部函數調用到內部函數，但是并不能在外部調用內部函數。這種技術適合用于小型，單用途的函數。
2.在任何地方調用內部函數，通過一個全局變量可以訪問到內部函數;
var global;
function outFn(){
console.log('我是外部函數')
function innerFn(){
console.log('我是內部函數')
}
global=innerFn;
}
outFn();
global();
3.一個最簡單的閉包，可以迅速調用，并且不會污染全局變量。
var data = {
table : [1,2,3,4,5],
tree : {}
};
(function(data){
alert(data.table)
//build dm.tree
})(data);
4.可以通過對變量進行封裝實現閉包。
var obj=(function(){
var name='找不見的名字';
return {
getName:function(){
return name;
},
setName:function(newName){
return newName
}
}
})()
obj.getName()
高階函數英文叫Higher-order function。那么什么是高階函數?
JavaScript的函數其實都指向某個變量。既然變量可以指向函數，函數的參數能接收變量，那么一個函數就可以接收另一個函數作為參數，這種函數就稱之為高階函數。
一個最簡單的高階函數：
function add(x, y, f) {
return f(x) + f(y);
}
當我們調用add(-5, 6, Math.abs)時，參數x，y和f分別接收-5，6和函數Math.abs，根據函數定義，我們可以推導計算過程為：
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;
用代碼驗證一下：
add(-5, 6, Math.abs); // 11
編寫高階函數，就是讓函數的參數能夠接收別的函數
1. 高階函數map
舉例說明，比如我們有一個函數f(x)=x2，要把這個函數作用在一個數組[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map實現如下：
由于map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果：
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
map()傳入的參數是pow，即函數對象本身。
你可能會想，不需要map()，寫一個循環(huán)，也可以計算出結果：
var f = function (x) {
return x * x;
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i
result.push(f(arr[i]));
}
的確可以，但是，從上面的循環(huán)代碼，我們無法一眼看明白“把f(x)作用在Array的每一個元素并把結果生成一個新的Array”。
所以，map()作為高階函數，事實上它把運算規(guī)則抽象了，因此，我們不但可以計算簡單的f(x)=x2，還可以計算任意復雜的函數，比如，把Array的所有數字轉為字符串：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
只需要一行代碼。
2. 高階函數reduce
再看reduce的用法。Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上，這個函數必須接收兩個參數，reduce()把結果繼續(xù)和序列的下一個元素做累積計算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
比方說對一個Array求和，就可以用reduce實現：
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
練習：利用reduce()求積。
練習：把[1, 3, 5, 7, 9]變換成整數13579，用reduce()。
練習：請用map()把用戶輸入的不規(guī)范的英文名字，變?yōu)槭鬃帜复髮懀渌懙囊?guī)范名字。輸入：['adam', 'LISA', 'barT']，輸出：['Adam', 'Lisa', 'Bart']。
3. 高階函數filter
filter也是一個常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。
和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用于每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素。
例如，在一個Array中，刪掉偶數，只保留奇數，可以這么寫：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
把一個Array中的空字符串刪掉，可以這么寫：
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']
可見用filter()這個高階函數，關鍵在于正確實現一個“篩選”函數。
練習：請使用filter()篩選出一個數組中所有的素數
函數作為返回值
高階函數除了可以接受函數作為參數外，還可以把函數作為結果值返回。
我們來實現一個對Array的求和。通常情況下，求和的函數是這樣定義的：
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); // 15
但是，如果不需要立刻求和，而是在后面的代碼中，根據需要再計算怎么辦?可以不返回求和的結果，而是返回求和的函數!
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
當我們調用lazy_sum()時，返回的并不是求和結果，而是求和函數：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
調用函數f時，才真正計算求和的結果：
f(); // 15
在這個例子中，我們在函數lazy_sum中又定義了函數sum，并且，內部函數sum可以引用外部函數lazy_sum的參數和局部變量，當lazy_sum返回函數sum時，相關參數和變量都保存在返回的函數中，這種稱為“閉包(Closure)”的程序結構擁有極大的威力。
請再注意一點，當我們調用lazy_sum()時，每次調用都會返回一個新的函數，即使傳入相同的參數：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
f1()和f2()的調用結果互不影響。
閉包
注意到返回的函數在其定義內部引用了局部變量arr，所以，當一個函數返回了一個函數后，其內部的局部變量還被新函數引用，所以，閉包用起來簡單，實現起來可不容易。
還有一個需要注意的問題是，返回的函數并沒有立刻執(zhí)行，而是直到調用了f()才執(zhí)行。我們來看一個例子：
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
在上面的例子中，每次循環(huán)，都創(chuàng)建了一個新的函數，然后，把創(chuàng)建的3個函數都添加到一個Array中返回了。
你可能認為調用f1()，f2()和f3()結果應該是1，4，9，但實際結果是：
f1(); // 16
f2(); // 16
f3(); // 16
全部都是16!原因就在于返回的函數引用了變量i，但它并非立刻執(zhí)行。等到3個函數都返回時，它們所引用的變量i已經變成了4，因此最終結果為16。
返回閉包時牢記的一點就是：返回函數不要引用任何循環(huán)變量，或者后續(xù)會發(fā)生變化的變量。
如果一定要引用循環(huán)變量怎么辦?方法是再創(chuàng)建一個函數，用該函數的參數綁定循環(huán)變量當前的值，無論該循環(huán)變量后續(xù)如何更改，已綁定到函數參數的值不變：
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function () {
return n * n;
}
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
注意這里用了一個“創(chuàng)建一個匿名函數并立刻執(zhí)行”的語法：
(function (x) {
return x * x;
})(3); // 9
理論上講，創(chuàng)建一個匿名函數并立刻執(zhí)行可以這么寫：
function (x) { return x * x } (3);
但是由于JavaScript語法解析的問題，會報SyntaxError錯誤，因此需要用括號把整個函數定義括起來：
(function (x) { return x * x }) (3);
通常，一個立即執(zhí)行的匿名函數可以把函數體拆開，一般這么寫：
(function (x) {
return x * x;
})(3);
說了這么多，難道閉包就是為了返回一個函數然后延遲執(zhí)行嗎?
當然不是!閉包有非常強大的功能。舉個栗子：
在面向對象的程序設計語言里，比如Java和C++，要在對象內部封裝一個私有變量，可以用private修飾一個成員變量。
在沒有class機制，只有函數的語言里，借助閉包，同樣可以封裝一個私有變量。我們用JavaScript創(chuàng)建一個計數器：
'use strict';
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
它用起來像這樣：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
在返回的對象中，實現了一個閉包，該閉包攜帶了局部變量x，并且，從外部代碼根本無法訪問到變量x。換句話說，閉包就是攜帶狀態(tài)的函數，并且它的狀態(tài)可以完全對外隱藏起來。
閉包還可以把多參數的函數變成單參數的函數。例如，要計算xy可以用Math.pow(x, y)函數，不過考慮到經常計算x2或x3，我們可以利用閉包創(chuàng)建新的函數pow2和pow3：
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 創(chuàng)建兩個新函數:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(5); // 25
pow3(7); // 343
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
