【每日十分钟前端】基础篇9，label作用与使用、IE盒模型和W3C盒模型、new的原理

1、[HTML]label 有什么作用？如何使用？
2、[CSS]IE 盒模型和 W3C 盒模型有什么区别?
3、[JS]new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

---

1、label 有什么作用？如何使用？

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
即babel标签用可以让用户点击文字区域，自动聚焦到当前项的input框内（input设置id，label设置for属性，for值==id值）

用法：

<label for = "NameA">Lable区</label>
<input type="text" name="NameA" id="NameA" />

<label>Lable区<input type="text" name="NameB" /><label>

2、IE 盒模型和 W3C 盒模型有什么区别?

IE盒模型：height/width=content+padding+border；
W3C盒模型：height/width=content。

css3的box-sizing:border-box;可以设置W3C模型改为IE模型。
border-box（IE盒明星）和content-box（W3C）

注：自IE6的兼容模式开始，已经弃用IE盒模型了。

3、new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

new运算符创建一个用户定义的对象类型的实例或具有狗营造函数的内置对象实例。

new运算符会进行如下操作：

1)、创建空的对象{}；
2)、连接该对象（设置该对象的constructor）到另一个对象，即新对象隐式原型__proto__连接到构造函数显式原型prototype上；
3)、将步骤1创建的对象作为this上下文，执行了构造函数并将构造函数作用域指向新对象；
4)、如果该函数没有返回值，则返回this，即返回一个空对象；

如果返回的是undefined、null以及基本类型的时候，都会返回对象，而只有返回对象的时候，才会返回构造函数的返回值。

因此，我们要判断result是不是object类型，如果是object类型，那么就返回result，否则，返回obj。

let objFacroty = (func) => {
    let target = {}；
    target.__protp__ = func.prototype;
    let res = func.call(target);
    if(typeof(res) == "object"||typeof(res) == "function") {
        return res
    }
    return target;
}

区别：

用new Object()方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会产生方法调用必须的堆栈信息，方法调用结束后，还要释放改堆栈，性能不如字面量的方式。
而通过字面量定义对象时，不会调用Object构造函数，简介且性能更好。