深克隆和浅克隆
深拷贝和浅拷贝浅拷贝浅拷贝只能拷贝最外面一层更深级别的对象只能拷贝地址,更改拷贝的新对象时也会改变被拷贝的对象
1234567891011121314151617181920212223var obj = { id: 1, name: "andy", msg: { age: 18, },};var o = {};for (var k in obj) { o[k] = obj[k];}console.log(o);// o ={// id: 1,// name: "andy",// msg: {// age: 18// }// }o.msg.age = 2; //obj的msg.age也会改变//另一个浅克隆的方法Object.assign(o, obj);
深拷贝这个方法需要传入两个参数,有些繁琐
12345678910111213141516function deepCopy(newObj, ol ...
变量和函数的声明提升
变量和函数的声明提升变量声明提升1、变量定义可以使用var定义变量，变量如果没有赋值，那变量的初始值为undefined。
2、变量作用域变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆盖。所有不使用var定义的变量都视为全局变量
3、函数作用域和声明提前JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前（hoisting），即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子：注释：声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。
123456var scope = 'global';function f(){ console.log(scope); var scope = ...
JS中offset client scroll的区别
JS中offset client scroll的区别偏移 offsetoffsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetLeft和style.left的区别
style.left只能获取行内样式，offsetLeft 可以获取行内样式和内嵌样式
offsetLeft 只读，style.left可读可写
offsetLeft是数值，style.left是字符串并且有单位px
如果没有加定位，style.left获取的数值可能是无效的
最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
滚动 scrollscrollHeight：在没有滚动条的情况下，元素内容 ...
Js 中 this 的指向性问题
JS 中 this 的指向性问题一般情况下this的最终指向是调用它的对象
1.全局作用域或者普通函数指向全局对象window(定时器中的this指向window)123456789console.log(this);//指向windowfunction(){ console.log(this);}fn();//fn的调用者是window,即window.fn()setTimeout(function(){},1000);//前面也省略了一个window12345678
2. 方法调用中谁调用this指向谁1234567891011var o = { sayHi:function(){ console.log(this);//this指向o这个对象 }}o.sayHi();var btn = document.quereySelector('button');btn.onclick = function(){ console.log(this);// ...
JavaScript中的栈内存和堆内存
JavaScript中的栈内存和堆内存基本概念JavaScript中的变量分为基本类型和引用类型.
基本类型:Undifined,Null,Boolean,Number和String,这些简单数据段在内存中分别占有固定大小的空间,他们的值保存在栈空间,是按值来访问的.
引用类型:引用类型时保存在堆内存中的对象,引用类型的值大小不固定,栈内存中存放地址指向堆内存中的对象,是按引用来访问的.
结合代码和图来理解12345var a = 0; //栈内存var a2 = "this is string"; //栈内存var a3 = null; //栈内存var b = { x:10 };//变量b存在于栈中,{x:10}作为对象存在于堆中var c = [1,2,3];//变量c存在于栈中,[1,2,3]作为对象存在于堆中
当我们要访问堆内存中的引用数据类型时
从栈中获取该对象的地址引用
再从堆内存中获得我们需要的数据
基本类型发生复制行为1234var a = 20;var b = a;b = 30;console.log(a);//20
...
关于BFC
关于BFCBFC定义
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
创建BFC
浮动元素;
position的除static和relative以外的值;
display:table-cell元素;
display:table-caption元素;
display:inline-block元素;
元素设置overflow且值不为visible(hidden|scroll|auto)
BFC的布局规则
不属于BFC中的相邻元素的垂直外边距不会合并;123456<style> p { background-color: tomato; margin: 50px; }</style>
1234567<body> <p>我是第一行</p> & ...
CSS中浮动的影响以及如何清除
CSS中浮动的影响以及如何清除对于刚接触CSS的我来说，浮动属性基本是用来使块元素同行展示的。
但是float之后却产生了许多问题。
元素浮动后产生的问题问题一：父元素高度塌陷现在来写一个例子：
1234567891011121314151617<style> .box { border: 5px solid #333; } .box1 { width: 100px; height: 100px; background-color: tomato; } .box2 { width: 100px; height: 100px; background-color: saddlebrown; }</style>
1234<div class="box"> ...
CSS 伪元素::before和::after的使用
CSS 伪元素::before和::after的使用特性
都作为标签内部的第一个/最后一个子元素
行内元素(无法设置宽高)
content属性必填(若没有就’’)使用场景
文字前的图标1234567891011121314<style> span::before { display: inline-block; content: ''; background: url(home.png) no-repeat; width: 50px; height: 50px; background-size: cover; vertical-align: bottom; }</style><body> <span>这是一个图片</span></body>
导航的跟随线1234567891011121314151 ...