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

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

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

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

舉個在node環境運行的例子：

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

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

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

react 生命周期

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

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

作為前端的我所關注的是頁面的構建和事件的處理

頁面構建又可以分為解析 HTML 代碼并且構建文檔對象模型 DOM 和執行 JavaScript 代碼

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

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

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

包含在函數內的代碼叫作函數代碼，而在所有函數以外的代碼叫作全局代碼。

執行上下文也分兩種 全局執行上下文和函數執行上下文；當 JavaScript 程序開始執行時就已經創建了全局上下文；而函數執行上下文是在每次調用函數時，就會創建一個函數上下文

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

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

轉移到函數相關

轉移到原型相關

轉移到 DOM 相關

轉移到 class 相關

Number、String 和 Boolean，三個構造器是兩用的，當跟 new 搭配時，它們產生對象，當直接調用時，它們表示強制類型轉換。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。