js面试题

js中的三座大山:

1. 原型与原型链
2. 作用域、闭包、垃圾回收和内存泄漏
3. 异步和单线宏任务微任务

一：javascript原型与原型链

        1.每个函数都有一个prototype，称之为显示原型

        2.每个实例对象都有一个__proto__属性，称之为隐式原型

        每一个实例对象的__proto__，都指向它的构造函数prototype

        3.每个prototype原型都有一个constructor，它可以监测数据，指向它关联的构造函数

原型链：

                 获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null

Object是属于原型链的顶层，所有构造函数的的prototype都指向 Object.prototype

作用域和自由变量

        变量作用域：就是一个变量可以使用的范围。

种类:

        全局作用域、函数作用域、es6提供的块级作用域         

 作用域链：

        自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了作用域链

自由变量的概念： 

        当前作用域没有定义的变量

        

变量提升（预解析）

       var声明的变量和function声明的函数存在变量提升、let const 不会变量提升

闭包：

           函数作为参数被传递
           函数作为返回值被返回

闭包的优点：

可以重复使用变量，不会造成变量污染

闭包的缺点：

内存消耗很大，在IE中可能导致内存泄露

this总结 （重要）

普通函数中调用，this指向window
对象方法中调用，this指向当前对象
call apply bind中调用， this指向被传入的对象
class中的方法中调用， this指向实例对象
箭头函数，this就是父级上下文中的this

call apply bind的区别？

        call中的参数必须是一个一个添加，而apply中的参数是以数组的形式进行添加

        call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法

盒模型与BFC

        在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：（content）、（padding）、（border）、（margin）四部分组成

盒子模型有：

标准 box-sizing:content-box 和 怪异模型box-sizing:border-box

标准模式:总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异模式:总宽度= width + margin(左右)（即width已经包含了padding和border值）

怎么获取和设置box的内容宽高?
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

BFC：

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC可以用来自适应布局和清除浮动

有两种边距重叠的情况

父子关系的边距重叠

同级兄弟关系的重叠

为什么要清除浮动？

 清除浮动主要是为了解决，父元素因为内部子级元素浮动引起的高度为0的问题

 清除浮动的方法：

        额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 设置clear:both

        父级添加overflow方法： 可以通过触发BFC的方式，实现清除浮动效果 overflow:hidden

        使用after伪元素清除浮动   在清除的css样式后直接加:after

        使用before和after双伪元素清除浮动   

        父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题

postiton定位属性值有几个？

        position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit、sticky，这里sticky是CSS3新发布的一个属性

static(没有定位)是position的默认值

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流

absolute(绝对定位)是指给元素设置绝对的定位

fixed元素总是相对于body定位的

inherit继承父元素的position属性

sticky在屏幕范围时该元素的位置并不受到定位影响，当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。