一年经验的前端该学会的

原文：面试分享：一年经验初探阿里巴巴前端社招 

 

关于这位同学面试过程中涉及到的知识点：

 

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会报错