我要推薦一本書，《javascript 忍者秘籍2》，每次閱讀都有不一樣的收獲。這次推薦，我想對于每一個章節(jié)里我不懂的地方，或者說我認為重要的地方說一說。

關(guān)于這些知識點網(wǎng)上百度搜一大堆，比我寫的好的多了去了，但是我還是要寫，別人寫的終究是別人的，我自己寫了，是對知識的二次記憶，記住了才是我的。

首先聲明，文章里面所有的圖片內(nèi)容都來自書籍中。內(nèi)容有書中和我自己的理解。一千個讀者就有一千個哈利波特。我建議你去讀讀這本書，如果有不對的地方請指出

JavaScript 能在很多環(huán)境中執(zhí)行。但是 JavaScript 最初的運行環(huán)境是瀏覽器環(huán)境，而其他運行環(huán)境也是借鑒于瀏覽器環(huán)境。

舉個在node環(huán)境運行的例子：

瀏覽器環(huán)境太常見了，不舉例子的，其他的我不熟不說了，歡迎評論評論補充

要學(xué)好前端，我們需要了解javaScript 工作核心原理和瀏覽器提供的核心 api

我們所接觸的大部分東西都有他的生命周期，比我們前端三大框架中 vue 和 react

react 生命周期

還一個我沒有接觸過，就不說了（ps：逃

有始有終，都有一個從開始到結(jié)束的過程。我們的瀏覽器渲染前端頁面也是一樣的，只是我們平時忽略他罷了。當我們在瀏覽器地址欄里面輸入一串 url 開始他的生命周期就已經(jīng)開始了，當我們關(guān)閉網(wǎng)頁的時候他的生命周期就結(jié)束了。如圖所示

作為前端的我所關(guān)注的是頁面的構(gòu)建和事件的處理

頁面構(gòu)建又可以分為解析 HTML 代碼并且構(gòu)建文檔對象模型 DOM 和執(zhí)行 JavaScript 代碼

注意了 DOM 是根據(jù) HTML 代碼來創(chuàng)建的，但是兩者并不是相同的。我們可以把 HTML 代碼看作瀏覽器頁面 UI 構(gòu)建初始 DOM 的藍圖。為了正確構(gòu)建每個 DOM，瀏覽器還會修復(fù)它在藍圖中發(fā)現(xiàn)的問題。比如在 p 元素里面包裹 div 元素，最終渲染的并不是父子關(guān)系，而是兄弟關(guān)系。

當解析到腳本元素時，瀏覽器就會停止從 HTML 構(gòu)建 DOM，并開始執(zhí)行 JavaScript 代碼。為了避免解析 JavaScript 代碼花費太長時間，而阻塞頁面渲染。我們都是建議把JavaScript 代碼放到 body 元素后面，就是在構(gòu)建完了DOM之后。（解析javascript 會阻塞頁面渲染）

瀏覽器暴露給 JavaScript 引擎的主要全局對象是 window 對象，它代表了包含著一個頁面的窗口。 window 對象是獲取所有其他全局對象、全局變量（甚至包含用戶定義對象）和瀏覽器 API 的訪問途徑。全局 window 對象最重要的屬性是 document，它代表了當前頁面的 DOM。（在控制臺輸入window 可以查看全局屬性和方法）

包含在函數(shù)內(nèi)的代碼叫作函數(shù)代碼，而在所有函數(shù)以外的代碼叫作全局代碼。

執(zhí)行上下文也分兩種 全局執(zhí)行上下文和函數(shù)執(zhí)行上下文；當 JavaScript 程序開始執(zhí)行時就已經(jīng)創(chuàng)建了全局上下文；而函數(shù)執(zhí)行上下文是在每次調(diào)用函數(shù)時，就會創(chuàng)建一個函數(shù)上下文

頁面構(gòu)建完了之后變進入第二個階段，事件處理

瀏覽器執(zhí)行環(huán)境的核心思想基于：同一時刻只能執(zhí)行一個代碼片段，即所謂的單線程執(zhí)行模型。采用事件隊列來跟蹤發(fā)生但是尚未執(zhí)行的事件（JavaScript 是單線程，可能是為了防止兩段代碼同時修改一個DOM,造成頁面混亂，什么的） 一個任務(wù)一旦被執(zhí)行，就不會被其他任務(wù)給中斷

轉(zhuǎn)移到函數(shù)相關(guān)

轉(zhuǎn)移到原型相關(guān)

轉(zhuǎn)移到 DOM 相關(guān)

轉(zhuǎn)移到 class 相關(guān)

Number、String 和 Boolean，三個構(gòu)造器是兩用的，當跟 new 搭配時，它們產(chǎn)生對象，當直接調(diào)用時，它們表示強制類型轉(zhuǎn)換。

promise 模擬一個請求， axios 實現(xiàn)原理，應(yīng)該就是用他，我并沒有閱讀過源碼我猜測的。

function getJSON(url){return new Promise((resolve,reject)=>{//創(chuàng)建并返回一個新的promise對象const request = new XMLHttpRequest()//創(chuàng)建一個XMLHttprequest對象request.open('GET',url)//初始化請求request.onload=function(){//“注冊一個onload方法，當服務(wù)端的響應(yīng)后會被調(diào)用”try{if(this.status==200){//“即使服務(wù)端正常響應(yīng)也并不意味著一切如期發(fā)生，只有當服務(wù)端返回的狀態(tài)碼為200（一切正常）時，再使用服務(wù)端的返回結(jié)果”resolve(JSON.parse(this.request))//“嘗試解析JSON字符串，倘若解析成功則執(zhí)行resolve,并將解析后的對象作為參數(shù)傳入”}else{reject(this.status+' '+ this.statusText)}}catch(e){reject(e.message)//“如果服務(wù)器返回了不同的狀態(tài)碼，或者如果在解析JSON字符串時發(fā)生了異常，則對該promise執(zhí)行reject方法”}}request.onerror=function(){//“如果和服務(wù)器端通信過程中發(fā)生了錯誤，則對該promise執(zhí)行reject方法”reject(this.status+' '+ this.statusText)}request.send()//發(fā)送請求}) } getJSON("data/ninjas.json").then(ninjas => {}).catch(e => fail("Shouldn't be here:" + e)); 　　//←---　使用由getJSON函數(shù)創(chuàng)建的promise來注冊resolve和reject回調(diào)函數(shù)”

總結(jié)

以上是生活随笔為你收集整理的浏览器控制台执行代码_JavaScript 和 浏览器那些事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。