前端小知识1

100 阅读4分钟
1.css三列布局(即左右定宽,中间自适应)
  1. 可用float+magin实现,两边左右浮动,中间设两边margin即可。
  2. 浮动+bfc实现:两边左右浮动,中间开bfc即可。
  3. flex实现:父容器开flex;左右列设宽度;中间取flex:1。
2.css实现两列布局(即左边固定右边自适应)
  1. 左边固定浮动,右边加margin-left即可。
  2. 左边固定浮动,右边flex:1即可。
3.水平垂直居中
  1. 父级开相对定位,子级绝对定位,上左各移50%,然后子级transfrom:translate(-50%,-50%)
  2. 父级开flex布局,给子级上下左右居中即可。
  3. 父元素相对定位;子元素绝对定位并上下左右设0;子元素margin:auto
4.简述一下盒模型

盒模型有两种,一种是标准盒子模型,一种是IE盒子模型。标准盒子模型由margin、border、padding、content组成;IE盒子模型由nargin和content组成。标准盒子模型加属性box-sizing:boder-box就转换成了IE盒子模型。

5.简述一下bfc

bfc翻译过来就是块级格式上下文,其实就是一个独立的可布局空间,开启bfc后的盒子里面的布局不会影响外面的布局,外面的布局也不会影响里面的布局。开启bfc的方法有:开浮动、overflow属性除了visible值、display:inline-block/table、flex布局、绝对和固定定位。bfc可以拿来创建独立渲染环境、控制外边距的合并、给父元素开bfc就能包裹浮动的子元素了。

6.闭包

首先,闭包不是必须return,也不是一定会造成内存泄漏。闭包就是函数嵌套,内层函数使用了外层函数的变量。使用return就是为了让函数作用域外部能够使用函数作用域内部的变量,这个变量是函数私有的外部不可访问更改,但是return出来的内层函数就可由外部来调用并操作这个变量。再说一下内存泄漏问题,一般情况下函数作用域内变量使用完毕后其内存会自动被回收,但是如果有全局变量承接了闭包函数的执行的话,就会将该函数作用域内部的变量和全局变量关联,就会造成不关闭页面闭包函数变量不被回收的内存泄漏问题。(如图result全局变量可以关联到count) image.png

7.箭头函数

其实,对象是对基本数据类型的封装。函数是对数据操作流程的封装。js里为了实现功能普通函数引入了很多复杂操作。所以es6引入箭头函数,就是为了还原函数的本质。箭头函数没有this、super、arguments,不能使用new来调用,没有原型。它打印出来的this是闭包实现的拿到上层函数的this。

8.var let const
  1. var定义的变量是挂载在全局window上的,会污染全局。
  2. let定义的变量只会在块级作用域内有效,块级嵌套的话,里面块的可以使用外面块的变量。
  3. var会造成重复声明的问题而let不会
  4. let也会声明提升(变量提升)只是声明和赋值之间不能写代码。这叫暂时性死区。
this指向问题

非函数内:浏览器环境this指向window,node环境this指向空对象。 箭头函数没有this,它输出的this是基于闭包的层层传递过来的。普通函数,如果new调用的话那就指向新创建的对象,对象调用的话那就指向对象,全局调用的话那就指向window。通过call apply bind调用就会指向第一个参数。call和bind传的参数都是第一个是this指向,其余是正常参数,而apply的第二个参数是一个数组,数组里放的是各个参数。bind返回的是一个函数,并没有直接调用函数。apply的应用场景有给类数组用数组的方法。