介绍

前端面试基础题

前端面试

第一章 基础篇

一、HTML 面试题

1. 面试题:行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

   行内元素：span、img、input
   块级元素：div、section、header、p、h1~h6
   空元素：br、hr
   
   元素之间转换问题:
   通过display指定
   行内:inline  			特点：不会独占一行，宽高设置无效由内容撑开
   块:block				 特点：独占一行，可以设置宽高
   行内块:inline-block	特点：不独占一行，可以设置宽高
   

2. 面试题:页面导入样式时，使用 link 和@import 有什么区别?

   区别一:link先有，@import规则后有(link兼容性好)
   区别二：加载顺序差别，浏览器先加载link标签，后加载@import规则
   

3. 面试题: title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?

   title与h1的区别:
   定义:
   	title:概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
   	h1:文章主题内容，告诉蜘蛛我们网站的内容最主要是什么
   区别:
   	1.title显示在网页标题上，h1显示在网页内容上
   	2.title比h1更加重要 对于seo的了解
   场景:
   	在一般场景下网站的logo都是用h1包裹的
   

   b与strong的区别:
   定义:
   	b:实体标签，用来给文字加粗的
   	strong:逻辑标签，用来加强字符语气的
   区别:
   	b标签只有加粗的样式，没有实际的含义
   	strong除了有加粗样式，还表示标签内字符比较重要，用以强调
   为了符合css3规范尽量使用语义化标签，b尽量少用不用，以后可能会被废弃
   

   i与em的区别:
   定义:
   	i:实体标签，用来做文字倾斜的
   	em:逻辑标签，用来强调文字内容
   区别:
   	i标签只是个倾斜的标签，没有实际的含义
   	em除了有倾斜的样式，还表示标签内字符比较重要，用以强调
   场景:
   	i更多用在字体图标，em在术语上（医药，生物等）突出显示
   为了符合css3规范尽量使用语义化标签，i尽量少用不用，以后可能会被废弃
   

4. 面试题: img 标签的 title 和 alt 有什么区别?

   区别一:
   	title:鼠标移入显示的值
   	alt: 图片无法加载时显示的值
   区别二:
   	在seo层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词
   

5. 面试题: png、jpg、gif、webp 这些图片格式解释-下， 分别什么时候用?

   png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标
   jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片
   gif:一般是做动图的
   webp:同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好
   

二、css 面试题

1. 面试题:介绍一下 CSS 的盒子模型

   css的盒子模型有哪些: 标准盒子模型、IE盒子模型
   css的盒子模型区别:
   	标准盒子模型: margin、padding、border、content
   	IE盒子模型: margin、content(padding+border+content)为一体
   通过css如何转换盒子模型:
   	box-sizing:content-box; /*标准*/
   	box-sizing:border-box; /*IE*/
   下面不用答：只是个人留作区分
   标准 content-box设置宽高就是为content为准设置宽高
   IE border-box设置宽高是为border为准设置宽高
   而我们实际观察和普遍认知都是以border为总宽高
   
   

2. 面试题: line-height 和 heigh 区别

   line-height是每一行文字的高，如果文字换行则整个盒子高度增加（行数*行高）。
   height是一个死值，就是这个盒子的高度。
   

3. 面试题: CSS 选择器（符）有哪些?哪些属性可以继承?

   css选择器:
   通配（*）
   id选择器（#）
   类选择器（.）
   标签选择器（h1）
   后代选择器（空格）
   相邻选择器（+）下一个兄弟
   子元素选择器（>）div > p 选择所有p的父元素为div的元素
   属性选择器（div[any-attribute]）
   伪类选择器（:）:hover ::after ::before:last-child :nth-child() :nth-last-child()等
   那些可以继承:
   	文字类型: coloe、line-height、font-size...
   	cursor、list-style、text-align
   不可继承:
   border、padding、margin
   

   /* 兄弟选择器特殊用法 会排除第一个 */
   ul li + li {
     background-color: aqua;
   }
   /* 排除两个 */
   ul li + li + li {
     background-color: aqua;
   }
   

   <div>1</div>
   <div>2</div>
   <div custom-attribute>3</div>
   <div>4</div>
   <style>
     div[custom-attribute] {
       background-color: brown;
     }
   </style>
   

   

   

4. 面试题: CSS 优先级算法如何计算?

   优先级比较: !important >内联样式> id > class >标签>通配
   

   CSS权重计算:
   !important 无限大
   第一:内联样式(style)				权重值:1000
   第二: id选择器					 权重值:100
   第三:类选择器						权重值:10
   第四:标签&伪元素选择器			  权重值:1
   第五:通配、>、+					权重值:0
   10个1相加并不能等于10
   这只是抽象
   

5. 面试题:用 CSS 画一个三角形

   用边框画

   

   /* 核心逻辑就是设置宽高为0，
   然后用border画，那个方向三角形需要就让除了它的其他边框为透明色，
   也可以让相邻两边框为相同色，其他的透明 */
   #box {
     width: 0;
     height: 0;
     border-left: 100px solid red;
     border-top: 100px solid transparent;
     border-right: 100px solid transparent;
     border-bottom: 100px solid transparent;
   }
   

6. 面试题: 一个盒子不给宽度和高度如何水平垂直居中?

   /* 方式一 通过弹性盒模型*/
   #box {
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-item: center;
   }
   

   <!-- 方式二 通过position定位和transform变形-->
   <div id="box">
     <div>main</div>
   </div>
   <style>
     #box {
       width: 500px;
       height: 500px;
       position: relative;
       background-color: aqua;
     }
     #box div {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: blueviolet;
     }
   </style>
   

7. 面试题: display 有 哪些值?说明他们的作用。

   none			隐藏元素
   block			把某某元素转换成块元素
   inline			把某某元素转换成内联元素
   inline-block	把某某元素转换成行内块元素
   

8. 面试题:对 BFC 规范(块级格式化上下文: block formatting context)的理解?

   BFC块级格式化上下文，就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
   
   1.了解BFC:	块级格式化上下文
   2.BFC的原则:	如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响外部元素。
   3.如何触发BFC:
   	float的值为非none;
   	overflow的值为非visible;常用 overflow:hidden;overflow:auto;
   	display的值为:inline-block、table类型的...;
   	position的值为:absolute、fixed;
   

9. 面试题:清除浮动有哪些方式?

   1.触发BFC			overflow:auto;
   2.在最后创建个盒子，添加样式: clear:both;
   3.添加after伪类
   	ul::after{
         content: '';
         display: block;
         clear: both;
       }
   

10. 面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?

    偶数: 让文字在浏览器上表现更好看。
    另外说明: ui给前端一般设计图都是偶数的，这样不管布局也好，转换px也好，都方便一些
    

11. 有几种定位，position 有哪些值，有什么作用？

    static:（默认）没有定位
    fixed:固定定位，相对于浏览器窗口进行定位，脱离文档流。
    relative:相对定位，相对于自身位置定位，不脱离文档流。
    absolute:绝对定位，相对于第一个有relative的父元素定位，脱离文档流。
    sticky:粘性定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
    
    relative与absolute区别:
    1.relative不脱离文档流，absolute脱离文档流
    2.relative相对于自身原来位置定位，absolute相对于第一个设置relative的父元素定位
    3.relative同时存在left、right、top、bottom时只有left、top会生效，left、top优先级高
      absolute同时存在left、right、top、bottom时都会生效。
    

12. 面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽 200，中间自适应宽，要求先加载中间块，请写出结构及样式。

    主要通过 float 浮动，然后设置边距调整位置

    双飞翼布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        body,.container{
          width: 100vw;
          height: 100vh;
        }
        .container>div{
          float: left;
          height: 100%;
          color: white;
        }
        .center{
          width: 100%;
          background-color: aqua;
          /* margin: 0 200px; */
        }
        .left{
          width: 200px;
          background-color: red;
          margin-left: -100%;
        }
        .right{
          width: 200px;
          background-color: blue;
          margin-left: -200px;
        }
        .main{
          padding: 0 200px;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="center">
          <div class="main">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div></div>
      </div>
    </body>
    </html>
    

13. 面试题: 什么是 css reset?

    Reset CSS (opens new window)

    normalize.css (opens new window)

    reset.css 		是一个css文件，用来重置css样式
    Normalize.css 	为了增强浏览器渲染一致性，一个css重置样式库
    

14. 面试题: css sprite 是什么,有什么优缺点

    1.是什么
    	把多个小图标合并成一张大图片
    2.优缺点
    	优点:减少了http请求的次数，提升了性能。
    	缺点:维护比较差(例如图片位置进行修改或者内容宽高修改)
    

15. 面试题: display: none;与 visibility: hidden;的区别

    1.占用位置的区别
    display:none;		是不占用位置的
    visibility:hidden;	虽然隐藏了，但是占用位置
    
    2.重绘和回流的问题
    visibility: hidden;和display:none;都会产生重绘
    但display:none;还会产生一次回流
    
    产生回流一定会造成重绘，但重绘不一定会造成回流。
    
    产生回流的情况:	改变元素的位置（left,top...)、显示与隐藏元素...
    产生重绘的情况:	样式改变、换皮肤
    

    渲染过程

    

    

16. 面试题: opacity 和 rgba 区别

    共同性: 实现透明效果
    
    1.opacity  取值范围0到1之间，0表示完全透明，1表示不透明
    2.rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间，与opacity类似
    
    区别:继承的区别
    opactity会发生继承，后代会继续父元素的opacity属性，而rgba的后代不会继承不透明属性。
    

三、h5&c3

1. 面试题:什么是语义化标签

   1.易读性和维护性更好
   2.seo成分会更好，蜘蛛抓取更容易
   3.IE8不兼容html5。可以通过html5shiv.js去处理。
   

2. 面试题::before 和:after 中双冒号和单冒号有什么区别?解释一下 这 2 个伪元素的作用。

   1.区别
   	:是伪类,::是伪元素。
   	作用:是为了做区分的。
   2.是什么？作用
   	元素before之前、元素after之后
   	作用:清除浮动、样式布局上也有用处
   

3. 面试题:如何关闭 iOS 键盘首字母自动大写

   <input type="text" autocapitalize="false" />
   

4. 面试题:怎么让 Chrome 支持小于 12px 的文字?

   Chorm默认字体大小是:16px
   解决:
   通过transform:scale();进行缩放
   

   span {
     /*由于缩放是缩放的盒子，所以盒子模型得能设置宽高才行*/
     display: inline-block;
     font-size: 10px;
     transform: scale(0.8);
   }
   

5. 面试题: rem 和 em 区别

   rem和em都是相对于font-size进行计算的
   
   em针对于父元素的font-size
   rem针对于根(html)元素的font-size
   
   //开发当中推荐使用rem,rem能更好的计算值
   

6. 而试题:ios 系统中元表被触摸时产生的半透明灰色遮罩怎么去掉

   a,
   input,
   button {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
   

7. 面试题: webkit 表 单输入框 placeholder 的颜色值能改变吗?

   /*修改所以的浏览器*/
   input::placeholder {
     color: aquamarine;
   }
   /*修改webkit内核的*/
   input::-webkit-input-placeholder {
     color: blueviolet;
   }
   

8. 面试题:禁止 ios 长按时不触发系统的菜单，禁止 ios&android 长按时下载图片

   html,
   body {
     /*禁止拉起菜单*/
     -webkit-touch-callout: none;
     /*禁止选择*/
     user-select: none;
     -webkit-user-select: none;
   }
   

9. 面试题:禁止 ios 和 android 用户选中文字

   html,
   body {
     user-select: none;
     -webkit-user-select: none;
   }
   

10. 面试题:自适应(适配)

    淘宝无限适配【移动端】:淘宝无限适配+布局使用rem
    

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .container {
            font-size: 16px;
            width: 0.75rem;
          }
        </style>
      </head>
      <body>
        <div class="container">1111</div>
        <script>
          const flexible = () => {
            let doc = document.documentElement
            return doc.clientWidth / 10 + 'px'
          }
          let doc = document.documentElement
          window.onload = () => {
            doc.style.fontSize = flexible()
          }
          window.onresize = () => {
            doc.style.fontSize = flexible()
          }
        </script>
      </body>
    </html>
    

11. 面试题:响应式

    1.是什么？
    	一个URL可以响应多端，响应不同屏幕设备合适地展现网页效果的方式或着手段。
    2.语法结构
    	@media only screen and (max-width: 1000px){
          ul {
            display: none;
          }
        }
       	only :可以排除不支持媒体查询的浏览器
    	screen :设备类型
    	and 逻辑语句
    	max-width| max-height |min-width| min-height
    3.响应式图片【性能优化】
      <picture>
        <source media="(min-width: 700px) and (max-width:1200px)" srcset="./2051770.jpg">
        <source media="(min-width:1200px)" srcset="./2044918.jpg" >
        <img srcset="./2038896.jpg" alt="">
      </picture>
    

    布局方案

    一、什么情况下采用响应式布局
    	数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
    	例如:公司的官网、专题页面
    	特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。
    二、pc +移动端应该做什么样的布局方案
    	注意:访问量还可以或者比较大，类似于淘宝网。
    	pc是一套，会加入一点点喊应式。
    	移动端是一套，会使用自适应的布局方式。
    三、pc的设计图
    	ui: 1980
    	笔记本电脑: 1280
    	ui图的宽度和电脑的宽度不对应该怎么办?
    		1.把ui图进行等比缩放，缩放成和电脑一样的尺寸
    		2.换1980的电脑
    四、移动端的设计图
    	宽度: 750
    	因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点
    

四、js 面试题

1. 面试题:延迟加载 JS 有哪些方式?

   延迟加载js:deffer 和 async	引入外部链接
   1.正常不加情况下
   	先从html头部进行dom解析，当遇到script标签就暂停解析dom，等js下载完后并解析完后再解析剩下dom
   2.async
   	先从html头部进行dom解析，当遇到script标签先下载但是不会暂停解析dom，等下载完后立即暂停dom解析并执行js脚本，然后再执行剩余dom
   3.defer
   	当遇到script标签先下载js，但不会执行，当dom解析完后，再执行defer里的内容
   
   区别:
   defer:等html全部解析完成，才会执行js代码，顺次执行的
   async:async是和html解析同步的，不是顺次执行js脚本（谁先加载完谁执行）
   

2. 面试题: JS 数据类型有哪些?

   基本类型:string、number、Boolean、null、underfind、symbol、bigint
   引用类型:object（array、function、正则、日期）
   

3. 面试题: null 和 undefined 的区别

   1.作者在设计js的都是先设计的null (为什么设计了null:最初设计js的时候借鉴了java的语言)
   2. null会被隐式转换成0，很不容易发现错误。
   3.先有nul1后有undefined, 出来undefined是为了填补之前的坑。
   
   具体区别: JavaScript的最初版本是这样区分的: nu1l是一个表示"无"的对象(空对象指针)，转为数值时为0; undefined是一个表示“无”的原始值，转为数值时为NAN。
   

4. 面试题: JS 数据类型考题

   1.字符串+任何 都会转换成字符串	最终结果是拼接形式
   2.数字除了字符串与任何相加，都会转换为数字类型 最终结果都是数字类型
   	true为1，false为0，underfind为不知道与数字相加为NaN
   
   NaN是一个数值类型，但是不是一个具体的数字。
   null是一个特殊的对象	typeof(null)=='object'
   

5. 面试题: ==和===有什么不同

   ==	:比较的是值
   //例子:全为true
       1=='1'
       true==1
       null==underfind
       [1,2]=='1,2'
   原因:
   	string==number || object || boolean...两个等号在比较不同的类型是会隐式转换
   	通过valueOf方法进行转换(valueOf()方法一般都会被 JavaScript 自动调用)
   	// 所以typeof 会得到原来的类型
   ===	:比较的除了值还有类型
   
   另外:===更严谨，不会调用valueOf节约性能
   

6. 面试题: JS 微任务和宏任务

   1. js是单线程的语言。
   2. js代码执行流程:同步执行完==》事件循环
   	同步的任务都执行完了，才会执行事件循环的内容
   	进入事件循环:请求、定时器、事件....
   3.事件循环中包含: [微任务、宏任务]
   微任务: promise.then
   宏任务: setTimeout..
   
   要执行宏任务的前提是清空了所有的微任务
   
   流程:同步==》事件循环[微任务和宏任务] ==》 微任务==》宏任务=》微任务...
   

7. 面试题: JS 作用域考题

   1.除了函数外，js是没有块级作用域。
   2.作用域链:内部可以访问外部的变量，但是外部不能访问内部的变量。
   	注意:如果内部有，优先查找到内部，如果内部没有就查找外部的。
   3.注意声明变量是用var还是没有写(window.)
   4.注意: js有变量提升的机制[变量悬挂声明]
   5.优先级:声明变量 > 声明普通函数 > 参数 > 变量提升
   

   面试的时候怎么看:

   1.本层作用域有没有此变量[注意变量提升]
   2.注意: js除了函数外没有块级作用域
   以上都是ES5的，ES6可以通过{}直接声明块级作用域
   

   function fun(a) {
     var a = 10
     function a() {}
     console.log(a)
   }
   fun(100) //10
   

8. 面试题: JS 对象考题

   JS 对象注意点:

   1.对象是通过new操作符构建出来的，所以对象之间不相等。
   2.对象注意:引用类型
   3.对象的key都是字符串类型
   

   //验证
   let a = {}
   let b = a
   a[1] = 'wdf'
   a[b] = '1dw2g'
   console.log(a)
   console.log(typeof a[1])
   console.log(typeof a[b])
   console.log(a['[object Object]'])
   //考题1
   let a = {}
   let b = {
     styr: 'd1w1',
   }
   let c = {
     key: 'dwgf',
   }
   a[b] = '123'
   a[c] = '456'
   console.log(a[b]) //456
   

9. 面试题: JS 作用域+this 指向+原型考题

   找题多练练

10. 面试题: JS 判断变量是不是数组，你能写出哪些方法?

    方式一：isArray

    let arr = [1, 2, 3]
    console.log(Array.isArray(arr))
    

    方式二：instanceof

    let arr = [1, 2, 3]
    console.log(arr instanceof Array)
    

    方式三：原型 Object.prototype.toString

    let arr = [1, 2, 3]
    console.log(Object.prototype.toString.call(arr).indexOf('Array') > -1)
    

    方式四：判断原型 (opens new window)isPrototypeOf

    let arr = [1, 2, 3]
    console.log(Array.prototype.isPrototypeOf(arr))
    

    方式五：构造函数 constructor

    let arr = [1, 2, 3]
    console.log(arr.constructor == Array)
    

11. 面试题: slice 是 干嘛的、splice 是 否会改变原数组

    1. slice是来截取的
    	参数可以写slice(3)、slice(1,3)、 slice(-3)
    	返回的是一个新的数组,不会改变原数组
    2. splice功能有:插入、删除、替换
    	返回:删除的元素
    	该方法会改变原数组
    

12. 面试题: JS 数组去重

    方式一

    let arr = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2]
    console.log([...new Set(arr)])
    console.log(Array.from(new Set(arr)))
    

    方式二

    let arr = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2]
    function unique(arr) {
      let res = []
      for (let i of arr) {
        if (res.indexOf(i) === -1) {
          res.push(i)
        }
      }
      return res
    }
    console.log(unique(arr))
    

    方式三

    let arr = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2]
    function unique(arr) {
      arr.sort()
      let res = []
      for (let i in arr) {
        if (arr[i] !== arr[i - 1]) {
          res.push(arr[i])
        }
      }
      return res
    }
    console.log(unique(arr))
    

    方式四

    let arr = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2]
    function unique(arr) {
      arr.sort()
      return arr.filter((v, index, array) => {
        return v !== array[index - 1]
      })
    }
    console.log(unique(arr))
    

13. 面试题:找出多维数组最大值

    let arr = [
      [1, 4, 3, 5],
      [2, 3, 8, 5, 9, 7],
      [3, 89, 1, 5],
    ]
    function filterMaxList(arr) {
      let res = []
      for (let i of arr) {
        res.push(Math.max(...i))
      }
      return res
    }
    console.log(filterMaxList(arr))
    

14. 面试题:给字符串新增方法实现功能

    String.prototype.addPrefix = function (prefix) {
      return prefix + this
    }
    console.log('123'.addPrefix('test'))
    

15. 面试题:找出字符串出现最多次数的字符以及次数

    let str = 'abacahdwisncahcas'
    let strList = str.split('')
    let res = strList.reduce((pre, cur) => {
      if (pre[cur]) {
        pre[cur]++
      } else {
        pre[cur] = 1
      }
      return pre
    }, {})
    let max = 0
    let maxLetter
    for (let i in res) {
      if (res[i] > max) {
        max = res[i]
        maxLetter = i
      }
    }
    console.log(maxLetter, max)
    

16. 面试题: new 操作符具体做了什么

    1.创建了一个空的对象
    2.将空对象的原型，指向于构造函数的原型
    3.将空对象作为构造函数的上下文(改变this指向)该对象也就是实例
    4.对构造函数有返回值的处理判断
    	如果返回基本数据类型没有影响，如果返回引用数据类型就会把实例替换掉
    

    //手写new
    function Fun(age, name) {
      this.age = age
      this.name = name
    }
    function create(fn, ...args) {
      //1.创建一个新对象
      const obj = Object.create({})
      //2.将实例原型指向构造函数原型
      Object.setPrototypeOf(obj, fn.prototype)
      //3.修改this指向让构造函数上下文指向当前实例
      const result = fn.apply(obj, args)
      //4.对返回值进行判断处理
      return result instanceof Object ? result : obj
    }
    

17. 面试题:闭包

    1.闭包是什么
    	闭包是一个函数加上到创建函数的作用域的连接，闭包让函数的局部变量不能被自动销毁
    	(也就是一个函数引用了创建它的函数的变量，也可以是一个函数返回了另一个函数包含		对该函数内部变量的引用)
    2.闭包可以解决什么问题
    	1.内部函数可以访问到外部函数的局部变量
    3.闭包的缺点
    	变量会驻留在内存中，造成内存损耗问题
    		解决:把闭包的内部函数设置为null
    	只有IE里才会造成内存泄露
    

18. 面试题:原型链

    核心要点：

    1. 所有构造函数实例的隐式原型都指向函数的显示原型

    2. 函数的显示原型是系统自动创建的，该对象的隐式原型指向对象构造函数的显示原型

    3. 函数也是个对象他的隐式原型指向 Function 的显示原型

    //只要是函数他们的getPrototypeOf返回值都一样都是Function函数的原型，因为函数是Function创建的对象
    //getPrototypeOf始终返回的是target的隐式原型即__proto__
    console.log(Object.getPrototypeOf(Object) == Function.prototype) //true
    console.log(obj.__proto__.__proto__ === Object.prototype) //true
    console.log(Object.__proto__ == Function.prototype) //true
    console.log(Object.getPrototypeOf(Function) == Function.prototype) //true
    console.log(Object.getPrototypeOf(Object.prototype)) //null
    console.log(Object.getPrototypeOf(Function.prototype) === Object.prototype) //true
    

    注意：

    1. 所有函数包括 Object 构造函数都是 Function 的实例,他们的隐式原型都指向 Function.Prototype

    2. 所有函数的显示原型包括 Function 除了 Object 的显示原型都是 Object 构造函数的实例，所以函数的显示原型的隐式原型都指向 Object 的显示原型

    3. 函数的显示原型中有个属性 Constructor 指向当前构造函数

    4. 而 Function.prototype 是 Object 构造函数的实例,所以Function.prototype.__proto__指向 Object.prototype

    5. 所以一切最终的原型链都会找到 Object.prototype

    6. Object.prototype.proto=null

    

    1.原型可以解决什么问题
    	对象共享属性和共享方法
    2.谁有原型
    	函数拥有: prototype显示原型
    	对象拥有: __proto__隐式原型
    3.查找方式
    	先在对象本身找，然后再到对象的隐式原型上也就是构造函数的显示原型上找，然后再到构造函数的显示原型上的隐式原型上找也就是Object的显示原型，然后Object显示原型的隐式原型指向null,就是通过隐式原型一层一层查找
    3.原型链是什么? :就是把原型串联起来
    

19. 面试题 Fun.prototype.constructor==Fun.constructor

    false
    因为Fun是Function的实例，所以Fun.__proto__指向Function.Prototype
    因为Fun本身没有Constructor属性，所以通过原型链去查找，而原型链查找的是隐式原型
    而Fun.prototype是系统自动创建的上面有Constructor属性指向Fun构造函数本身
    所以Fun！=Function.prototype
    

20. 面试题: JS 继承有哪些方式

    ES6 继承

    原型链继承

    借用构造函数基础

    寄生组合式继承

    export function Person(name, age) {
      this.name = name
      this.age = age
    }
    
    Person.prototype.eat = () => {
      return 'eating'
    }
    
    export function Student(name, age, c) {
      Person.call(this, name, age)
      this.class = c
    }
    //以父类的原型作为原型创建对象
    Student.prototype = Object.create(Person.prototype)
    //设定Constructor属性指向当前构造函数
    Student.prototype.constructor = Student
    
    //也可以这样
    //Object.setPrototypeOf(Student.prototype,Person.prototype)
    
    Student.prototype.eat = () => {
      return 'student eating'
    }
    

21. 面试题:说一下 call、 apply. bind 区别

    共同点:功能一致

    可以改变this指向
    语法:函数.call()、函数 apply()、函数.bind()
    

    区别:

    1. call、 apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要调用执行。
    2.参数不同: apply第二个参数是数组。call和bind有多个参数需要挨个写。
    

22. 面试题: sort 背后原理是什么?

    v8引擎提供的插入排序和快排，现在是冒泡
    当数组长度小于10用插入，大于10用快排
    

23. 面试题:深拷贝和浅拷贝

    共同点:复制
    1.浅拷贝:只复制引用，而未复制真正的值。
    2.深拷贝:是复制真正的值(不同引用)
    	可以通过JSON.parse(JSON.striginify(target))简单深拷贝，不能处理循环引用，函数等
    

    function copy(obj) {
      let res = Array.isArray(obj) ? [] : {}
      for (let i in obj) {
        if (typeof obj[i] === 'object') {
          res[i] = copy(obj[i])
        } else {
          res[i] = obj[i]
        }
      }
      return res
    }
    

24. 面试题: localStorage、 sessionStorage、 cookie 的区别

    公共点:在客户端存放数据
    区别:
    1.数据存放有效期
    	sessionStorage 	:仅在当前浏览器窗口关闭之前有效。[关闭浏览器就没了]
    	localstorage 	:始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储。
    	cookie			:只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭
    2.localStorage、sessionStorage不可以设置过期时间
    	cookie有过期时间，可以设置过期(把时间调整到之前的时间，就过期了)
    3.存储大小的限制
    	cookie存储量不能超过4k
    	localStorage、sessionStorage不 能超过5M
    

25. 面试题: var、let、 const 区别

    var、let、const共同点都是可以声明变量的
    区别一:
    	var具有变量提升的机制
    	let和const没有变量提升的机制
    区别二:
    	var可以多次声明同一个变量
    	let和const不可以多次声明同一个变量
    区别三:
    	var、let声明变量的
    	const声明常量
    区别四:
    	var声明的变量没有自身作用域
    	let和const声明的变量有自身的作用域
    

26. 面试题:作用域考题

27. 面试题:将下列对象进行合并

    1.通过Object.assign()
    2.扩展运算符{...a,...b}
    3.自己封装
    

28. 面试题:箭头函数和普通函数有什么区别?

    1.箭头函数没有prototype，所以箭头函数本身没有this
    2.箭头函数的this指向在定义是就决定了，继承上一层词法作用域中的this
    3.箭头函数的this不能被call、apply、bind等修改
    4.箭头函数不能当作构造函数
    5.箭头函数没有arguments
    

29. 面试题: Promise 有几种状态

    有三种状态:
    pending (进行中)
    fulfilled (已成功)
    rejected (已失败)
    

30. 面试题: find 和 filter 的区别

    区别一:返回的内容不同
    	filter返回是新数组
    	find 返回具体的内容
    区别二:
    	find :匹配到第一个即返回
    	filter :返回整体 (每一个匹配到的都返回)
    

31. 面试题: some 和 every 的区别

    some:如果有一项匹配则返回true
    every:全部匹配才会返回true
    

​