1,ES5/ES6 的繼承除了寫法以外還有什么區(qū)別鸯檬?
ES5的繼承實質(zhì)上是先創(chuàng)建子類的實例對象决侈,然后再將父類的方法添加到this上(Parent.apply(this)).
ES6的繼承機制完全不同,實質(zhì)上是先創(chuàng)建父類的實例對象this(所以必須先調(diào)用父類的super()方法)京闰,然后再用子類的構(gòu)造函數(shù)修改this颜及。
ES5的繼承時通過原型或構(gòu)造函數(shù)機制來實現(xiàn)甩苛。
ES6通過class關(guān)鍵字定義類,里面有構(gòu)造方法俏站,類之間通過extends關(guān)鍵字實現(xiàn)繼承讯蒲。子類必須在constructor方法中調(diào)用super方法,否則新建實例報錯肄扎。因為子類沒有自己的this對象墨林,而是繼承了父類的this對象,然后對其進行加工犯祠。如果不調(diào)用super方法旭等,子類得不到this對象。
2衡载,http狀態(tài)碼有哪些搔耕?分別是什么意思?
簡單版:
? ? ? ? 100? Continue? ?繼續(xù)痰娱,一般在發(fā)送post請求時弃榨,已發(fā)送了http header之后服務(wù)端將返回此信息,表示確認(rèn)梨睁,之后發(fā)送具體參數(shù)信息
? ? ? ? 200? OK? ? ? ? ?正常返回信息
? ? ? ? 201? Created? ? 請求成功并且服務(wù)器創(chuàng)建了新的資源
? ? ? ? 202? Accepted? ?服務(wù)器已接受請求鲸睛,但尚未處理
? ? ? ? 301? Moved Permanently? 請求的網(wǎng)頁已永久移動到新位置。
? ? ? ? 302? Found? ? ? ?臨時性重定向坡贺。
? ? ? ? 303? See Other? ?臨時性重定向官辈,且總是使用 GET 請求新的 URI。
? ? ? ? 304? Not Modified 自從上次請求后遍坟,請求的網(wǎng)頁未修改過拳亿。
? ? ? ? 400? Bad Request? 服務(wù)器無法理解請求的格式,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求政鼠。
? ? ? ? 401? Unauthorized 請求未授權(quán)风瘦。
? ? ? ? 403? Forbidden? ?禁止訪問。
? ? ? ? 404? Not Found? ?找不到如何與 URI 相匹配的資源公般。
? ? ? ? 500? Internal Server Error? 最常見的服務(wù)器端錯誤万搔。
? ? ? ? 503? Service Unavailable 服務(wù)器端暫時無法處理請求(可能是過載或維護)。
3官帘,瀏覽器是如何渲染頁面的瞬雹?
瀏覽器從HTTP服務(wù)器獲取html文檔,到呈現(xiàn)頁面給用戶刽虹,會經(jīng)過以下幾個步驟:
(簡述瀏覽器渲染過程
解析HTML以構(gòu)建DOM樹:渲染引擎開始解析HTML文檔酗捌,轉(zhuǎn)換樹中的html標(biāo)簽或js生成的標(biāo)簽到DOM節(jié)點,它被稱為 — 內(nèi)容樹。
構(gòu)建渲染樹:解析CSS(包括外部CSS文件和樣式元素以及js生成的樣式)胖缤,根據(jù)CSS選擇器計算出節(jié)點的樣式尚镰,創(chuàng)建另一個樹 — 渲染樹。
布局渲染樹: 從根節(jié)點遞歸調(diào)用哪廓,計算每一個元素的大小狗唉、位置等,給每個節(jié)點所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)涡真。
繪制渲染樹: 遍歷渲染樹分俯,每個節(jié)點將使用UI后端層來繪制。
)
1哆料、解析文檔構(gòu)建DOM樹
瀏覽器的解析內(nèi)容可以分為三個部分:
HTML/XHTML/SVG:解析這三種文件后缸剪,會生成DOM樹(DOM Tree)
CSS:解析樣式表,生成CSS規(guī)則樹(CSS Rule Tree)
JavaScript:解析腳本东亦,通過DOM API和CSSOM API操作DOM Tree和CSS Rule Tree杏节,與用戶進行交互。
以上三類文件的執(zhí)行順序會根據(jù)其在文檔中的位置及其標(biāo)簽屬性的不同而有異同讥此,具體在后文進行討論拢锹。
2谣妻、構(gòu)建渲染樹
解析文檔完成后萄喳,瀏覽器引擎會將 CSS Rule Tree 附著到DOM Tree 上,并根據(jù)DOM Tree 和 CSS Rule Tree構(gòu)造 Rendering Tree(渲染樹)蹋半。此處需要注意:
Render Tree和DOM Tree的區(qū)別在于他巨,類似Head或display:node之類的東西不會放在渲染樹中;
將CSS Rule Tree匹配到DOM Tree需要解析CSS的選擇器减江,為了提高該過程的性能染突,DOM樹應(yīng)該盡量小,CSS Selector應(yīng)該盡量使用id和class辈灼,避免過度層疊份企。
3、布局與繪制渲染樹
解析position, overflow, z-index等等屬性巡莹,計算每一個渲染樹節(jié)點的位置和大小司志,此過程被稱為reflow。最后調(diào)用操作系統(tǒng)的Native GUI API完成繪制(repain)降宅。注意:
渲染樹的節(jié)點骂远,在Gecko中稱為frame,而在webkit中稱為renderer腰根;
reflow和repaint是兩個不同的概念激才,其區(qū)別會在后文進行探討。
4,typeof和instanceof相同點與不同點
相同點:
typeof和instanceof都用來判斷一個變量的數(shù)據(jù)類型瘸恼。
不同點:
typeof返回值是一個字符串劣挫, 用來說明變量的數(shù)據(jù)類型。
typeof一般只能返回如下六個數(shù)據(jù)類型东帅,null會返回Object揣云,若參數(shù)為引用類型,始終返回object :number, boolean, string, function, object, undefined冰啃。
instanceof返回一個布爾值邓夕。
instanceof一般用來判斷一個變量是否來自某個引用類型的實例,判斷在其原型鏈中是否存在一個構(gòu)造函數(shù)的prototype屬性阎毅,如:
console.log([]instanceofArray);// trueconsole.log([]instanceofObject);// true
可以看到的是[]是來自于Array是沒有問題的焚刚,返回值為true;但是[] instanceof Object也為true是我們不想看到的扇调,這是因為在javascript中矿咕,Object是最頂級的數(shù)據(jù)類型,所有的引用類型最終都會指向Object
對于這種情況狼钮,我們可以使用ES6新增的Array.isArray([])來進行判斷碳柱,也可以通過[].constructor === Array來判斷