标准盒子:w3c标准盒模型--设置本身宽高过后,设置内边距和border会撑大盒子。 在css里面写上box-size:border-box 盒子就成了id盒模型(怪异盒子模型, c3盒模型)。实际宽高就固定了,设置内边距和border都不会撑大,是多少就是多少。
flex:1的意思: 1、flex-grow:是用来增大子盒子的,父盒子宽度大于子盒子,子盒子就可以根据flex-grow的占比来分配剩下的宽度。 2、flex-shrink:是用来缩小子盒子的,父盒子宽度小于子盒子的时候,子盒子根据flex-shrink的占比来对子盒子进行缩放。 3、flex-basis:用来设置盒子的基准宽度, 和width同时存在的时候,会把width去掉。
c3新属性: flex布局、c3盒子模型(box-size:border-box)、background-size、border-radius圆角设置、transition过渡。
BFC: 翻译为块级格式化上下文。就是一种属性,让该区渲染独立,不会影响到外界。 如何触发? 浮动、绝对定位或者固定定位、行内块元素,flex、overflew不是visible、根元素(html)。 目的: 清除浮动、浮动的盒子被盖住的问题、margin重叠(两个盒子分别给外边距,实际外边距距离是只有一个最大的,bfc后就两个外边距都显示出来。)
数据类型: 值类型(基本类型):字符串、数字型、布尔型、对空(null)、未定义(undifined)、symbol。 (symbol 表示独一无二的值,避免重名的冲突---给对象添加属性的时候,容易造成属性名字冲突,导致原来的值被覆盖,使用sumbol就会避免这种问题给对象加一个独一无二的属性名) 引用数据类型(对象类型):对象(object)、数组(array)、函数(function)、(注:还有两个特殊的对象---正则(regexp)和日期(date) instanceof运算符原理是用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。 (举例:检测一个是否为数组:---- arr instanceof Array ----- Array isArray(arr) ----- Object.prototype.toString.call(arr)(采用借用的toString的方式来检测)) constructor(原型对象上的一个属性:函数本身的引用):获取实例由哪个构造函数创建的。可以检测由字面量方式创建出来的数据。
创建对象的方式:直接声明(字面量)、new关键字(new Object)、构造函数()。 实例对象:new先申请一个空对象---空对象的对象原型(--proto--)指向构造函数的原型对象(prototype) --构造函数中的this指向了空对象---调用构造函数,通过this给实例对象添加属性---函数内部返回了实例。 通过this添加的成员都是实例成员。(实例对象不能访问到静态成员) 静态成员就是在构造函数本身上添加的成员(静态成员只能通过构造函数来访问) constractor是指名原型对象的构造函数是哪个。
继承:原型链继承:通过将子构造函数的原型对象指向父构造函数的实例对象然后需要父构造函数的实例对象constrocter要指回子构造函数。(缺点:只继承了方法,并没有继承夫构造函数的属性) 借用构造函数继承:在子构造函数中写入父构造函数的call(this,属性名)的方法来借用构造函数继承 两个组合继承就既可以继承父构造函数的方法和属性了(缺点是子构造函数的实例对象是继承两次父构造函数的属性,造成属性的冗余,浪费性能),解决办法就是通过子原型对象Object.create(父构造函数原型对象) es6的类class继承方式是通过extands super(调用父类的构造函数) // 1. 原型链继承 Star.prototype = new Person() Star.prototype.constructor = Star // 2. 借用构造函数继承 Person.call(this,name,age) // 3. 组合继承 = 原型链继承 + 借用构造函数继承 // 4. 寄生组合继承 把Star.prototype = new Person()这一行变成 Star.prototype = Object.create(Person.prototype) (object.create就是创建一个空对象,该空对象的对象原型就是第一个参数,也就是Person.prototype,那么该对象原型上面的就存有方法可以去用) // 5. es6的类class继承方式 extends super(调用父类的构造函数)
垃圾回收机制:js内存是自动分配和回收的。内存不在使用就自动进行回收。(内存泄漏就是内存无法被回收)。GC与垃圾回收机制是一样的。 垃圾(全局的东西是不会被垃圾回收的)核心算法就是看内存有没有在使用。 引用计数:被引用一次+1,不被引用-1,为零的时候该内存释放。 标记清楚:就是通过根节点(全局),标记所有从根节点开始的能够访问的对象,没被标记的对象就是没有全局引用的垃圾对象,最终会清除所有没有标记的对象。
异步:js是单线程的,一个一个执行的(在遇到耗时的任务,会委托宿主环境帮忙执行,当主线任务也就是同步任务执行完成后,再去执行回调函数), js本身是无法发起异步的,但是es5之后提出了promise可以进行异步操作。 异步任务又分为宏任务(由宿主环境发起的异步:宏任务---setTimeout、setInterval、setImmediate以及特殊的代码块script) 和微任务(由 javascript 自身发起的异步:微任务)(注:在js核心里只有promise是微任务(then(),catch()))。 事件轮询(eventloop)先去判断任务类型,同步任务就会放在主线程直接执行,异步任务会委托给宿主环境(浏览器)去执行,之后会回调函数放入任务队列, 当主线任务执行完了,去任务队列去拿取(类似与队列的先进先出)拿取在任务队列里最前面的回调函数, 执行顺序 先执行宏任务(特殊的代码块就是一个宏任务也就是script标签,所以执行完同步任务后会去执行里面的微任务) 宏任务执行完后看微任务队列是否有微任务 没有微任务执行下一个宏任务 有微任务将所有微任务执行 执行完微任务,执行下一个宏任务 传统异步的问题
promis:promise对象用于表示一个异步操作最终完成或失败通过then和catch后去其返回值。也是为了操作异步更容易,可以将异步操作以同步操作的流程表达出来。避免了层层嵌套的回调函数(回调地狱)。 (注:promis一般有三个状态:待定(pending)、已兑现(fulfilled)、操作失败(rejected)) promise处理回调地狱的核心:在上一个then中返回一个新的promise处理异步而在下一个then中可以获取到上一个then中返回的promise的结果。
作用域链:贯穿全局、父级和子级的链式规则,子级可以访问除自己和同级以外的所有作用域的变量。存在同名的变量就采用就近原则。
闭包:闭包就是可以读取其他函数内部变量的函数(函数内部再定义一个函数-子函数内部可以访问父级函数的变量),本质就函数内部与外界产生关系。 优点:可以访问到外部函数的局部变量、避免全局变量被污染。 缺点:多层函数每一次运行都会生成一个新的闭包,会保存外部的内部变量,导致闭包的数据没有被回收,会造成内存泄漏,解决方案就是利用浏览器的标记清除的特性(垃圾回收机制)在最后,将函数调用赋值为null。
浅拷贝:只拷贝了一层。深层次的拷贝只拷贝了地址。 深拷贝:json.stiring(json.parse()) 会造成数据丢失和异常(函数和undifined直接丢失,NaN和正负最大值变成null,正则和err错误只能得到空对象)。 采用递归深拷贝可以解决这个问题: