前端面试常见问题

1、行内元素、块级元素、行内块状元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 可以使用display属性能够将三者任意转换：
(1) display:inline; 转换为行内元素
(2) display:block;转换为块状元素
(3) display:inline-block;转换为行内块状元素

1.1 行内元素

特点：
(1) 设置宽高无效
(2) 对margin仅设置左右方向有效，上下无效
(3) 不会自动进行换行
常见行内元素： b、button、input、label、select、textarea、i、 small、abbr、strong、a、br、img、map、object、q、 script、span、sub、sup

1.2 块级元素

特点：
(1) 能够识别宽高
(2) margin、padding的上下左右均对其有效
(3) 可以自动换行
(4) 多个块状元素标签写在一起，默认排列方式为从上至下
常见块级元素： address、article、aside、audio、video、blackquote、canvas、dd（定义列表条目描述） div、dl、fieldset（表单元素分组）、figcaption（图文信息组标题）、figure、 header、footer、form、h1-h6、hr、hgroup、ol、ul、output、p、pre、section、table

1.3 行内块状元素

特点：
(1) 不自动换行
(2) 能识别宽高
(3) 默认排列方式为从左到右
常见行内块状元素： button、object、map

2、原型

JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype ）。

2.1 _proto_ 与 prototype区别

两者都是对象的属性
_proto_（隐式原型）是每个对象都有的一个属性，指向该对象的构造函数的原型对象
prototype（显示原型）函数才有的属性，指向该方法的原型对象
具体可见https://mp.weixin.qq.com/s/St78Y38j3XI2_Zv57bNZ0Q

3、样式优先级

内联样式>id选择器(#example)>类选择器(.example)、属性选择器[type="radio"]、伪类(:hover) >类型选择器(h1)、伪元素(::before)
!important例外规则：在一个样式声明中使用该规则时，此声明将覆盖任何其他声明。 !important破坏了样式表中固有的级联规则，应该减少使用。

4、判断类型

基本类型(存储在栈)：String、Number、Boolean、Null、Undefined、Symbol
引用类型(存储在堆heap)：Object(Function、Array、RegExp、Date)

4.1 typeof

返回的结果用该类型的字符串(全小写字母)形式表示， 包括以下 7 种：number、boolean、symbol、string、object、undefined、function
注意：

对于基本类型，除 null 以外，均可以返回正确的结果。

对于引用类型，除 function 以外，一律返回 object 类型。

对于 null ，返回 object 类型

对于 function 返回 function 类型。

4.2 instanceof

instanceof 是用来判断 A 是否为 B 的实例,instanceof检测的是原型， 两个对象是否属于实例关系，不能判断属于那种类型， 返回true、false
举例：

[] instanceof Array; // true
{} instanceof Object;// true
newDate() instanceof Date;// true
 
function Person(){};
newPerson() instanceof Person;
 
[] instanceof Object; // true
newDate() instanceof Object;// true
newPerson instanceof Object;// true

4.3 constructor

当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，然后再在 prototype上添加一个 constructor 属性，并让其指向 F 的引用。

注意：

1. null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。

2. 函数的 constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。

4.4 toString

toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。
对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
如：

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(newFunction()) ; // [object Function]
Object.prototype.toString.call(newDate()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(newRegExp()) ; // [object RegExp]
Object.prototype.toString.call(newError()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

参考：https://www.cnblogs.com/onepixel/p/5126046.html

5、CSS度量单位、区别

绝对长度单位：px、in、cm、mm
相对长度单位：em、rem、ex、ch

px、em、rem的区别

px：px采用参考像素，值是固定的
em：相对于当前元素的字体大小属性计算出来，1em=16px，如果当前元素没有设置字体大小， 依赖其父元素大小，依次类推直至找到能计算的元素
rem:与em类似，但是是相对根元素进行计算。只要在html元素指定字体大小，后面元素都将使用这个大小作为基准进行计算, 此单位经常被用来做屏幕适配，保证不同设备下的显示效果。

6、new操作符步骤

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；

链接该对象（设置该对象的constructor）到另一个对象 ；

将步骤1新创建的对象作为this的上下文 ；

如果该函数没有返回对象，则返回this。

创建一个用户自定义对象需要两步：
1、通过编写函数来定义对象类型
2、通过new来创建对象实例

7、二叉树遍历方法

前序遍历：根结点-->左子树-->右子树

中序遍历：左子树-->根结点-->右子树

后序遍历：左子树-->右子树-->根结点

层次遍历

8、cookie、localStorage、sessionStorage区别

9、html5的新元素、新属性

canvas:标签定义图形

新多媒体元素

audio:音频

video:视频

source:定义多媒体资源audio和video

embed:定义嵌入的内容，如插件

track:为video和audio之类的媒介规定外部文本轨道

新表单元素

datalist:定义选项列表，与input配合使用

keygen:规定表单的密钥对生成器字段

output:定义不同类型的输出

新的语义和结构元素

article:定义页面独立的内容区域

aside:定义页面的侧边栏内容

bdi:允许您设置一段文本，使其脱离其父元素的文本方向设置

command:定义命令按钮，比如单选按钮、复选框或按钮

details:用于描述文档或文档某个部分的细节

dialog:定义对话框，比如提示框

summary:标签包含 details 元素的标题

figure/figcaption:规定独立的流内容/figure的标题

footer/header:定义 section 或 document 的页脚/文档头部

mark:定义带有记号的文本。

meter:定义度量衡。仅用于已知最大和最小值的度量。

nav:定义导航链接的部分。

progress:定义任何类型的任务的进度。

ruby/rt:定义 ruby 注释（中文注音或字符）/字符（中文注音或字符）的解释或发音

rp:在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容

section:定义文档中的节（section、区段）

time:定义日期或时间

wbr:规定在文本中的何处适合添加换行符

已移除的元素

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt、

10、闭包

闭包可以让你从内部函数访问外部函数作用域。
举例：

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();