javascript面試題

1. JS 有哪些數(shù)據(jù)類型病毡?

根據(jù) JavaScript 中的變量類型傳遞方式克胳,分為基本數(shù)據(jù)類型引用數(shù)據(jù)類型兩大類七種。

基本數(shù)據(jù)類型包括Undefined臼勉、NullBoolean餐弱、Number宴霸、String镜盯、Symbol (ES6新增)六種。

引用數(shù)據(jù)類型只有Object一種猖败,主要包括對(duì)象速缆、數(shù)組和函數(shù)。

判斷數(shù)據(jù)類型采用typeof操作符恩闻,有兩種語(yǔ)法:

typeof123;//語(yǔ)法一constFG =123;typeofFG;//語(yǔ)法二typeof(null)//返回 object;null==undefined//返回true艺糜,因?yàn)閡ndefined派生自null;null===undefined//返回false。復(fù)制代碼

2. 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型有什么區(qū)別幢尚?

(1)兩者作為函數(shù)的參數(shù)進(jìn)行傳遞時(shí):

基本數(shù)據(jù)類型傳入的是數(shù)據(jù)的副本破停,原數(shù)據(jù)的更改不會(huì)影響傳入后的數(shù)據(jù)。

引用數(shù)據(jù)類型傳入的是數(shù)據(jù)的引用地址尉剩,原數(shù)據(jù)的更改會(huì)影響傳入后的數(shù)據(jù)真慢。

(2)兩者在內(nèi)存中的存儲(chǔ)位置:

基本數(shù)據(jù)類型存儲(chǔ)在棧中

引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針理茎,該指針指向的數(shù)據(jù)實(shí)體存儲(chǔ)在堆中黑界。

3. 判斷數(shù)據(jù)類型的方法有哪些?

(1)利用typeof可以判斷數(shù)據(jù)的類型皂林;

(2)A instanceofB可以用來判斷A是否為B的實(shí)例朗鸠,但它不能檢測(cè) null 和 undefined

(3)B.constructor == A可以判斷A是否為B的原型础倍,但constructor檢測(cè) Object與instanceof不一樣烛占,還可以處理基本數(shù)據(jù)類型的檢測(cè)

不過函數(shù)的 constructor 是不穩(wěn)定的沟启,這個(gè)主要體現(xiàn)在把類的原型進(jìn)行重寫忆家,在重寫的過程中很有可能出現(xiàn)把之前的constructor給覆蓋了,這樣檢測(cè)出來的結(jié)果就是不準(zhǔn)確的德迹。

(4)Object.prototype.toString.call()

Object.prototype.toString.call()是最準(zhǔn)確最常用的方式芽卿。

4. 與深拷貝有何區(qū)別?如何實(shí)現(xiàn)浦辨?

淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針蹬竖,而不復(fù)制對(duì)象本身。淺拷貝的實(shí)現(xiàn)方式有:

(1)Object.assign():需注意的是目標(biāo)對(duì)象只有一層的時(shí)候流酬,是深拷貝币厕;

(2)擴(kuò)展運(yùn)算符;

深拷貝就是在拷貝數(shù)據(jù)的時(shí)候芽腾,將數(shù)據(jù)的所有引用結(jié)構(gòu)都拷貝一份旦装。深拷貝的實(shí)現(xiàn)方式有:

(1)手寫遍歷遞歸賦值;

(2)結(jié)合使用JSON.parse()和JSON.stringify()方法摊滔。

5. let阴绢、const的區(qū)別是什么店乐?

var、let呻袭、const都是用于聲明變量或函數(shù)的關(guān)鍵字眨八。其區(qū)別在于:

varletconst

作用域函數(shù)作用域塊級(jí)作用域塊級(jí)作用域

作用域內(nèi)聲明提升有無(暫時(shí)性死區(qū))無

是否可重復(fù)聲明是否否

是否可重復(fù)賦值是是否(常量)

初始化時(shí)是否必需賦值否否是

6. 什么是執(zhí)行上下文和執(zhí)行棧?

變量或函數(shù)的執(zhí)行上下文左电,決定了它們的行為以及可以訪問哪些數(shù)據(jù)廉侧。每個(gè)上下文都有一個(gè)關(guān)聯(lián)的變量對(duì)象,而這個(gè)上下文中定義的所有變量和函數(shù)都存在于這個(gè)對(duì)象上(如DOM中全局上下文關(guān)聯(lián)的便是window對(duì)象)篓足。

每個(gè)函數(shù)調(diào)用都有自己的上下文段誊。當(dāng)代碼執(zhí)行流進(jìn)入函數(shù)時(shí),函數(shù)的上下文被推到一個(gè)執(zhí)行棧中栈拖。在函數(shù)執(zhí)行完之后连舍,執(zhí)行棧會(huì)彈出該函數(shù)上下文,在其上的所有變量和函數(shù)都會(huì)被銷毀涩哟,并將控制權(quán)返還給之前的執(zhí)行上下文索赏。JS的執(zhí)行流就是通過這個(gè)執(zhí)行棧進(jìn)行控制的

7. 什么是作用域和作用域鏈染簇?

作用域可以理解為一個(gè)獨(dú)立的地盤参滴,可以理解為標(biāo)識(shí)符所能生效的范圍强岸。作用域最大的用處就是隔離變量锻弓,不同作用域下同名變量不會(huì)有沖突。ES6中有全局作用域蝌箍、函數(shù)作用域和塊級(jí)作用域三層概念青灼。

當(dāng)一個(gè)變量在當(dāng)前塊級(jí)作用域中未被定義時(shí),會(huì)向父級(jí)作用域(創(chuàng)建該函數(shù)的那個(gè)父級(jí)作用域)尋找妓盲。如果父級(jí)仍未找到杂拨,就會(huì)再一層一層向上尋找,直到找到全局作用域?yàn)橹姑醭摹_@種一層一層的關(guān)系弹沽,就是作用域鏈

8. 作用域和執(zhí)行上下文的區(qū)別是什么筋粗?

(1)函數(shù)的執(zhí)行上下文只在函數(shù)被調(diào)用時(shí)生成策橘,而其作用域在創(chuàng)建時(shí)已經(jīng)生成;

(2)函數(shù)的作用域會(huì)包含若干個(gè)執(zhí)行上下文(有可能是零個(gè)娜亿,當(dāng)函數(shù)未被調(diào)用時(shí))丽已。

9. this指向的各種情況都有什么?

this的指向只有在調(diào)用時(shí)才能被確定买决,因?yàn)閠his是執(zhí)行上下文的一部分沛婴。

(1)全局作用域中的函數(shù):其內(nèi)部this指向window:

vara =1;functionfn(){console.log(this.a)}fn()//輸出1復(fù)制代碼

(2)對(duì)象內(nèi)部的函數(shù):其內(nèi)部this指向?qū)ο蟊旧恚?/p>

vara =1;varobj = {a:2,fn:function(){console.log(this.a)}}obj.fn()//輸出2復(fù)制代碼

(3)構(gòu)造函數(shù):其內(nèi)部this指向生成的實(shí)例:

functioncreateP(name,age){this.name = name//this.name指向Pthis.age = age//this.age指向P}varp =newcreateP("老李",46)復(fù)制代碼

(4)由apply吼畏、call、bind改造的函數(shù):其this指向第一個(gè)參數(shù):

functionadd(c,d){returnthis.a +this.b + c + d}varo = {a:1,b:2)add.call(o,5,7)//輸出15復(fù)制代碼

(5)箭頭函數(shù):箭頭函數(shù)沒有自己的this嘁灯,看其外層的是否有函數(shù)泻蚊,如果有,外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this丑婿,如果沒有藕夫,則this是window。

10.如何改變this指針的指向枯冈?

可以使用apply毅贮、call、bind方法改變this指向(并不會(huì)改變函數(shù)的作用域)尘奏。比較如下:

(1)三者第一個(gè)參數(shù)都是this要指向的對(duì)象滩褥,也就是想指定的上下文,上下文就是指調(diào)用函數(shù)的那個(gè)對(duì)象(沒有就指向全局window)炫加;

(2)bind和call的第二個(gè)參數(shù)都是數(shù)組瑰煎,apply接收多個(gè)參數(shù)并用逗號(hào)隔開;

(3)apply和call只對(duì)原函數(shù)做改動(dòng)俗孝,bind會(huì)返回新的函數(shù)(要生效還得再調(diào)用一次)酒甸。

11.什么是閉包?

閉包就是引用了其他函數(shù)作用域中變量的函數(shù)赋铝,這種模式通常在函數(shù)嵌套結(jié)構(gòu)中實(shí)現(xiàn)插勤。里面的函數(shù)可以訪問外面函數(shù)的變量,外面的變量的是這個(gè)內(nèi)部函數(shù)的一部分革骨。閉包有如下作用:

(1)加強(qiáng)封裝农尖,模擬實(shí)現(xiàn)私有變量;

(2)實(shí)現(xiàn)常駐內(nèi)存的變量良哲。

閉包不能濫用盛卡,否則會(huì)導(dǎo)致內(nèi)存泄露,影響網(wǎng)頁(yè)的性能筑凫。閉包使用完了后滑沧,要立即釋放資源,將引用變量指向null巍实。

12. 什么是原型滓技、原型鏈?

原型:JS聲明構(gòu)造函數(shù)(用來實(shí)例化對(duì)象的函數(shù))時(shí)蔫浆,會(huì)在內(nèi)存中創(chuàng)建一個(gè)對(duì)應(yīng)的對(duì)象殖属,這個(gè)對(duì)象就是原函數(shù)的原型構(gòu)造函數(shù)默認(rèn)有一個(gè)prototype屬性瓦盛,prototype的值指向函數(shù)的原型洗显。同時(shí)原型中也有一個(gè)constructor屬性外潜,constructor的值指向原函數(shù)

通過構(gòu)造函數(shù)實(shí)例化出來的對(duì)象挠唆,并不具有prototype屬性处窥,其默認(rèn)有一個(gè)__proto__屬性,__proto__的值指向構(gòu)造函數(shù)的原型對(duì)象玄组。在原型對(duì)象上添加或修改的屬性滔驾,在所有實(shí)例化出的對(duì)象上都可共享。

當(dāng)在實(shí)例化的對(duì)象中訪問一個(gè)屬性時(shí)俄讹,首先會(huì)在該對(duì)象內(nèi)部尋找哆致,如找不到,則會(huì)向其__proto__指向的原型中尋找患膛,如仍找不到摊阀,則繼續(xù)向原型中__proto__指向的上級(jí)原型中尋找,直至找到或Object.prototype為止踪蹬,這種鏈狀過程即為原型鏈胞此。

13. 何為防抖和節(jié)流?如何實(shí)現(xiàn)跃捣?

防抖和節(jié)流都是防止短時(shí)間內(nèi)高頻觸發(fā)事件的方案漱牵。

防抖的原理是:如果一定時(shí)間內(nèi)多次執(zhí)行了某事件,則只執(zhí)行其中的最后一次疚漆。

節(jié)流的原理是:要執(zhí)行的事件每隔一段時(shí)間會(huì)被冷卻酣胀,無法執(zhí)行。

應(yīng)用場(chǎng)景有:搜索框?qū)崟r(shí)搜索愿卸,滾動(dòng)改變相關(guān)的事件灵临。

//@fn: 要執(zhí)行的函數(shù)//@delay: 設(shè)定的時(shí)限//防抖函數(shù)functiondebunce(fn,delay){letflag =null;returnfunction(){if(flag)clearTimeout(flag)//利用apply改變函數(shù)指向,使得封裝后的函數(shù)可以接收event本身flag =setTimeout(()=>fn.apply(this,arguments),delay)? }}//節(jié)流函數(shù)functionthrottle(fn,delay){letflag =true;returnfunction(){if(!flag)returnfalse;? ? flag =false;setTimeout(()=>{? ? ? fn.apply(this,arguments)? ? ? flag=true},delay)? }}復(fù)制代碼

14. 如何理解同步和異步趴荸?

同步:按照代碼書寫順序一一執(zhí)行處理指令的一種模式,上一段代碼執(zhí)行完才能執(zhí)行下一段代碼宦焦。

異步:可以理解為一種并行處理的方式发钝,不必等待一個(gè)程序執(zhí)行完,可以執(zhí)行其它的任務(wù)波闹。

JS之所以需要異步的原因在于JS是單線程運(yùn)行的酝豪。常用的異步場(chǎng)景有:定時(shí)器、ajax請(qǐng)求精堕、事件綁定孵淘。

15. JS是如何實(shí)現(xiàn)異步的?

JS引擎是單線程的歹篓,但又能實(shí)現(xiàn)異步的原因在于事件循環(huán)和任務(wù)隊(duì)列體系瘫证。

事件循環(huán):

JS 會(huì)創(chuàng)建一個(gè)類似于while (true)的循環(huán)揉阎,每執(zhí)行一次循環(huán)體的過程稱之為Tick。每次Tick的過程就是查看是否有待處理事件背捌,如果有則取出相關(guān)事件及回調(diào)函數(shù)放入執(zhí)行棧中由主線程執(zhí)行毙籽。待處理的事件會(huì)存儲(chǔ)在一個(gè)任務(wù)隊(duì)列中,也就是每次Tick會(huì)查看任務(wù)隊(duì)列中是否有需要執(zhí)行的任務(wù)毡庆。

任務(wù)隊(duì)列:

異步操作會(huì)將相關(guān)回調(diào)添加到任務(wù)隊(duì)列中坑赡。而不同的異步操作添加到任務(wù)隊(duì)列的時(shí)機(jī)也不同,如onclick,setTimeout,ajax處理的方式都不同么抗,這些異步操作是由瀏覽器內(nèi)核的webcore來執(zhí)行的毅否,瀏覽器內(nèi)核包含3種 webAPI,分別是DOM Binding蝇刀、network搀突、timer模塊。

onclick 由DOM Binding模塊來處理熊泵,當(dāng)事件觸發(fā)的時(shí)候仰迁,回調(diào)函數(shù)會(huì)立即添加到任務(wù)隊(duì)列中。setTimeout由timer模塊來進(jìn)行延時(shí)處理顽分,當(dāng)時(shí)間到達(dá)的時(shí)候徐许,才會(huì)將回調(diào)函數(shù)添加到任務(wù)隊(duì)列中。ajax由network模塊來處理卒蘸,在網(wǎng)絡(luò)請(qǐng)求完成返回之后雌隅,才將回調(diào)添加到任務(wù)隊(duì)列中。

主線程:

JS 只有一個(gè)線程缸沃,稱之為主線程恰起。而事件循環(huán)是主線程中執(zhí)行棧里的代碼執(zhí)行完畢之后,才開始執(zhí)行的趾牧。所以检盼,主線程中要執(zhí)行的代碼時(shí)間過長(zhǎng),會(huì)阻塞事件循環(huán)的執(zhí)行翘单,也就會(huì)阻塞異步操作的執(zhí)行吨枉。

只有當(dāng)主線程中執(zhí)行棧為空的時(shí)候(即同步代碼執(zhí)行完后),才會(huì)進(jìn)行事件循環(huán)來觀察要執(zhí)行的事件回調(diào)哄芜,當(dāng)事件循環(huán)檢測(cè)到任務(wù)隊(duì)列中有事件就取出相關(guān)回調(diào)放入執(zhí)行棧中由主線程執(zhí)行貌亭。

16. 什么是AJAX?如何實(shí)現(xiàn)认臊?

ajax是一種能夠?qū)崿F(xiàn)局部網(wǎng)頁(yè)刷新的技術(shù)圃庭,可以使網(wǎng)頁(yè)異步刷新。

ajax的實(shí)現(xiàn)主要包括四個(gè)步驟:

(1)創(chuàng)建核心對(duì)象XMLhttpRequest;

(2)利用open方法打開與服務(wù)器的連接剧腻;

(3)利用send方法發(fā)送請(qǐng)求拘央;("POST"請(qǐng)求時(shí),還需額外設(shè)置請(qǐng)求頭)

(4)監(jiān)聽服務(wù)器響應(yīng)恕酸,接收返回值堪滨。

//1-創(chuàng)建核心對(duì)象//該對(duì)象有兼容問題,低版本瀏覽器應(yīng)使用ActiveXObjectconstxthhp =newXMLHttpRequest();//2-連接服務(wù)器//open(method,url,async)xhttp.open("POST","http://localhost:3000",true)//設(shè)置請(qǐng)求頭xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")蕊温;//3-發(fā)送請(qǐng)求//send方法發(fā)送請(qǐng)求參數(shù)袱箱,如為GET方法,則在open中url后拼接xhttp.send({_id:123})//4-接收服務(wù)器響應(yīng)//onreadystatechange事件义矛,會(huì)在xhttp的狀態(tài)發(fā)生變化時(shí)自動(dòng)調(diào)用xhttp.onreadystatechange =function(){//狀態(tài)碼共5種:0-未open? 1-已open? 2-已send? 3-讀取響應(yīng)? 4-響應(yīng)讀取結(jié)束if(xhttp.readyState ==4&& xhttp.status ==200){? alert("ajax請(qǐng)求已完成")? }}復(fù)制代碼

17. 實(shí)現(xiàn)異步的方式有哪些发笔?

(1)回調(diào)函數(shù)模式:將需要異步執(zhí)行的函數(shù)作為回調(diào)函數(shù)執(zhí)行,其缺點(diǎn)在于處理復(fù)雜邏輯異步邏輯時(shí)凉翻,會(huì)造成回調(diào)地獄(回調(diào)嵌套層數(shù)太多了讨,代碼結(jié)構(gòu)混亂);

(2)事件監(jiān)聽模式:采用事件驅(qū)動(dòng)的思想制轰,當(dāng)某一事件發(fā)生時(shí)觸發(fā)執(zhí)行異步函數(shù)前计,其缺點(diǎn)在于整個(gè)代碼全部得變?yōu)槭录?qū)動(dòng)模式,難以分辨主流程垃杖;

(3)發(fā)布訂閱模式:當(dāng)異步任務(wù)執(zhí)行完成時(shí)發(fā)布消息給信號(hào)中心男杈,其他任務(wù)通過在信號(hào)中心中訂閱消息來確定自己是否開始執(zhí)行;

(4)Promise(ES6):Promise對(duì)象共有三種狀態(tài)pending(初始化狀態(tài))调俘、fulfilled(成功狀態(tài))伶棒、rejected(失敗狀態(tài))。

(5)async/await(ES7):基于Promise實(shí)現(xiàn)的異步函數(shù)彩库;????(6)利用生成器實(shí)現(xiàn)肤无。

18. 怎么理解Promise對(duì)象?

Promise對(duì)象有如下兩個(gè)特點(diǎn)

(1)對(duì)象的狀態(tài)不受外界影響骇钦。Promise對(duì)象共有三種狀態(tài)pending宛渐、fulfilled、rejected司忱。狀態(tài)值只會(huì)被異步結(jié)果決定皇忿,其他任何操作無法改變。

(2)狀態(tài)一旦成型坦仍,就不會(huì)再變,且任何時(shí)候都可得到這個(gè)結(jié)果叨襟。狀態(tài)值會(huì)由pending變?yōu)閒ulfilled或rejected繁扎,這時(shí)即為resolved。

Promise的缺點(diǎn)有如下三個(gè)缺點(diǎn):

(1)Promise一旦執(zhí)行便無法被取消;

(2)不可設(shè)置回調(diào)函數(shù)梳玫,其內(nèi)部發(fā)生的錯(cuò)誤無法捕獲爹梁;

(3)當(dāng)處于pending狀態(tài)時(shí),無法得知其具體發(fā)展到了哪個(gè)階段提澎。

Pomise中常用的方法有:

(1)Promise.prototype.then():Promise實(shí)例的狀態(tài)發(fā)生改變時(shí)姚垃,會(huì)調(diào)用then內(nèi)部的回調(diào)函數(shù)。then方法接受兩個(gè)參數(shù)(第一個(gè)為resolved狀態(tài)時(shí)時(shí)執(zhí)行的回調(diào)盼忌,第一個(gè)為rejected狀態(tài)時(shí)時(shí)執(zhí)行的回調(diào))

(2)Promise.prototype.catch():.then(null, rejection)或.then(undefined, rejection)的別名积糯,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。

19. 怎么理解宏任務(wù)谦纱,微任務(wù)看成??跨嘉?

宏任務(wù)有:script(整體代碼)川慌、setTimeout、setInterval祠乃、I/O梦重、頁(yè)面渲染;

微任務(wù)有:Promise.then亮瓷、Object.observe琴拧、MutationObserver。

執(zhí)行順序大致如下:

主線程任務(wù)——>宏任務(wù)——>微任務(wù)——>微任務(wù)里的宏任務(wù)——>.......——>直到任務(wù)全部完成

20. 什么是跨域寺庄?怎么解決跨域問題艾蓝?

跨域問題實(shí)際是由同源策略衍生出的一個(gè)問題,當(dāng)傳輸協(xié)議斗塘、域名赢织、端口任一部分不一致時(shí),便會(huì)產(chǎn)生跨域問題馍盟,從而拒絕請(qǐng)求于置,但<img src=XXX> <link href=XXX><script src=XXX>;天然允許跨域加載資源。解決方案有:

(1)JSONP

原理:利用<script>;標(biāo)簽沒有跨域限制的漏洞贞岭,使得網(wǎng)頁(yè)可以得到從其他來源動(dòng)態(tài)產(chǎn)生的JSON數(shù)據(jù)(前提是服務(wù)器支持)八毯。

優(yōu)點(diǎn):實(shí)現(xiàn)簡(jiǎn)單,兼容性好瞄桨。

缺點(diǎn):僅支持get方法话速,容易受到XSS攻擊。

(2)CORS

原理:服務(wù)器端設(shè)置Access-Control-Allow-Origin以開啟CORS芯侥。該屬性表示哪些域名可以訪問資源泊交,如設(shè)置通配符則表示所有網(wǎng)站均可訪問固耘。

實(shí)現(xiàn)實(shí)例(express):

//app.js中設(shè)置varapp = express();//CORS跨域-------------------------------------------------------------------------------------// CORS:設(shè)置允許跨域中間件varallowCrossDomain =function(req, res, next){// 設(shè)置允許跨域訪問的 URL(* 表示允許任意 URL 訪問)res.header("Access-Control-Allow-Origin","*");// 設(shè)置允許跨域訪問的請(qǐng)求頭res.header("Access-Control-Allow-Headers","X-Requested-With,Origin,Content-Type,Accept,Authorization");// 設(shè)置允許跨域訪問的請(qǐng)求類型res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");// 設(shè)置允許服務(wù)器接收 cookieres.header('Access-Control-Allow-Credentials','true');? next();};app.use(allowCrossDomain);//------------------------------------------------------------------------------------復(fù)制代碼

(3)Node中間件代理

原理:同源策略僅是瀏覽器需要遵循的策略颜及,故搭建中間件服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求與響應(yīng)辱志,達(dá)到跨域目的比庄。

/* server1.js 代理服務(wù)器(http://localhost:3000)*/consthttp =require('http')// 第一步:接受客戶端請(qǐng)求constserver = http.createServer((request, response) =>{// 代理服務(wù)器,直接和瀏覽器直接交互研乒,需要設(shè)置CORS 的首部字段response.writeHead(200,{'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'*','Access-Control-Allow-Headers':'Content-Type'})// 第二步:將請(qǐng)求轉(zhuǎn)發(fā)給服務(wù)器constproxyRequest = http.request({host:'127.0.0.1',port:4000,url:'/',method:request.method,headers:request.headers? ? ? },serverResponse=>{// 第三步:收到服務(wù)器的響應(yīng)varbody =''serverResponse.on('data',chunk=>{? ? ? ? ? body += chunk? ? ? ? })? ? ? ? serverResponse.on('end',()=>{console.log('The data is '+ body)// 第四步:將響應(yīng)結(jié)果轉(zhuǎn)發(fā)給瀏覽器response.end(body)? ? ? })? ? })? .end()? })server.listen(3000,()=>{console.log('中間件服務(wù)器地址: http://localhost:3000')})// server2.js(http://localhost:4000)consthttp =require("http");constdata = {title:"fontend",password:"123456"};constserver = http.createServer((request, response) =>{if(request.url ==="/") {? ? ? ? response.end(JSON.stringify(data));? ? }});server.listen(4000,() =>{console.log("The server is running at http://localhost:4000");});復(fù)制代碼

(4)nginx反向代理

原理:類似Node中間件服務(wù)器汹忠,通過nginx代理服務(wù)器實(shí)現(xiàn)。

實(shí)現(xiàn)方法:下載安裝nginx雹熬,修改配置宽菜。

21. 實(shí)現(xiàn)繼承的方法有哪些?橄唬?赋焕?

實(shí)現(xiàn)繼承的方法有:

(1)class+extends繼承(ES6)

//類模板classAnimal{constructor(name){this.name = name? }}//繼承類classCatextendsAnimal{//重點(diǎn)。extends方法仰楚,內(nèi)部用constructor+superconstructor(name){super(name);//super作為函數(shù)調(diào)用時(shí)隆判,代表父類的構(gòu)造函數(shù)}//constructor可省略eat(){console.log("eating")? }}復(fù)制代碼

(2)原型繼承

//類模板functionAnimal(name){this.name = name; }//添加原型方法Animal.prototype.eat =function(){console.log("eating")}functionCat(furColor){this.color = color ;};//繼承類Cat.prototype =newAnimal()//重點(diǎn):子實(shí)例的原型等于父類的實(shí)例復(fù)制代碼

(3)借用構(gòu)造函數(shù)繼承

functionAnimal(name){this.name = name}functionCat(){Animal.call(this,"CatName")//重點(diǎn),調(diào)用父類的call方法}復(fù)制代碼

(4)寄生組合式繼承(重點(diǎn))

22. DOM事件模型和事件流僧界?

DOM事件模型包括事件捕獲(自上而下觸發(fā))與事件冒泡(自下而上觸發(fā)侨嘀,ie用的就是冒泡)機(jī)制∥娼螅基于事件冒泡機(jī)制可以完成事件代理咬腕。

事件捕獲

事件冒泡

DOM事件流包括三個(gè)階段事件捕獲階段、處于目標(biāo)階段葬荷、事件冒泡階段涨共。

23. EventLoop事件循環(huán)是什么?

js是一門單線程的需要宠漩,它的異步操作都是通過事件循環(huán)來完成的举反。整個(gè)事件循環(huán)大體由執(zhí)行棧、消息隊(duì)列和微任務(wù)隊(duì)列三個(gè)部分組成扒吁。

同步代碼會(huì)直接在執(zhí)行棧中調(diào)用執(zhí)行火鼻。

定時(shí)器中的回調(diào)會(huì)在執(zhí)行棧被清空且定時(shí)達(dá)成時(shí)推入執(zhí)行棧中執(zhí)行。

promise雕崩、async異步函數(shù)的回調(diào)會(huì)被推入到微任務(wù)隊(duì)列中魁索,當(dāng)執(zhí)行棧被清空且異步操作完成時(shí)立即執(zhí)行。

24.require/import之間的區(qū)別盼铁?

(1)require是CommonJS語(yǔ)法粗蔚,import是ES6語(yǔ)法;

(2)require只在后端服務(wù)器支持饶火,import在高版本瀏覽器及Node中都可以支持支鸡;

(3)require引入的是原始導(dǎo)出值的復(fù)制冬念,import則是導(dǎo)出值的引用趁窃;

(4)require時(shí)運(yùn)行時(shí)動(dòng)態(tài)加載牧挣,import是靜態(tài)編譯;

(5)require調(diào)用時(shí)默認(rèn)不是嚴(yán)格模式醒陆,import則默認(rèn)調(diào)用嚴(yán)格模式.

作者:星始流年

鏈接:https://juejin.cn/post/6913022820691738631

來源:掘金

著作權(quán)歸作者所有瀑构。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處刨摩。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末寺晌,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子澡刹,更是在濱河造成了極大的恐慌呻征,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件罢浇,死亡現(xiàn)場(chǎng)離奇詭異陆赋,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嚷闭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門攒岛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人胞锰,你說我怎么就攤上這事灾锯。” “怎么了嗅榕?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵顺饮,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我凌那,道長(zhǎng)兼雄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任案怯,我火速辦了婚禮君旦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嘲碱。我一直安慰自己金砍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布麦锯。 她就那樣靜靜地躺著恕稠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪扶欣。 梳的紋絲不亂的頭發(fā)上鹅巍,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天千扶,我揣著相機(jī)與錄音,去河邊找鬼骆捧。 笑死澎羞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的敛苇。 我是一名探鬼主播妆绞,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼枫攀!你這毒婦竟也來了括饶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤来涨,失蹤者是張志新(化名)和其女友劉穎图焰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蹦掐,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡技羔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了笤闯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片堕阔。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖颗味,靈堂內(nèi)的尸體忽然破棺而出超陆,到底是詐尸還是另有隱情,我是刑警寧澤浦马,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布时呀,位于F島的核電站,受9級(jí)特大地震影響晶默,放射性物質(zhì)發(fā)生泄漏谨娜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一磺陡、第九天 我趴在偏房一處隱蔽的房頂上張望趴梢。 院中可真熱鬧,春花似錦币他、人聲如沸坞靶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)彰阴。三九已至,卻和暖如春拍冠,著一層夾襖步出監(jiān)牢的瞬間尿这,已是汗流浹背簇抵。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留射众,地道東北人碟摆。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像责球,于是被迫代替她去往敵國(guó)和親焦履。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 1. js有哪幾種數(shù)據(jù)類型雏逾?如何判斷數(shù)據(jù)的類型? 基本類型:Number, String, Boolean, nu...
    麥西的西閱讀 1,700評(píng)論 0 1
  • 文章首發(fā)于 szhshp的第三邊境研究所 郑临,轉(zhuǎn)載請(qǐng)注明 一道Javascript面試題引發(fā)的血案 先來看幾道面試題...
    szhielelp閱讀 998評(píng)論 0 15
  • 摘要: 神奇的JS系列栖博。 作者:前端小智 原文:8個(gè)問題看你是否真的懂 JS Fundebug經(jīng)授權(quán)轉(zhuǎn)載,版權(quán)歸原...
    Fundebug閱讀 7,188評(píng)論 0 28
  • 原文章鏈接https://mp.weixin.qq.com/s?__biz=Mzg3ODAyMzkxOQ==&mi...
    炎奕閱讀 351評(píng)論 0 1
  • 推薦指數(shù): 6.0 書籍主旨關(guān)鍵詞:特權(quán)厢洞、焦點(diǎn)仇让、注意力、語(yǔ)言聯(lián)想躺翻、情景聯(lián)想 觀點(diǎn): 1.統(tǒng)計(jì)學(xué)現(xiàn)在叫數(shù)據(jù)分析丧叽,社會(huì)...
    Jenaral閱讀 5,726評(píng)論 0 5