美團(tuán)-前端開發(fā)面經(jīng)（四）
點(diǎn)擊上方藍(lán)字關(guān)注我們
偽類和偽元素的區(qū)別
css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說：偽類和偽元素是用來修飾不在文檔樹中的部分。比如，一句話中的第一個字母，或者是列表中的第一個元素。
偽類和偽元素的具體概念如下：
偽類：用于已有元素處于某種狀態(tài)時為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。【相關(guān)推薦：css在線手冊】
例如：當(dāng)用戶懸停在指定元素時，可以通過:hover來描述這個元素的狀態(tài)，雖然它和一般css相似，可以為已有元素添加樣式，但是它只有處于DOM樹無法描述的狀態(tài)下才能為元素添加樣式，所以稱為偽類。
偽元素：用于創(chuàng)建一些不在DOM樹中的元素，并為其添加樣式。例如，我們可以通過:before來在一個元素之前添加一些文本，并為這些文本添加樣式，雖然用戶可以看見這些文本，但是它實際上并不在DOM文檔中。
請看下面例子：
例一：
<ul>
<li>第一列</li>
<li>第二列</li></ul>
如果我們想要給第一列添加樣式，我們可以通過以下兩種方式：
（1）給第一列添加一個類，并在該類中定義樣式：
<ul>
<li class="first-item">第一列</li>
<li>第二列</li></ul>.first-item{color:orange;}
（2）如果不用添加類的方法，我們可以通過給第一個<li>設(shè)置:first-child偽類來為其添加樣式，這時，被修飾的li依然存在于DOM樹中
<ul>
<li>第一個</li>
<li>第二個</li></ul>li:first-child{color:orage;}
例二：
<p>Hello World, and wish you have a good day!</p>
想要給該段落第一個字母添加樣式，可以有以下方法：
（1）給第一個字母包裹<span>元素，并給span設(shè)置樣式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>.first{color:red;}
（2）如果不創(chuàng)建<span>元素，我們可以通過給<p>元素設(shè)置P:first-letter偽元素為其添加樣式，這時看起來像創(chuàng)建了一個虛擬的span元素并為其添加樣式，但實際上在DOM數(shù)中并不存在這個span元素
<p>Hello World, and wish you have a good day!</p>p:first-letter{color:red;}
從上述例子中我們可以看出：偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔樹外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。
css3規(guī)范中要求使用雙冒號（::）表示偽元素，以此來區(qū)分偽類和偽元素，比如::before和::after等偽元素使用雙冒號（::），:hover和:active偽類使用單冒號（:）。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。
然而除了少部分偽元素如::backdrop必須使用雙冒號（::），大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after一樣可以正常運(yùn)行。
w3c標(biāo)準(zhǔn)中說到，雖然CSS3標(biāo)準(zhǔn)要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。
偽類側(cè)重豐富選擇器的選擇語法范圍內(nèi)元素的選擇能力，偽元素側(cè)重表達(dá)或者定義不在語法定義范圍內(nèi)的抽象元素。
new操作符實現(xiàn)構(gòu)造函數(shù)實例化的過程
以一個構(gòu)造函數(shù)為例：
function Animal(v) { this.age=v };
let cat = new Animal(1);
(1) 創(chuàng)建一個空對象 {}
(2) 在該對象新增屬性 __proto__ 指向 Foo.prototype
{
__proto__: Animal.prototype
}
(3) 執(zhí)行構(gòu)造函數(shù)時，將構(gòu)造函數(shù)的 this 指向該對象。
{
__proto__: Animal.prototype
age: 1
}
(4) 構(gòu)造函數(shù)沒有 return，就返回該對象。
let cat = {
__proto__: Animal.prototype
age: 1
}
原型對象的數(shù)據(jù)結(jié)構(gòu)
任何對象都存在 proto 屬性，包括 prototype，正是通過 prototype.proto 指向其父類的原型對象，來實現(xiàn)了原型鏈。
Animal.prototype
{
__proto__: Object.prototype
constructor: Animal
}
Object.prototype
{
__proto__: null
constructor: Object
}
HTTP五層網(wǎng)絡(luò)模型
物理層
物理層主要的作用就是定義物理設(shè)備如何去傳輸數(shù)據(jù)簡單來說有沒有物理我們的軟件是沒有辦法去使用的所以呢物理層就是這些硬件設(shè)備相關(guān)的東西
數(shù)據(jù)鏈路層
數(shù)據(jù)鏈路層是在等我們的通信實體之間建立數(shù)據(jù)鏈路的連接。那么怎么理解呢？就是說，把我們的物理設(shè)備通過電路之類的鏈接到了一起。
網(wǎng)絡(luò)層
網(wǎng)絡(luò)層為數(shù)據(jù)在結(jié)點(diǎn)之間傳輸創(chuàng)建邏輯電路。比如訪問一個百度的網(wǎng)址，發(fā)起請求后，會去尋找百度這個服務(wù)器的地址。它就是一個邏輯關(guān)系，它是在網(wǎng)絡(luò)層為我們創(chuàng)建的
上面的第三層如果不是很了解也什么關(guān)系，因為這些會相對的底層，如果大家有興趣的話可以自己去深入的了解，如果你沒有什么興趣你也不一定要非常了解才能做好個完美應(yīng)用。
傳輸層
向用戶提供端到端服務(wù)。我們的電腦和百度服務(wù)器建立連接之后，如何去傳輸數(shù)據(jù)，都是在這一層定義的。如果數(shù)據(jù)太大的話，分包，分片，傳輸，到了百度服務(wù)器之后，又需要重新的組裝起來。傳輸層，向高層屏蔽了下層數(shù)據(jù)通信的細(xì)節(jié)。
應(yīng)用層
為應(yīng)用軟件提供了很多服務(wù)。只要new一個服務(wù)對象，就可以使用相關(guān)的工具，傳輸數(shù)據(jù)，構(gòu)建于TCP協(xié)議之上，屏蔽了網(wǎng)絡(luò)傳輸?shù)南嚓P(guān)細(xì)節(jié)。
js中call，apply和bind方法的區(qū)別和使用場景
1、相同點(diǎn)：
三個函數(shù)都會改變this的指向（調(diào)用這三個函數(shù)的函數(shù)內(nèi)部的this）
2、不同點(diǎn)：
1)、bind會產(chǎn)生新的函數(shù)，（把對象和函數(shù)綁定死后，產(chǎn)生新的函數(shù)）
2)、call和apply不會產(chǎn)生新的函數(shù)，只是在調(diào)用時，綁定一下而已。
3)、call和apply的區(qū)別，第一個參數(shù)都是要綁定的this，apply第二個參數(shù)是數(shù)組（是函數(shù)的所有參數(shù)），call把a(bǔ)pply的第二個參數(shù)單列出來。
示例代碼：
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css"></style></head><body><!-- <input type="button" value="測試" onclick="testf()" /> --></body></html><script type="text/javascript">//demo07面試題：請問bind，call，apply的區(qū)別//1、相同點(diǎn)：// 三個函數(shù)都會改變this的指向（調(diào)用這三個函數(shù)的函數(shù)內(nèi)部的this）//2、不同點(diǎn)：// 1)、bind會產(chǎn)生新的函數(shù)，（把對象和函數(shù)綁定死后，產(chǎn)生新的函數(shù)）// 2)、call和apply不會產(chǎn)生新的函數(shù)，只是在調(diào)用時，綁定一下而已。// 3)、call和apply的區(qū)別，第一個參數(shù)都是要綁定的this，apply第二個參數(shù)是數(shù)組（是函數(shù)的所有參數(shù)），call把a(bǔ)pply的第二個參數(shù)單列出來。//示例代碼：var p1 = {name:"隔壁老王",}function eat(str,drinkstr) {console.log(this.name+"在吃"+str+",同時在喝"+drinkstr);}//1、bind：let f1 = eat.bind(p1);//f1是個函數(shù)。即，用bind把eat函數(shù)和p1對象綁死，產(chǎn)生新的函數(shù)叫作f1f1("油條","豆?jié){");//調(diào)用f1，就相當(dāng)于 p1.eat();，內(nèi)部的this就是p1，永遠(yuǎn)都是p1，不會是window//2、call：eat.call(p1,"油潑面","面湯");//不會產(chǎn)生新的函數(shù)，只是臨時把eat函數(shù)和p1對象綁定一下。//3、apply：(與call的意思一樣，只是第二個參數(shù)是數(shù)組，是原函數(shù)eat的參數(shù))eat.apply(p1,["油潑面","面湯"]);//不會產(chǎn)生新的函數(shù)，只是臨時把eat函數(shù)和p1對象綁定一下。</script>
掃碼二維碼
獲取更多面經(jīng)
扶遙就業(yè)