一年經驗的前端該學會的

原文：面試分享：一年經驗初探阿里巴巴前端社招 

 

關於這位同窗面試過程當中涉及到的知識點：

 

1.標準盒模型、怪異盒模型

簡單來講，box-sizing屬性中，標準盒模型對應content-box（initial），怪異對應border-box（IE），

標準：寬高不包含padding和border

怪異：padding和border是算在寬高裏的

 

2.target與currentTarget

簡單來講：js的事件處理機制是有順序的，先從window開始，通過document，html，body，div這樣刷下來，叫作 事件捕獲

再從div一路回到window叫作 事件冒泡，體如今代碼上就是：當咱們點擊最裏面的div的時候，打印數序應該爲three->two->one

<div id="one">
    <div id="two">
        <div id="three"></div>
    </div>
</div>


one.addEventListener('click',function(e){
    console.log('one');
},false);

two.addEventListener('click',function(e){
    console.log('two');
},false);

three.addEventListener('click',function(e){
    console.log('three');
},true);
//false:默認值，冒泡階段執行 //true:捕獲階段執行

 

那麼target和currentTarget有什麼區別呢

<div id="out">
     <button id="in">如今我來點擊這個button</button>
</div>

var out= document.getElementById("out");
var in= document.getElementById("in");

out.addEventListener('click',function(e){
      e.target;//指向in
      e.currentTarget;//指向out本身
})

in.addEventListener('click',function(e){
      e.target;//指向in
      e.currentTarget;//指向in本身
})

 總結

1. target:觸發事件的某個具體對象，只會出如今事件流的目標階段（誰觸發誰命中，因此確定是目標階段）
2. currentTarget:綁定事件的對象，恆等於this，可能出如今事件流的任意一個階段中
3. 一般狀況下terget和currentTarget是一致的，咱們只要使用terget便可，但有一種狀況必須區分這三者的關係，那就是在父子嵌套的關係中，父元素綁定了事件，單擊了子元素（根據事件流，在不阻止事件流的前提下他會傳遞至父元素，致使父元素的事件處理函數執行），這時候currentTarget指向的是父元素，由於他是綁定事件的對象，而target指向了子元素，由於他是觸發事件的那個具體對象，以下代碼和截圖所示：

 

 

3.淺拷貝深拷貝

看下圖

解釋：數值之間賦值拷貝非地址拷貝，因此更改a時b不會受其影響（若爲數組或對象則是地址拷貝，修改a會影響b），圍繞這個特性展開深拷貝處理

function inCopy(obj1,obj2) {
    var obj1 = obj1 || {};//容錯處理
    for (var k in obj2) { 
        if(obj2.hasOwnProperty(k)){ //只拷貝實例屬性，不進行原型的拷貝
            if(typeof obj2[k] == 'object') { //引用類型的數據單獨處理
                obj1[k] = Array.isArray(obj2[k])?[]:{};
                inCopy(obj1[k],obj2[k]); //遞歸處理引用類型數據
            }else{
                obj1[k] = obj2[k]; //值類型的數據直接進行拷貝
            }
        }
    }
}

這裏注意幾個比較重要的點：

1.容錯處理（細節不解釋）

2.obj.hasOwnProperty(xxx);返回一個bool，檢測obj是否存在屬性xxx，xxx是obj本身的屬性而非_proto_指針指向的屬性（即構造函數prototype的屬性）

3.判斷是否爲array，對其進行定義[] or {}，若不作這一步，直接push會報錯