[TOC] ## Javascript创建对象的几种方式？ 1、var obj = {};（使用json创建对象） 如：obj.name = '张三'; obj.action = function () { alert('吃饭'); }; 2、var obj = new Object();（使用Object创建对象） 如：obj.name = '张三'; obj.action = function () { alert('吃饭'); }; 3、通过构造函数创建对象。 (1)、使用this关键字 如：var obj = function (){ this.name ='张三'; this.age = 19 this.action = function () { alert('吃饭'); }; } (2)、使用prototype关键字 如：function obj (){} obj.prototype.name ='张三'; obj.prototype.action=function () { alert('吃饭'); }; 4、使用内置对象创建对象。 如：var str = new String("实例初始化String"); var str1 = "直接赋值的String"; var func = new Function("x","alert(x)");//示例初始化func var obj = new Object();//示例初始化一个Object ## javascript 代码中的"use strict"; 意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持 1.全局变量显式声明 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。 "use strict"; 　　v = 1; // 报错，v未声明 　　for(i = 0; i < 2; i++) { // 报错，i未声明 　　} 因此，严格模式下，变量都必须先用var命令声明，然后再使用。 2 禁止this关键字指向全局对象 function f(){ 　　　　return !this; 　　} 　　// 返回false，因为"this"指向全局对象，"!this"就是false 　　function f(){ 　　　　"use strict"; 　　　　return !this; 　　} 　　// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。 因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。 function f(){ 　　　　"use strict"; 　　　　this.a = 1; 　　}; 　　f();// 报错，this未定义 3禁止删除变量 严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。 "use strict"; 　　var x; 　　delete x; // 语法错误 　　var o = Object.create(null, {'x': { 　　　　　　value: 1, 　　　　　　configurable: true 　　}}); 　　delete o.x; // 删除成功 4对象不能有重名的属性 正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。 "use strict"; 　　var o = { 　　　　p: 1, 　　　　p: 2 　　}; // 语法错误 5函数不能有重名的参数 正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。 　"use strict"; 　　function f(a, a, b) { // 语法错误 　　　　return ; 　　} ## overflow 1.visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 当父元素,子元素的高宽确定时, overflow: auto; 父<子,出滚动条 overflow: scroll; 不管 父是不是<子,都出滚动条（只要设置scroll，就会出现滚动条） overflow: hidden; 子溢出的都会被截掉 2.不加overflow:scroll;滚动条出现在了html的上一层document元素上 3.考虑 document html body: 1.html body中只有一个有overflow属性时,这个属性会传给document 2.当且仅当html body都存在overflow属性时.body的overflow属性才能生效, 3.当html body都存在overflow属性时.body的overflow属性一直都会作用于body身上, html的overflow属性一直都会作用于document身上 ## 禁止系统默认的滚动条 html{overflow:hidden;height: 100%;} -->高度与初始包含块保持统一 body{overflow:hidden;height: 100%;} --》只作用在body自己身上，html会作用在document上 ## 清除浮动：让浮动的子元素把父元素撑开 1.给父元素设置高度（扩展性不好） 开启了BFC 2、给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效) 3、设置overflow clear的特性 4、空标签清除浮动 (IE6 最小高度 19px；（解决后IE6下还有2px偏差）) 兼容性:IE6 最小高度 19px,即一切高度小于19px的元素在IE6下都会被渲染成19px 在浮动元素后边添加：<div class="clear"></div> 1）.clear{clear: both;} --》不设置高度可以正常显示 2）.clear{height: 0;clear: both;} 设置高度时，IE6 会有 19px的空白高度，此时在父级上设置font-size：0 --》IE6下还有2px空白行 缺点： 1，多添加标签，破坏结构样式。 2，此空白标签不能添加内容，不利于后期的维护 3，添加高度，IE6兼容问题。 5、br清浮动(不符合工作中：结构、样式、行为，三者分离的要求) 在浮动元素后边添加：<br clear='all'/> br中的clear属性(attributes)对应的不是css中的clear(proterty) clear的特性 + 触发了haslayout 6、伪元素after(不支持IE6、IE7) :after{content: "";display: block;clear: both;} IE6、IE7 给父级添加{zoom：1} --》，只在IE6、IE7中识别，提高性能 清除浮动模板： ``` <style> .clearfix{ *zoom:1; } .clearfix:after{ content: ""; display: block; clear: both; } .box{ border:1px solid red; } .item{ width: 200px; height: 200px; background-color: red; float: left; } </style> <div class="box clearfix"> <div class="item"></div> </div> ``` ## 下面代码输出什么？ ``` for(var i = 0; i < 10; i++) { setTimeout(() => { console.log(i) }, 0) } ``` 答案: 10个10 若要输出从0到9，怎么办？ 答案: 将var改为let，或者使用闭包。 // 使用闭包 ``` for(var i = 0; i < 10; i++) { (function (i) { setTimeout(() => { console.log(i) }, 0); })(i); } ```