0臭觉、基礎(chǔ)語法
Javascript基礎(chǔ)語法包括:變量定義、數(shù)據(jù)類型廓俭、循環(huán)、選擇唉工、內(nèi)置對象等研乒。
數(shù)據(jù)類型有string,number,boolean,null,undefined,object等。
其中淋硝,string,number和boolean是基礎(chǔ)類型
? ? ? ? ? ? null和undefined是JS中的兩個(gè)特殊類型
? ? ? ? ? ? object是引用類型雹熬。
Javascript可以通過typeof來判斷基礎(chǔ)數(shù)據(jù)類型宽菜,但不能夠準(zhǔn)確判斷引用類型, 因此需要用到另外一個(gè)方法,那就是Object的toString,
JS常用的內(nèi)置對象有Date竿报、Array铅乡、JSON,RegExp等。
Date和Array用的最頻繁烈菌,JSON可以對對象和數(shù)組進(jìn)行序列化和反序列化阵幸,還有一個(gè)作用就是實(shí)現(xiàn)對象的深拷貝。
RegExp即正則表達(dá)式芽世,是處理字符串的利器挚赊。
1、函數(shù)原型鏈
Javascript雖然沒有繼承概念济瓢,但Javascript在函數(shù)Function對象中建立了原型對象prototype荠割,并以Function對象為主線,從上至下旺矾,在內(nèi)部構(gòu)建了一條原型鏈蔑鹦。
簡單來說就是建立了變量查找機(jī)制,當(dāng)訪問一個(gè)對象的屬性時(shí)箕宙,先查找對象本身是否存在嚎朽,如果不存在就去該對象所在的原型連上去找,直到Object對象為止扒吁,如果都沒有找到該屬性才會返回undefined火鼻。
因此我們經(jīng)常會利用函數(shù)的原型機(jī)制來實(shí)現(xiàn)JS繼承。
2雕崩、函數(shù)作用域
函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的魁索。
在JS中沒有會塊級作用域,只有函數(shù)作用域盼铁,因此JS中還存在著另外一種怪異現(xiàn)象粗蔚,那就是變量提升。
3饶火、函數(shù)指針 this
this 存在于函數(shù)中鹏控,它指向的是該函數(shù)在運(yùn)行時(shí)被調(diào)用的那個(gè)對象。在實(shí)際項(xiàng)目中肤寝,遇到this的坑比較多当辐,因此需要對this作深入的理解。
Function對象還提供了call鲤看、apply和bind等方法來改變函數(shù)的this指向缘揪,其中call和apply主動執(zhí)行函數(shù),bind一般在事件回調(diào)中使用,而call和apply的區(qū)別只是參數(shù)的傳遞方式不同找筝。
4蹈垢、構(gòu)造函數(shù) new
JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來調(diào)用,當(dāng)使用new來創(chuàng)建對象時(shí)袖裕,對應(yīng)的函數(shù)就是構(gòu)造函數(shù)曹抬,通過對象來調(diào)用時(shí)就是普通函數(shù)。
普通函數(shù)的創(chuàng)建有:顯式聲明急鳄、匿名定義谤民、new Function() 等三種方式。
當(dāng)通過new來創(chuàng)建一個(gè)新對象時(shí)攒岛,JS底層將新對象的原型鏈指向了構(gòu)造函數(shù)的原型對象赖临,于是就在新對象和函數(shù)對象之間建立了一條原型鏈,通過新對象可以訪問到函數(shù)對象原型prototype中的方法和屬性灾锯。
5、閉包
閉包其實(shí)是一個(gè)主動執(zhí)行的代碼塊嗅榕,這個(gè)代碼塊的特殊之處是可以永久保存局部變量顺饮,但又不污染全局變量,可以形成一個(gè)獨(dú)立的執(zhí)行過程凌那,因此我們經(jīng)常用閉包來定義組件兼雄。
6、單線程和異步隊(duì)列
setTimeout和setInterval是JS內(nèi)置的兩個(gè)定時(shí)器帽蝶,使用很簡單赦肋,但這兩個(gè)方法背后的原理卻不簡單。
JS是單線程語言励稳,在瀏覽器中佃乘,當(dāng)JS代碼被加載時(shí),瀏覽器會為其分配一個(gè)主線程來執(zhí)行任務(wù)(函數(shù))驹尼,主線程會形成一個(gè)全局執(zhí)行環(huán)境趣避,執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來執(zhí)行。
但在瀏覽器中有一些任務(wù)是非常耗時(shí)的新翎,比如http請求程帕、定時(shí)器、事件回調(diào)等地啰,為了保證其他任務(wù)的執(zhí)行效率不被影響
JS在執(zhí)行環(huán)境中維護(hù)了一個(gè)異步隊(duì)列(也叫工作線程)愁拭,并將這些任務(wù)放入隊(duì)列中進(jìn)行等待,這些任務(wù)的執(zhí)行時(shí)機(jī)并不確定亏吝,只有當(dāng)主線程的任務(wù)執(zhí)行完成以后岭埠,才會去檢查異步隊(duì)列中的任務(wù)是否需要開始執(zhí)行。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。
7枫攀、異步通訊 Ajax技術(shù)
Ajax是瀏覽器專門用來和服務(wù)器進(jìn)行交互的異步通訊技術(shù)括饶,其核心對象是XMLHttpRequest,通過該對象可以創(chuàng)建一個(gè)Ajax請求。為了防止XSS攻擊来涨,瀏覽器對Ajax做了限制图焰,不允許Ajax跨域請求服務(wù)器,就是只能訪問當(dāng)前域名下的url。
如果確信你的站點(diǎn)不存在跨域的風(fēng)險(xiǎn)蹦掐,可以在服務(wù)端主動開啟跨域請求技羔。 也可以直接通過CORS或JSONP來實(shí)現(xiàn)。
JSONP是利用腳本(script)跨域能力來模擬Ajax請求卧抗。
CORS是一個(gè)W3C標(biāo)準(zhǔn)藤滥,全稱是”跨域資源共享”(Cross-origin resource sharing)。它允許瀏覽器向跨源服務(wù)器社裆,發(fā)出XMLHttpRequest請求拙绊,從而克服了AJAX只能同源使用的限制。
8泳秀、DOM對象 document
document對象里保存著整個(gè)web頁面dom結(jié)構(gòu)标沪,在頁面上所有的元素最終都會映射為一個(gè)dom對象。 document也提供了很多api來查找特定的dom對象嗜傅,比如getElementById,querySelector等等金句。
9、事件系統(tǒng) Event
事件是用戶與頁面交互的基礎(chǔ)吕嘀,到目前為止违寞,DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)
由于DOM結(jié)構(gòu)可能會多層嵌套,因此也衍生出了兩種事件流:事件捕獲和事件冒泡偶房,后者最常用趁曼。利用事件冒泡機(jī)制可以實(shí)現(xiàn)很多功能,比如頁面點(diǎn)擊統(tǒng)計(jì)蝴悉。
除此之外彰阴,在頁面初始化、滾動拍冠、隱藏尿这、返回等操作時(shí)分別內(nèi)置了onload/onDOMContentLoaded、onscroll庆杜、onvisibility和onhashchange等事件射众,如果想要捕獲這些事件,需要通過addEventLisener/attachEvent來進(jìn)行綁定晃财。
10叨橱、全局對象 window
在JS中典蜕,當(dāng)一段JS代碼在瀏覽器中被加載執(zhí)行,JS引擎會在內(nèi)存中構(gòu)建一個(gè)全局執(zhí)行環(huán)境罗洗,執(zhí)行環(huán)境的作用是保證所有的函數(shù)能按照正確的順序被執(zhí)行愉舔,而window對象則是這個(gè)執(zhí)行環(huán)境中的一個(gè)全局對象,window對象中內(nèi)置了很多操作api和對象伙菜,document對象就是其中一個(gè)轩缤。