总结面试题——Javascript
文章目錄
- 1.閉包
- 2.作用域鏈
- 3.JavaScript的原型 原型鏈 有什么特點
- 4.事件代理
- 5.Javascript如何實現(xiàn)繼承
- 6.this對象
- 7.事件模型
- 8.new操作符
- 9.ajax原理
- 10.解決跨域問題
- 11.模塊化開發(fā)怎么做
- 12.異步加載js的方式有哪些
- 13.會造成內(nèi)存泄漏的操作
- 14.XML和JSON的區(qū)別
- 15.webpack
- 16.AMD和Commonjs
- 17.常見web安全及護(hù)理原理
- 18 用過哪些設(shè)計模式？
- 19 為什么要有同源限制？
- 20 offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別
- 21.Javascript有哪些方法定義對象
- 22.常見的兼容性問題
- 23.promise
- 24.Jquery有哪些寫得好的地方
- 25.vue react angular
- 26.Node的應(yīng)用場景
- 27.web開發(fā)中會話跟蹤的方法
- 28.js的基本數(shù)據(jù)類型
- 29.Js中的內(nèi)置對象
- 30.寫Javascript的規(guī)范
- 31.Javascript有幾種類型的值
- 32.null和undefined的區(qū)別
1.閉包
閉包就是在函數(shù)中嵌套函數(shù) 作用是可以讀取其他函數(shù)中的變量 突破作用域 并且在函數(shù)中涉及到的變量會永遠(yuǎn)保存于內(nèi)存中
2.作用域鏈
作用域鏈就是在執(zhí)行環(huán)境中有序的限制和控制變量以及函數(shù)的可訪問范圍 在作用域鏈中變量只能向上訪問不能向下
3.JavaScript的原型 原型鏈 有什么特點
每個對象都會在其內(nèi)部初始化一個屬性 就是原型 prototype
當(dāng)我們訪問一個對象中不存在的屬性時 他會去他的prototype 中尋找 未找到再向prototype中尋找 以此類推 就形成了原型鏈
關(guān)系：instance.constructor.prototype = instance.proto
構(gòu)造函數(shù)的原型對象=實例化對象的對象原型
特點：當(dāng)我們更改構(gòu)造函數(shù)的原型時 相應(yīng)的構(gòu)造函數(shù)中也可以繼承到該屬性 當(dāng)我們需要一個對象中的屬性時 Javascript引擎會幫我們尋找當(dāng)前對象中是否有 如果沒有則向上prototype中去尋找 一直檢索到 Object 內(nèi)建對象
4.事件代理
事件代理又稱為事件委托 就是根據(jù)DOM的事件冒泡原理 將應(yīng)該注冊的事件委托給父元素 讓其擔(dān)當(dāng)事件的監(jiān)聽職務(wù) 從而大量的節(jié)省內(nèi)存的占用 減少事件的注冊尤其是動態(tài)添加的子元素?zé)o需為其注冊事件
5.Javascript如何實現(xiàn)繼承
可以使用原型對象和構(gòu)造函數(shù)的混合方式實現(xiàn)繼承
6.this對象
在函數(shù)中的this指向函數(shù)的直接調(diào)用者
如果有new關(guān)鍵字 則this指向new實例的對象
在事件中this指向出發(fā)這個事件的對象 IE中的attchEvent（綁定事件）函數(shù)的默認(rèn)this指向為window 要解決問題可以通過call改變方法的指向
7.事件模型
W3c中定義事件的發(fā)生經(jīng)歷三個階段 捕獲階段 目標(biāo)階段 冒泡階段
冒泡型事件 當(dāng)使用冒泡事件時 子級元素先觸發(fā) 父級元素后觸發(fā)
捕獲型事件 當(dāng)使用捕獲事件時 父級元素先觸發(fā) 子級元素后出發(fā)
DOM事件流 同時支持捕獲和冒泡事件
阻止冒泡 W3c中使用stoppropagation（）方法 在IE下設(shè)置cancelBubble=true
阻止捕獲 阻止事件的默認(rèn)行為 在W3c中使用preventDefault（）方法 在IE下設(shè)置window.event.returnValue = false
8.new操作符
創(chuàng)建一個空白對象 并且this變量引用該對象 同時繼承該對象的原型
屬性和方法都被加入到this引用的對象中
新創(chuàng)建的對象由this所引用 并且最后隱式的返回this
9.ajax原理
Ajax的原理簡單來說是在用戶和服務(wù)器之間加了—個中間層(AJAX引擎) 通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求 從服務(wù)器獲得數(shù)據(jù) 然后用javascript來操作DOM而更新頁面 使用戶操作與服務(wù)器響應(yīng)異步化 這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)
Ajax的過程只涉及JavaScript XMLHttpRequest和DOM XMLHttpRequest是ajax的核心機(jī)制
ajax優(yōu)點
通過異步模式 提升了用戶體驗
優(yōu)化了瀏覽器和服務(wù)器之間的傳輸 減少不必要的數(shù)據(jù)往返 減少帶寬的占用
Ajax在客戶端運(yùn)行 承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作 減少了大用戶量下的服務(wù)器負(fù)載
Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）
ajax缺點
安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)
對搜索引擎的支持比較弱
不容易調(diào)試
10.解決跨域問題
首先了解下瀏覽器的同源策略 同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源
解決跨域：
通過jsonp跨域
document.domain + iframe跨域
nginx代理跨域
nodejs中間件代理跨域
后端在頭部信息里面設(shè)置安全域名
11.模塊化開發(fā)怎么做
一個功能就是一個模塊 多個模塊可以組成完整應(yīng)用 抽離一個模塊不會影響其他模塊的運(yùn)行
立即執(zhí)行函數(shù)不暴露私有成員
12.異步加載js的方式有哪些
defer 只支持IE
asyec
創(chuàng)建script 插入DOM中 加載完畢后callBack
13.會造成內(nèi)存泄漏的操作
內(nèi)存泄露指任何對象在您不再擁有和需要他之后仍然存在
setTimeout的第一個參數(shù)使用字符串而非函數(shù)的話會發(fā)生內(nèi)存泄漏
閉包使用不恰當(dāng) 控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）
14.XML和JSON的區(qū)別
JSON相對于XML來說 數(shù)據(jù)體積更小 傳遞的速度更快些
JSON和script的之間的交互更加方便 更容易解析處理 更好的數(shù)據(jù)交互
JSON對數(shù)據(jù)的描述比XML較差
JSON的速度要遠(yuǎn)快于XML
15.webpack
WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、Javascript、CSS以及各種靜態(tài)文件（圖片、字體等），讓開發(fā)過程更加高效。對于不同類型的資源，webpack有對應(yīng)的模塊加載器。webpack模塊打包器會分析模塊間的依賴關(guān)系，最后 生成了優(yōu)化且合并后的靜態(tài)資源
16.AMD和Commonjs
Commonjs是后端服務(wù)器模塊的規(guī)范 node.js采用這個規(guī)范 Common規(guī)范加載模塊是同步的也就是說只有加載完成后才能進(jìn)行后面的操作
AMD規(guī)范則是非同步加載模塊 允許指定回調(diào)函數(shù) AMD推薦的風(fēng)格通過返回一個對象作為模塊對象
Commonjs的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的
es6模塊 CommonJS、AMD、CMD
CommonJS 的規(guī)范中，每個 JavaScript 文件就是一個獨立的模塊上下文（module context），在這個上下文中默認(rèn)創(chuàng)建的屬性都是私有的。也就是說，在一個文件定義的變量（還包括函數(shù)和類），都是私有的，對其他文件是不可見的。
CommonJS是同步加載模塊,在瀏覽器中會出現(xiàn)堵塞情況，所以不適用
AMD 異步，需要定義回調(diào)define方式
es6 一個模塊就是一個獨立的文件，該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量 es6還可以導(dǎo)出類、方法，自動適用嚴(yán)格模式
17.常見web安全及護(hù)理原理
- sql注入原理
就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令
總結(jié)以下幾點：
永遠(yuǎn)不要信任用戶的輸入，要對用戶的輸入進(jìn)行校驗，可以通過正則表達(dá)式，或限制長度，對單引號和雙"-"進(jìn)行轉(zhuǎn)換等
永遠(yuǎn)不要使用動態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取
永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接
不要把機(jī)密信息明文存放，請加密或者h(yuǎn)ash掉密碼和敏感的信息 - XSS原理及防范
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當(dāng)用戶提交表單的時候，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點 - XSS防范方法
首先代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊 - XSS與CSRF有什么區(qū)別嗎？
XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟
- CSRF的防御
服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機(jī)數(shù)
通過驗證碼的方法
18 用過哪些設(shè)計模式？
工廠模式解決了重復(fù)實例化的問題，但還有一個問題,那就是識別問題，因為根本無法
主要好處就是可以消除對象間的耦合，通過使用工程方法而不是new關(guān)鍵字
使用構(gòu)造函數(shù)的方法，即解決了重復(fù)實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不同之處在于
直接將屬性和方法賦值給 this對象;
19 為什么要有同源限制？
同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議
舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
20 offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別
- offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
- clientWidth/clientHeight返回值只包含content + padding，如果有滾動條，也不包含滾動條
- scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸
21.Javascript有哪些方法定義對象
對象字面量：var obj={}
構(gòu)造函數(shù)：var obj=new object（）
Object.create（）：var obj=Object.create（Object.prototype）
22.常見的兼容性問題
png24位的圖片在IE瀏覽器上出現(xiàn)背景解決方案是做成png8
瀏覽器默認(rèn)的margin和padding不同 可通過 全局添加margin：0；padding：0；來統(tǒng)一
IE下evevnt對象有x，y屬性 但是沒有pagex，pagey屬性
Firefox下event對象有pagex pagey屬性沒有x y 屬性
23.promise
依照promise/A+的定義 promise有四種狀態(tài)
pending ：初始狀態(tài) 非 fulfilled（成功的操作）或 rejected（失敗的操作）
fulfilled和rejected合稱settled
promise對象用于延遲（deferred）和異步（asynchronous）計算
promise的構(gòu)造函數(shù)
基本用法如下：
promise實例擁有then方法（具有then方法的對象 通常被稱為thenable）使用方法如下
p1.then（（aa，bb）
接收兩個函數(shù)做為參數(shù)aa就是在fulfilled的時候被調(diào)用 bb在rejected的被調(diào)用 接收的參數(shù)就是future aa對應(yīng)resolve bb對應(yīng)reject
24.Jquery有哪些寫得好的地方
1>jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中 有助于防止變量的全局污染 然后通過傳入window對象參數(shù) 可以使windown對象作為局部變量使用 好處是當(dāng)jquery 訪問windown對象的時候 就不用將作用域鏈退回訪頂級作用域了 從而可以更快的訪問windown對象了 同樣傳遞undefined參數(shù) 可以縮短查找undefined時的作用域鏈
2>jquery將一些原型屬性和方法封裝在了jquery.prototype中 為了縮短名稱 又賦值給了jquery.fn 這是很形象的寫法
3>有一些數(shù)組和對象的方法經(jīng)常能使用到 jquery將其保存為局部變量以提高訪問速度
4>jquery實現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼 所有返回的都是同一對象 可以提高代碼效率
25.vue react angular
vue.js一個用于創(chuàng)建web交互頁面的庫 是一個精簡的MVVM 他通過雙向數(shù)據(jù)綁定把view層和model層連接起來 實際的DOM封裝和輸出格式都被抽象為了Directives和Filtes
AngularJs是一個比較完善的前端MVVM框架 包含模板 數(shù)據(jù)雙向綁定 路由 模塊化 服務(wù) 依賴注入等所有功能 模板功能強(qiáng)大豐富自帶豐富的Angular指令
react React僅僅是VIEW層facebook公司 推出的用于構(gòu)建ui的一個庫能都是先服務(wù)器端的渲染使用virtual dom 所以性能很好
26.Node的應(yīng)用場景
特點
他是一個Javascript運(yùn)行環(huán)境
依賴于chrome V8引擎進(jìn)行代碼解釋
事件驅(qū)動
非堵塞I/O
單進(jìn)程 單線程
優(yōu)點
高并發(fā)（最重要的優(yōu)點）
缺點
只支持單核cpu 不能充分利用cpu
可靠性能低 一旦代碼某個環(huán)節(jié)崩潰整個代碼崩潰
27.web開發(fā)中會話跟蹤的方法
cookie
session
url重寫
隱藏input
ip地址
28.js的基本數(shù)據(jù)類型
- 未定義undefined
- 空 null
- 布爾 boolean
- 數(shù)字 number
- 字符串 string
29.Js中的內(nèi)置對象
- object是Javascript中的所有對象的父對象
數(shù)據(jù)封裝類對象有：
object Array Boolean Number String
其他對象：
Function Arguments Math Data RegExp Error
30.寫Javascript的規(guī)范
31.Javascript有幾種類型的值
- 棧：原始數(shù)據(jù)類型（Undefined，Null，Boolean，Number、String）
- 堆：引用數(shù)據(jù)類型（對象、數(shù)組和函數(shù)）
- 兩種類型的區(qū)別是：存儲位置不同；
- 原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲；
- 引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定,如果存儲在棧中，將會影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當(dāng)解釋器尋找引用值時，會首先檢索其
- 在棧中的地址，取得地址后從堆中獲得實體
32.null和undefined的區(qū)別
- null 表示不存在這個值
表示一個對象被定義了值為空值 可以理解為一個空對象里面沒有屬性跟方法 - undefined 表示表示缺少值 或者說是應(yīng)該有這個值而并沒有定義
變量被聲明了但是沒有賦值 返回就是undefined - 如果作為函數(shù)的參數(shù) 表示該函數(shù)的參數(shù)不是對象 在驗證null時 一定要用 === 因為 == 無法分別null和undefined
總結(jié)
以上是生活随笔為你收集整理的总结面试题——Javascript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库自学-SQL-四大SQL语句DDL
- 下一篇： java美元兑换,（Java实现） 美元