web前端面经

 1.  的作用？

        告诉浏览器的解析器用什么文档标准解析这个文档

    2.行内元素？

        (一个行内元素占据它对应标签的边框所包含的空间)行内元素是指一行内可连续并排出现的元素，例如：       ...</strong></span></p> <p>    3.块级元素？</p> <p>      <span style="color:#f33b45;"><strong>  块级元素占据父容器的整个宽度，例如：<div> <ul> <ol> <li> <p> <h1~6>  H5新标签<header> <main> <section>...</strong></span></p> <p>    4.行内元素和块级元素的区别？</p> <p>      <span style="color:#f33b45;"><strong>  格式上：默认情况下，行内元素不会以新行开始，而块级元素会</strong></span></p> <p><span style="color:#f33b45;"><strong>        内容上：默认情况下，行内元素只能包含文本和其他行内元素，而块级元素可以包含文本和其他行内元素与块级元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        行内元素和块级元素属性不同，行内元素设置width/height无效</strong></span></p> <p>    5.空元素？</p> <p>       <strong><span style="color:#f33b45;"> 空元素是指中间没有内容的标签，即单标签    <br/> <hr/> <img/> <input> <link> ...</span></strong></p> <p>    6.页面导入样式时，使用@import 和 link标签 有什么区别？</p> <p>      <strong><span style="color:#f33b45;">  1.@import 是css的语法规则，只有导入样式表的作用;而link既可以导入样式表，还可以设置rel等属性引入网站图表等 </span></strong></p> <p><strong><span style="color:#f33b45;">        2.link标签引入的css被同时加载；而用@import 引入的css则需要等到页面加载完毕之后加载</span></strong></p> <p><strong><span style="color:#f33b45;">        3.link标签可以被js脚本动态插入改变样式，而@imoprt 不可以</span></strong></p> <p>    7.浏览器内核/引擎？</p> <p>       <strong><span style="color:#f33b45;"> 浏览器的内核引擎分为渲染引擎和JS引擎，</span></strong></p> <p><strong><span style="color:#f33b45;">        渲染引擎的功能就是渲染，即在浏览器中展示所请求的内容，默认情况下，渲染引擎可以渲染xml,html,图片等，还可以借助插件渲染pdf</span></strong></p> <p><strong><span style="color:#f33b45;">        JS引擎的功能就是解析执行javascript脚本，</span></strong></p> <p>    8.常见的浏览器内核？</p> <p>       <strong><span style="color:#f33b45;"> IE              Trident</span></strong></p> <p><strong><span style="color:#f33b45;">        Chrome          Blink</span></strong></p> <p><strong><span style="color:#f33b45;">        Firefox         Gecko</span></strong></p> <p><strong><span style="color:#f33b45;">        Safari          Webkit</span></strong></p> <p>    9.浏览器渲染过程中遇到js文件怎么处理？</p> <p>      <span style="color:#f33b45;"><strong>  在构建DOM时，HTML若遇到了javascript脚本，则它会暂停对文档的解析，通过JS引擎解析运行javascript脚本，等待js加载完毕，才会从中断的地方继续加载文档</strong></span></p> <p>    10.defer 和 async 的作用和区别？</p> <p>     <strong><span style="color:#f33b45;">   JS脚本没有defer和async属性的话，浏览器会立即加载运行javascript</span></strong></p> <p><strong><span style="color:#f33b45;">        defer属性表示延迟执行引入的javascript，即这段代码在加载时HTML并未停止解析，这两个过程是并行的</span></strong></p> <p><strong><span style="color:#f33b45;">        async属性代表异步执行javascript，与defer的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程中不会阻塞，多个脚本的执行顺序无法保证</span></strong></p> <p>    11.渲染页面时常见的不良影响？</p> <p>       <span style="color:#f33b45;"><strong> 样式闪烁问题： CSS文件大加载缓慢或者放在body底部导致</strong></span></p> <p><span style="color:#f33b45;"><strong>        白屏：JS脚本放在head头部加载</strong></span></p> <p>    12.重绘 和 回流 ？</p> <p>      <span style="color:#f33b45;"><strong>  重绘：当渲染树中一些元素需要更新属性时，而这些属性只影响元素的外观，风格，而不会影响布局的操作，比如 background color 等称为重绘；</strong></span></p> <p><span style="color:#f33b45;"><strong>        回流：当渲染树中的一部分或全部因为元素的尺寸 布局 隐藏等改变而需要重新构建的操作，会影响到布局的操作称为回流。</strong></span></p> <p><span style="color:#f33b45;"><strong>            添加/删除可见的DOM元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            元素尺寸改变 （margin padding border width height）</strong></span></p> <p><span style="color:#f33b45;"><strong>            内容变化，（input输入框中输入文字）</strong></span></p> <p><span style="color:#f33b45;"><strong>            浏览器窗口尺寸改变 -resize事件</strong></span></p> <p><span style="color:#f33b45;"><strong>            。。。</strong></span></p> <p><span style="color:#f33b45;"><strong>        回流必引起重绘，重绘不一定会引起回流。</strong></span></p> <p>    13.如何减少回流？</p> <p>        <span style="color:#f33b45;"><strong> 使用transfrom代替top</strong></span></p> <p><span style="color:#f33b45;"><strong>         不要使用table布局，可能很小的改动都会造成整个table的回流</strong></span></p> <p><span style="color:#f33b45;"><strong>         不要一条一条的修改DOM样式，与其这样，还不如事先定义好css的class，然后修改DOM的className</strong></span></p> <p>    14.HTML5 有哪些新特性？</p> <p>       <span style="color:#f33b45;"><strong> 1.H5语义化标签<header> <main> <nav> <aside> <section> <footer>...</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.表单控件：date time email search url</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.Canvas画布</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.Video Audio 音视频</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.本地存储 localStorage</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.地理定位 geolocation</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.离线存储 appcache</strong></span></p> <p><span style="color:#f33b45;"><strong>        7.新的文档属性 document.visibilityState</strong></span></p> <p><span style="color:#f33b45;"><strong>        8.新的技术 websocket</strong></span></p> <p>    15.如何处理HTML5新标签的兼容性问题？</p> <p>      <span style="color:#f33b45;"><strong>  通过现成第三方库 html5shiv.js / 通过document.createElement()方法创建标签</strong></span></p> <p>    16. b和strong 与 i和em的区别？</p> <p>        <span style="color:#f33b45;"><strong>b和strong都是粗体，i和em都是斜体</strong></span></p> <p><span style="color:#f33b45;"><strong>        strong和em具有语义化，强调文本</strong></span></p> <p>    17.前端需要注意哪些SEO优化？</p> <p>      <span style="color:#f33b45;"><strong>  1.合理的title，description，keyword，title值强调重点即可，description把内容高度概括，keyword列举出几个关键字即可</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.语义化的HTML代码，符合W3C规范</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.重要内容html代码放在最前面，保证内容肯定被抓取</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.重要的内容不要用js输出，爬虫不会执行js获取内容</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.非装饰性的图片必须用alt</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.提高网站速度：网站速度是搜索引擎排序的一个重要指标</strong></span></p> <p>    18.浏览器的存储方式及区别？</p> <p>       <span style="color:#f33b45;"><strong> 浏览器的存储方式有cookie sessionStorage localStorage</strong></span></p> <p><span style="color:#f33b45;"><strong>        cookie：最多能存储4k数据，生成时间由expire属性决定，只能被同源的页面访问共享</strong></span></p> <p><span style="color:#f33b45;"><strong>        sessionStorage：会话存储，能够存储5M大小或更大的数据，随着浏览器的关闭而释放数据，只能被同一个窗口的同源页面所共享访问</strong></span></p> <p><span style="color:#f33b45;"><strong>        localStorage：本地存储，能够存储5M大小或更大的数据，不会随着浏览器的关闭而清除数据，除非手动清除，否则会一直存在浏览器中，只能被同源的页面访问共享</strong></span></p> <p>    19.Lable标签的作用是什么？ 用法？</p> <p>       <span style="color:#f33b45;"><strong> label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上</strong></span></p> <p><span style="color:#f33b45;"><strong>            <lable for="name">姓名</lable></strong></span></p> <p><span style="color:#f33b45;"><strong>            <input type="text" id="name" /></strong></span></p> <p>    20.如何实现浏览器内多个标签页之间的通信？</p> <p>      <span style="color:#f33b45;"><strong>  1.可以通过websocket协议，因为websocket协议可以实现服务器推送，所以服务器就可以用来当做这个中介者，标签页通过向服务器发送数据，然后服务器向其他标签页推送转发</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.使用localStorage本地存储方式，可以在一个标签页对localStorage变化事件进行监听，然后当另一个标签页修改数据的时候，就可以通过这个监听事件来获取到数据</strong></span></p> <p>    21.webSocket如何解决低版本浏览器兼容性问题？</p> <p>        <span style="color:#f33b45;"><strong>1.Adobe Flash Socket</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.基于长轮询的XHR请求（XmlHttpRequest ajax）</strong></span></p> <p>    22.页面可见性（Page Visibility API） 可以有哪些用途？</p> <p>        <span style="color:#f33b45;"><strong>这个API的作用在于，通过监听网页的可见性，可以预判卸载网页，还可以用来节省资源，比如：一旦用户不看当前网页，就可以停止对当前网页的轮询，停止网页的动画，音视频等等</strong></span></p> <p>    23.实现不用border画出1px高度的线，兼容浏览器标准模式和怪异模式       </p> <pre data-index="0" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attribute">overflow</span>:hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attribute">height</span>:<span class="hljs-number">1px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attribute">background-color</span>:red;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    24.title和h1的区别？</p> <p>        <span style="color:#f33b45;"><strong>title属性没有明确意义只是表示标题,h1则表示层次明确的标题，对页面信息的抓取也有很大的影响</strong></span></p> <p>    25.img的title和alt的区别？</p> <p>      <span style="color:#f33b45;"><strong>  title通常是鼠标滑入当前元素时所展示的信息，而alt是img的特有属性，为图片无法展示时显示的信息，搜索引擎会重点分析alt属性</strong></span></p> <p>    26.Canvas和svg的区别？</p> <p>      <span style="color:#f33b45;"><strong>  Canvas是一种通过JavaScript绘制2D图形的方法，以像素的形式描绘，所以放缩时会导致锯齿失真的情况</strong></span></p> <p><span style="color:#f33b45;"><strong>        SVG是一种通过XML绘制的2D图形的语言，当SVG缩放时并不会失真</strong></span></p> <p>    27.网页验证码的作用？</p> <p>      <span style="color:#f33b45;"><strong>  1.区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码，刷票，论坛灌水</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试</strong></span></p> <p>    28.attribute和property的区别？</p> <p>       <span style="color:#f33b45;"><strong> <div id="dv" class="content" data-id="1"></div></strong></span></p> <p><span style="color:#f33b45;"><strong>        如上述div元素，可通过 document.getElementById('dv').getAttribute('id') 获取id的值 也可以通过document.getElementById('dv').id 的方式</strong></span></p> <p><span style="color:#f33b45;"><strong>        前者称为attribute ，后者称为property </strong></span></p> <p><span style="color:#f33b45;"><strong>        只要是HTML标签内定义的都是attribute，两者同步，Attribute值是字符串类型</strong></span></p> <p><span style="color:#f33b45;"><strong>        Property属性则可以看做是DOM对象的键值对，用点操作符对它们进行操作，非自定义attribute，如id、class、titile等，都会有对应的property映射。就算没有在标签中出现都会有空值</strong></span></p> <p><span style="color:#f33b45;"><strong>        实际编程中，基本的DOM操作都是使用property的点操作符</strong></span></p> <p><span style="color:#f33b45;"><strong>            只有两种情况不得不使用attribute，</strong></span></p> <p><span style="color:#f33b45;"><strong>                1.自定义Attribute，因为它不能同步到DOM property （比如上面的div元素的data-id属性）</strong></span></p> <p><span style="color:#f33b45;"><strong>                2.访问内置的HTML标签的Attribute，这些attribute不能从property上同步过来，(比如input标签的value值)</strong></span></p> <p>    29.用于预格式化文本格式的标签是？</p> <p>       <span style="color:#f33b45;"><strong> <pre></pre>  保持文本原有的格式</strong></span></p> <p>    30.head标签中必不可少的是？</p> <p>        <span style="color:#f33b45;"><strong><head>为头部标签，可以在head标签中使用<link><meta><style><script>等，唯一且必须的标签是<title></title></strong></span></p> <p>    31.主流浏览器内核私有前缀？</p> <p>    <span style="color:#f33b45;"><strong>    IE          Trident       -ms       </strong></span></p> <p><span style="color:#f33b45;"><strong>        Chrome      Webkit        -webkit</strong></span></p> <p><span style="color:#f33b45;"><strong>        Firefox     mozilla       -mos</strong></span></p> <p><span style="color:#f33b45;"><strong>        Safari      Webkit        -webkit</strong></span></p> <p>    32.disabled和readonly的区别？</p> <p>      <span style="color:#f33b45;"><strong>  disabled指当input元素加载时被禁止使用，此时不会随着表单提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        readonly规定输入字段为只读状态，会随着表单提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        无论设置了disabled或readonly，通过js脚本都可以更改input的value值</strong></span></p> <p>    33.前端性能优化？</p> <p>        <span style="color:#f33b45;"><strong>页面内容方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过文件合并，css精灵图，base64等方式来减少http的请求</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过DNS缓存机制来减少DNS的查询次数</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.通过设置缓存策略，对常用不变的资源进行缓存</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.使用延迟加载的方式，来减少页面首屏加载时需要请求的资源</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.通过用户行为，对某些资源使用预加载的方式来提高用户需要访问资源时的响应速度</strong></span></p> <p><span style="color:#f33b45;"><strong>        服务器方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过CDN服务来提高用户对资源请求时的响应速度</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.服务器端通过Gzip等方式对于传输的资源进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.尽可能减小cookie的大小，静态资源分配到其他域名下，避免对静态资源请求时携带不必要的cookie</strong></span></p> <p><span style="color:#f33b45;"><strong>        CSS和javascript方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过对css和js文件进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.css放在head标签中，减少页面的首次渲染时间</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.避免使用@import </strong></span></p> <p><span style="color:#f33b45;"><strong>            4.JS放在body底部，或者使用defer或async属性，避免脚本的加载和执行阻塞页面的渲染</strong></span></p> <p>    34.html规范中为什么引用资源不加协议头 http或https ？</p> <p>        <span style="color:#f33b45;"><strong>如果用户当前访问的页面是通过https协议预览的，那么网页中的资源也只能够通过https协议的资源进行访问，否则浏览器会出现警告信息，</strong></span></p> <p><span style="color:#f33b45;"><strong>        不同的浏览器警告信息展示形式不同，为了解决这个问题，可以省略这个协议，省略后浏览器照样能正确引用相应的资源，还节省了5字节的数据量</strong></span></p> <p>    35.盒模型？</p> <p>        <span style="color:#f33b45;"><strong>盒模型分为内容(content)，填充(padding)，边框(border)，边距(margin)四个部分</strong></span></p> <p><span style="color:#f33b45;"><strong>        其中有标准盒模型和IE怪异模型</strong></span></p> <p><span style="color:#f33b45;"><strong>        标准盒模型：width/height 只包含content 不包含 padding和border</strong></span></p> <p><span style="color:#f33b45;"><strong>        IE怪异模型：width/height 包含content padding border</strong></span></p> <p><span style="color:#f33b45;"><strong>        可以使用box-sizing:content-box;设置为标准盒模型</strong></span></p> <p>    36.css中的选择器有哪些？</p> <p>       <span style="color:#f33b45;"><strong> id选择器        #</strong></span></p> <p><span style="color:#f33b45;"><strong>        类选择器        .</strong></span></p> <p><span style="color:#f33b45;"><strong>        标签选择器      div</strong></span></p> <p><span style="color:#f33b45;"><strong>        属性选择器      input[name=""]</strong></span></p> <p><span style="color:#f33b45;"><strong>        子代选择器      div>p</strong></span></p> <p><span style="color:#f33b45;"><strong>        后代选择器      div p</strong></span></p> <p><span style="color:#f33b45;"><strong>        兄弟选择器      li~a    选择li元素之后所有同层级的a元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        相邻兄弟选择器  li+a     选择紧接着li元素后的a元素</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪类选择器      :hover,:nth-child        </strong></span></p> <p><span style="color:#f33b45;"><strong>        伪元素选择器    ::after , ::before       </strong></span></p> <p><span style="color:#f33b45;"><strong>        通配符选择器    *</strong></span></p> <p>    37.伪类和伪元素的区别？</p> <p>       <span style="color:#f33b45;"><strong> 伪类和伪元素是用来修饰不在文档树中的部分</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说 当用户悬停在指定位置时，可以通过:hover来描述这个元素的状态</strong></span></p> <p><span style="color:#f33b45;"><strong>        伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如可以通过::before在一个元素前增加一些文本，虽然用户可以看到这些文本，但是这些文本实际上并不存在与文档树中</strong></span></p> <p><span style="color:#f33b45;"><strong>        按照规则 :: 代表伪元素    : 代表伪类    虽然目前大多数浏览器都支持使用这两种方式表示伪元素 </strong></span></p> <p>    38.css中哪些属性可继承？</p> <p>       <span style="color:#f33b45;"><strong> 一般具有继承性的属性有：字体相关的属性(font-size,font-weight),文本相关的属性(color,text-align),列表属性(list-style),光标属性cursor,元素可见性visibility</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个元素不是可继承属性的时候，可以通过将他的属性值设置成inherit来继承</strong></span></p> <p>    39.css优先级？</p> <p>     <span style="color:#f33b45;"><strong>   !important > 行内样式 > id选择器 > class选择器 > 标签选择器 > *         权重会叠加</strong></span></p> <p>    40.css3新增的伪类？</p> <p> <span style="color:#f33b45;"><strong>       nth-child()</strong></span></p> <p><span style="color:#f33b45;"><strong>        last-child</strong></span></p> <p><span style="color:#f33b45;"><strong>        first-of-type</strong></span></p> <p><span style="color:#f33b45;"><strong>        last-of-type</strong></span></p> <p><span style="color:#f33b45;"><strong>        nth-of-type()</strong></span></p> <p>    41.如何居中div？</p> <p>      <span style="color:#f33b45;"><strong>  对于宽高固定的元素：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.可以通过margin:0 auto;设置水平居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.{ position:absolute; width:200px; height:200px; left:50%; top:50%; margin:-100px; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.{ display:flex; justify-content:center; align-items:center; } 水平垂直居中</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于宽高不固定的元素，4和5即可实现</strong></span></p> <p>    42.display的值有哪些？</p> <p>     <span style="color:#f33b45;"><strong>   none: 元素隐藏</strong></span></p> <p><span style="color:#f33b45;"><strong>        block: 转为块级元素，换行显示，可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        inline: 转为行内元素，逐行显示，不可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        inline-block: 转为行内块元素，同行显示，可设置宽高</strong></span></p> <p><span style="color:#f33b45;"><strong>        table:块级表格显示</strong></span></p> <p><span style="color:#f33b45;"><strong>        flex: 伸缩布局</strong></span></p> <p><span style="color:#f33b45;"><strong>        inherit:继承父元素display的值</strong></span></p> <p>    43.position的值定位原点是？</p> <p>       <span style="color:#f33b45;"><strong> static：无定位方式，原点不变</strong></span></p> <p><span style="color:#f33b45;"><strong>        fixed：定位原点左上角</strong></span></p> <p><span style="color:#f33b45;"><strong>        relative:定位原点位于当前元素左上角</strong></span></p> <p><span style="color:#f33b45;"><strong>        absolute：定位原点位于父级的relative元素的左上角</strong></span></p> <p>    44.css3有哪些新特性？</p> <p>     <span style="color:#f33b45;"><strong>   C3选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>        动画 (animation)</strong></span></p> <p><span style="color:#f33b45;"><strong>        圆角 (border-radius)</strong></span></p> <p><span style="color:#f33b45;"><strong>        阴影 (box-shadow text-shadow)</strong></span></p> <p><span style="color:#f33b45;"><strong>        渐变 (gradient)</strong></span></p> <p><span style="color:#f33b45;"><strong>        transform translate() scale() rotate() skew()</strong></span></p> <p><span style="color:#f33b45;"><strong>        过渡 (transtion)</strong></span></p> <p>    45.用纯css画一个三角形？</p> <p>        <span style="color:#f33b45;"><strong>采用相邻边框连接处的均分原理，把元素的宽高设为0，只设置border，把任意三条边隐藏transparent 就是一个三角形了</strong></span></p> <pre data-index="1" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">width</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">height</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">border-width</span>:<span class="hljs-number">10px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">border-style</span>:solid;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">border-color</span>:red transparent transparent transparent;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    46.css多列等高实现方式？</p> <p>        <span style="color:#f33b45;"><strong>1.使用负margin-bottom 和 正 padding-bottom 对冲实现</strong></span>           </p> <pre data-index="2" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">ul</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-attribute">overflow</span>:hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">ul</span>><span class="hljs-selector-tag">li</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-attribute">margin-bottom</span>:-<span class="hljs-number">99999px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-attribute">padding-bottom</span>:<span class="hljs-number">99999px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>       <span style="color:#f33b45;"><strong> 2.利用flex布局</strong></span></p> <pre data-index="3" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">ul</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">display</span>:flex;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">ul</span>><span class="hljs-selector-tag">li</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">flex</span>:<span class="hljs-number">1</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    47.css里的visibility属性里有个collapse属性值是干嘛用的？在不同浏览器中的区别？</p> <p>        </p> <p>    48.width:100% 和 width:auto 的区别？</p> <p>       <span style="color:#f33b45;"><strong> width:100%:会使当前元素盒子的宽度等于父元素的内容宽度</strong></span></p> <p><span style="color:#f33b45;"><strong>        width:auto：会使当前元素撑满整个父元素，margin/padding/border/content会自动分配水平空间</strong></span></p> <p>    49.简单介绍使用图片base64编码的优缺点？</p> <p>        <span style="color:#f33b45;"><strong>优点：可以减少一个http请求</strong></span></p> <p><span style="color:#f33b45;"><strong>        缺点：1.根据base64编码的原理，编码之后的大小会比原文件大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，还会增加浏览器对html/css文件解析渲染的时间</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.使用base64无法直接缓存，要缓存只能缓存包含base64的文件，这比直接缓存图标的效果差的多</strong></span></p> <p>    50.对于margin重叠问题的理解？</p> <p></p> <p>    51.BFC概念的理解？ (BlockFormattingContext:块格式化上下文)</p> <p>       <span style="color:#f33b45;"><strong> BFC指的是块级格式化上下文，一个元素形成BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素也不会影响到BFC中的内部元素。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一个BFC就相当于一个隔离区，和其他区域互不影响，一般来说，一个根元素就是一个BFC区域，浮动和绝对定位的元素也会形成BFC，</strong></span></p> <p><span style="color:#f33b45;"><strong>        display的属性值为inline-block,flex这些属性时也会创建BFC，还有就是overflow值不为visible时都会创建BFC</strong></span></p> <p>    52.IFC是什么？</p> <p>       <span style="color:#f33b45;"><strong> IFC指的是行级格式化上下文</strong></span></p> <p><span style="color:#f33b45;"><strong>        行级上下文会在水平方向上，一个接着一个摆放，当一行不够时会自动换行，行级上下文的高度由内部最高的内联盒子的高度决定</strong></span></p> <p>    53.为什么需要清除浮动？ 清除浮动的方式？</p> <p>        <span style="color:#f33b45;"><strong>因为浮动后的元素，脱离了文档流，高度塌陷，影响到其他元素的布局显示。</strong></span></p> <p><span style="color:#f33b45;"><strong>        方式：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1. ::after{ content:""; clear:both; }</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.父元素添加{ overflow:hidden }</strong></span></p> <p>    54.css优化 提高性能的方式？</p> <p>      <span style="color:#f33b45;"><strong>  加载性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.使用压缩方式，将css样式文件进行压缩，减小文件体积</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.使用link的方式引入样式表，减少使用@import 的方式</strong></span></p> <p><span style="color:#f33b45;"><strong>        选择器性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.避免使用通配符选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.尽量少的用标签选择器，而是用class选择器</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.尽量少的使用后代选择器，降低选择器的权重值。</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.了解哪些属性是可以通过继承而来的，避免这些属性重复使用规则</strong></span></p> <p><span style="color:#f33b45;"><strong>        渲染性能：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.谨慎使用高性能属性：浮动，定位</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.尽量减少页面的重绘 重排</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.去除空规则。{ } 空规则的产生一般来说是为了预留样式</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.属性值为0时，不添加单位</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.属性值为浮动小数时，去掉小数点前的0</strong></span></p> <p><span style="color:#f33b45;"><strong>            6.使用精灵图将多个小图标整合在一次http请求中</strong></span></p> <p>    55.浏览器是怎么解析css选择器的？</p> <p></p> <p>    56.为什么不建议使用通配符初始化css样式？</p> <p>       <span style="color:#f33b45;"><strong> 通配符会将网页上所有的标签都遍历一遍，这样大大加强了对网站运行的负载，会使网站加载的时间变长</strong></span></p> <p>    57.全屏滚动的原理是什么 用到哪些css属性？</p> <p>       <span style="color:#f33b45;"><strong> 假设有5个需要展示的页面，那么页面的高度为500%，只是展示100%，容器及容器内部的页面取当前可视区高度，同时容器的父元素overflow属性值为hidden，</strong></span></p> <p><span style="color:#f33b45;"><strong>        通过更改容器可视区的位置来实现全屏滚动的效果，主要是响应鼠标滚轮事件，页面通过css动画进行移动</strong></span></p> <p><span style="color:#f33b45;"><strong>        overflow:hidden;    transition</strong></span></p> <p>    58.响应式原理？ 兼容ie低版本浏览器？</p> <p>        <span style="color:#f33b45;"><strong>响应式原理：媒体查询 @media max-width() ; 可用现成第三方库respond.js兼容ie低版本浏览器</strong></span></p> <p>    59.移动端需要设置的meta？</p> <pre data-index="4" class="set-code-show" name="code"><code class="language-html hljs language-xml">      <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">" -width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"</span>/></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    60.如何去除inline-block元素间间距？</p> <p>       <span style="color:#f33b45;"><strong> 1.去除空格</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.使用margin负值</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.font-size:0;</strong></span></p> <p>    61.overflow:scroll 移动端不能平滑滚动怎么解决？</p> <pre data-index="5" class="set-code-show" name="code"><code class="language-css hljs">{ -webkit-<span class="hljs-attribute">overflow</span>-scrolling:touch; }</code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    62.有一个高度自适应的div，里面有两个div，第一个div高度为100px，希望第二个div占满剩下的高度 如何做？</p> <pre data-index="6" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height:100px;"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ord"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.box</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:relative;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.ord</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">top</span>:<span class="hljs-number">100px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    63.什么是cookie隔离？ 或者说 资源请求的时候不带上cookie怎么做？</p> <p>       <span style="color:#f33b45;"><strong> cookie隔离是指将静态资源文件存放在非主域名下，这样请求静态资源时就不会带着cookie</strong></span></p> <p>    64.什么是css预处理器/后处理器？</p> <p>       <span style="color:#f33b45;"><strong> css预处理器定义了一种新的语言，为css提供了一些编程的特性，然后再编译成正常的css文件，如less ，sass 等</strong></span></p> <p><span style="color:#f33b45;"><strong>        css后处理器是对css进行处理，并最终生成css的预处理器，如 postcss</strong></span></p> <p>    65.画一条0.5px的线</p> <pre data-index="7" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">height</span>:<span class="hljs-number">1px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">background-color</span>:red;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-attribute">transform</span>:<span class="hljs-built_in">scaleY</span>(.<span class="hljs-number">5</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    66.transition和animation的区别？</p> <p>        <span style="color:#f33b45;"><strong>transition 关注的是css属性的变化，而animation作用于元素本身并不是样式属性，可以使用关键帧的概念，实现更自由的动画</strong></span></p> <p>    67.什么是首选最小宽度？</p> <p>        <span style="color:#f33b45;"><strong>首选最小宽度指的是元素最适合的最小宽度，中文最小宽度为每个汉字的宽度，英文最小宽度由特定的连续的英文字符决定，</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以如果想让英文和中文一样，每一个字符都是用最小宽度，则可以设置css { word-break:break-all; }</strong></span></p> <p>    68.为什么height:100%;会无效？</p> <p>      <span style="color:#f33b45;"><strong>  对于普通文档流中的元素，百分比高度要想起作用，其父元素必须有一个可以生效的高度值。</strong></span></p> <p>    69.什么是替换元素？</p> <p>        <span style="color:#f33b45;"><strong>通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素。如：<img>、<video>、<input>等</strong></span></p> <p>    70.如何实现单行、多行文本溢出的省略(...)</p> <p><span style="color:#f33b45;"><strong>        单行溢出：</strong></span></p> <p><span style="color:#f33b45;"><strong>            p{<!-- --></strong></span></p> <p><span style="color:#f33b45;"><strong>                overflow:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>                text-overflow:ellipsis;</strong></span></p> <p><span style="color:#f33b45;"><strong>                white-space:nowrap;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>        多行溢出：</strong></span></p> <p><span style="color:#f33b45;"><strong>            p{<!-- --></strong></span></p> <p><span style="color:#f33b45;"><strong>                position:relative;</strong></span></p> <p><span style="color:#f33b45;"><strong>                line-height:1.5em;</strong></span></p> <p><span style="color:#f33b45;"><strong>                height:3em;             两行省略，3/1.5=2</strong></span></p> <p><span style="color:#f33b45;"><strong>                overflow:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>                word-break:break-all;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>            p::after{<!-- --></strong></span></p> <p><span style="color:#f33b45;"><strong>                content:'...';</strong></span></p> <p><span style="color:#f33b45;"><strong>                position:absolute;</strong></span></p> <p><span style="color:#f33b45;"><strong>                bottom:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>                right:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>                background-color:#fff;</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p>    71.常见的元素隐藏方式？</p> <p><span style="color:#f33b45;"><strong>        1.display:none;</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.opacity:0;</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.visibility:hidden;</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.{ position:absolute;left:-9999px;top:-9999px; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.{ position:absolute;z-index:-999px; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        6.{ width:0;height:0; }</strong></span></p> <p><span style="color:#f33b45;"><strong>        7.transform:scale(0,0)</strong></span></p> <p>    72.css实现上下固定，中间自适应布局？</p> <p>        <span style="color:#f33b45;"><strong>1.绝对定位方式：</strong></span></p> <pre data-index="8" class="set-code-hide" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">header</span>,<span class="hljs-selector-tag">footer</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">header</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">               <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>; </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">main</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">top</span>:<span class="hljs-number">100px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">bottom</span>:<span class="hljs-number">100px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">footer</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        2.使用flex布局：</strong></span></p> <pre data-index="9" class="set-code-hide" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">body</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">display</span>:flex;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">flex-direction</span>:column;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">height</span>:<span class="hljs-number">100vh</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">header</span>,<span class="hljs-selector-tag">footer</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">background-color</span>:red</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-tag">main</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">flex-grow</span>:<span class="hljs-number">1</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">background-color</span>:green;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    73.css实现两栏布局？</p> <p>     <span style="color:#f33b45;"><strong>   1.浮动实现</strong></span></p> <pre data-index="10" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.left</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">float</span><span class="hljs-selector-pseudo">:left</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">width</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.right</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">width</span>:auto;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>       <span style="color:#f33b45;"><strong> 2.绝对定位</strong></span></p> <pre data-index="11" class="set-code-hide" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.left</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">width</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.right</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">position</span>:absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">left</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            或</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.right</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">margin-right</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>      <span style="color:#f33b45;"><strong>  3.flex布局</strong></span></p> <pre data-index="12" class="set-code-hide" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            box{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">display</span>:flex;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.left</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">width</span>:<span class="hljs-number">200px</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-selector-class">.right</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attribute">flex</span>:<span class="hljs-number">1</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    74.三栏布局？</p> <p><span style="color:#f33b45;"><strong>        1.左右浮动宽度200px;中间设置margin:0 200px;需要注意的是中间的元素需要放在最底下</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.父元素相对定位，左右元素绝对定位在两侧设置宽度，中间margin：0 200px;</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.flex布局，父元素display:flex;左右两元素设置宽度，中间元素flex:1;</strong></span></p> <p>    75.js中的数据类型？</p> <p>       <span style="color:#f33b45;"><strong> 基本数据类型：Number String Boolean undefined null</strong></span></p> <p><span style="color:#f33b45;"><strong>        引用数据类型：Object Array Function</strong></span></p> <p>    76.js中有哪些内置对象？</p> <p>     <span style="color:#f33b45;"><strong>   JS中的内置对象主要是指程序执行前存在全局作用域里由js定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一般我们经常用到的全局值属性：NaN、undefined，全局函数如：parseInt(),parseFloat()，用来实例化对象的构造函数如：Date，Object，Math    </strong></span></p> <p>    77.undefined与undeclared的区别？</p> <p>      <span style="color:#f33b45;"><strong>  已在作用域下声明但还没赋值的变量是undefined，还没有在作用域下声明过的变量是undeclared。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于undeclared变量的引用，浏览器会报引用错误，但是我们可以通过typeof的安全机制来避免这种报错，因为undeclared的变量typeof会返回undefined</strong></span></p> <p>    78.undefined和null的区别？</p> <p>        <span style="color:#f33b45;"><strong>首先undefined和null都是基本数据类型，undefined指的是变量已声明但未赋值，null代表的含义为空对象</strong></span></p> <p>    79.JavaScript原型 原型链 ？</p> <p>       <span style="color:#f33b45;"><strong> 个人理解：原型就是一个属性，这个属性同时也是一个对象，构造函数中有一个属性prototype就是原型，原型的作用：共享数据，节省内存空间，实现继承</strong></span></p> <p><span style="color:#f33b45;"><strong>        原型链是指实例对象和原型对象是通过__proto__原型来联系的，这种关系叫做原型链</strong></span></p> <p>    80.在js中不同进制数表示方式？</p> <p>        <span style="color:#f33b45;"><strong>二进制：0b      以0b开头</strong></span></p> <p><span style="color:#f33b45;"><strong>        八进制：0o      以0o开头</strong></span></p> <p><span style="color:#f33b45;"><strong>        十进制：</strong></span></p> <p><span style="color:#f33b45;"><strong>      十六进制：0x00    以0x开头</strong></span></p> <p>    81.typeof NaN 的结果是什么？</p> <p>       <span style="color:#f33b45;"><strong> 结果为number。</strong></span></p> <p><span style="color:#f33b45;"><strong>        NaN指的是‘不是一个数字’，用于指出数字类型中的错误情况，即执行数学运算没有成功</strong></span></p> <p><span style="color:#f33b45;"><strong>        NaN是一个特殊值，它和自身不相等，是唯一一个非自反的值；即 NaN != NaN 为true</strong></span></p> <p>    82.解析字符串中的数字parseInt() 和 将字符串强制类型转换为数字Number() 的返回结果都是数字，他们有什么区别？</p> <p><span style="color:#f33b45;"><strong>        解析字符串parseInt()中含有非数字字符，解析从左到右解析，解析到非数字字符时即会停止</strong></span></p> <p><span style="color:#f33b45;"><strong>        强制类型转换Number()不允许出现非数字字符，否则会失败返回NaN</strong></span></p> <p>    83.什么情况下会发生布尔值的隐式强制类型转换？</p> <p>      <span style="color:#f33b45;"><strong>  条件判断表达式中会发生布尔值的隐式强制类型转换</strong></span></p> <p><span style="color:#f33b45;"><strong>        比如：1. if( .. ){}   2.  ..? '':''   3.逻辑与&&、逻辑或|| 4.do while(..) 等等</strong></span></p> <p>    84.如何将浮点数左边的数每三位添加一个逗号（千位分隔符）？ 如 12000000.11转化为 12,000,000.11    包含整数？</p> <pre data-index="13" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">format</span>(<span class="hljs-params">number</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> number = number + <span class="hljs-string">''</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(number.<span class="hljs-title function_">indexOf</span>(<span class="hljs-string">'.'</span>)!=-<span class="hljs-number">1</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> number.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/(?!^)(?=(\d{3})+\.)/g</span>, <span class="hljs-string">","</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> number.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/\d{1,3}(?=(\d{3})+$)/g</span>,<span class="hljs-string">"$&,"</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    85.JavaScript创建对象的几种方式？</p> <p>        <span style="color:#f33b45;"><strong>1.工厂模式（解决了创建多个相似对象时，代码的复用问题；没有解决对象识别的问题，即不知道对象的类型）</strong></span></p> <pre data-index="14" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-params">name,age</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> o = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                o.<span class="hljs-property">name</span> = name;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                o.<span class="hljs-property">age</span> = age;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                o.<span class="hljs-property">saiName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ <span class="hljs-title function_">alert</span>(o.<span class="hljs-property">name</span>) }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> o</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person1 = <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">'zs'</span>,<span class="hljs-number">18</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person2 = <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">'ls'</span>,<span class="hljs-number">16</span>)</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>       <span style="color:#f33b45;"><strong> 2.构造函数模式（解决了工厂模式对象识别问题；没创建一个对象都会创建一个saiName函数的实例做相同的事，造成内存的浪费）</strong></span>           </p> <pre data-index="15" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">function</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-params">name.age</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">saiName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person1 = <span class="hljs-keyword">new</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">'zs'</span>,<span class="hljs-number">18</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person2 = <span class="hljs-keyword">new</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">'ls'</span>,<span class="hljs-number">16</span>)</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    <span style="color:#f33b45;"><strong>    3.原型模式</strong></span></p> <pre data-index="16" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params"></span>){}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">Person</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">name</span> = <span class="hljs-string">'zs'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">Person</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">age</span> = <span class="hljs-number">18</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">Person</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">saiName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>()</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>       <span style="color:#f33b45;"><strong> 4.构造函数模式+原型模式 组合</strong></span></p> <pre data-index="17" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name, age, job</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">job</span> = job;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">Person</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">constructor</span>: <span class="hljs-title class_">Person</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">sayName</span>: <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person1 = <span class="hljs-keyword">new</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">"james"</span>，<span class="hljs-number">9</span>，<span class="hljs-string">"student"</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person2 = <span class="hljs-keyword">new</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-string">"kobe"</span>，<span class="hljs-number">9</span>，<span class="hljs-string">"student"</span>);     </div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>   86.JavaScript实现继承的几种方式？</p> <p>        <span style="color:#f33b45;"><strong>1.原型链继承</strong></span></p> <pre data-index="18" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:836px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SuperType</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">colors</span> = [<span class="hljs-string">'red'</span>,<span class="hljs-string">'green'</span>,<span class="hljs-string">'blue'</span>]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SubType</span>(<span class="hljs-params"></span>){}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SubType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SuperType</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> subtype1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(subtype1.<span class="hljs-property">colors</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">'white'</span>))          <span class="hljs-comment">// 4 ['red','green','blue','white']</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> subtype2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>(); </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(subtype2.<span class="hljs-property">colors</span>)                    <span class="hljs-comment">// ['red','green','blue','white']</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        2.借用构造函数继承</strong></span></p> <pre data-index="19" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SuperType</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">colors</span> = [<span class="hljs-string">'red'</span>,<span class="hljs-string">'green'</span>,<span class="hljs-string">'blue'</span>]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SubType</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title class_">SuperType</span>().<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> instance1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            instance1.<span class="hljs-property">colors</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">'yellow'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(instance1.<span class="hljs-property">colors</span>)  <span class="hljs-comment">// ['red','green','blue','yellow']</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> instance2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(instance2.<span class="hljs-property">colors</span>)  <span class="hljs-comment">// ['red','green','blue']</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        3.组合继承</strong></span></p> <pre data-index="20" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SuperType</span>(<span class="hljs-params">name</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">colors</span> = [<span class="hljs-string">'red'</span>,<span class="hljs-string">'green'</span>,<span class="hljs-string">'blue'</span>]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SuperType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){ <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SubType</span>(<span class="hljs-params">name,age</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title class_">SuperType</span>.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>,name)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">//继承方法</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SubType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SuperType</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SubType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">constructor</span>  = <span class="hljs-title class_">SubType</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> instance1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>(<span class="hljs-string">"james"</span>,<span class="hljs-number">9</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            instance1.<span class="hljs-property">colors</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">"black"</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(instance1.<span class="hljs-property">colors</span>);  <span class="hljs-comment">//"red,green,blue,black"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            instance1.<span class="hljs-title function_">sayName</span>(); <span class="hljs-comment">// "james"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> instance2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>(<span class="hljs-string">"kobe"</span>,<span class="hljs-number">10</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(instance2.<span class="hljs-property">colors</span>);  <span class="hljs-comment">//"red,green"blue,</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            instance2.<span class="hljs-title function_">sayName</span>(); <span class="hljs-comment">// "kobe"</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        4.寄生式继承</strong></span></p> <pre data-index="21" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">createPerson</span>(<span class="hljs-params">person</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> clone = <span class="hljs-title function_">object</span>(person)      <span class="hljs-comment">// 通过调用函数创建新对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                clone.<span class="hljs-property">saiHi</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){       <span class="hljs-comment">// 某种方式增强这个对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(‘hi’)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> clone            <span class="hljs-comment">// 返回这个对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> person1 = <span class="hljs-title function_">createPerson</span>({<span class="hljs-attr">name</span>:<span class="hljs-string">'zs'</span>})</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            person1.<span class="hljs-title function_">saiHi</span>()     <span class="hljs-comment">// hi</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>     <span style="color:#f33b45;"><strong>   5.寄生式组合继承 (引用类型最理想的继承范式)</strong></span>          </p> <pre data-index="22" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:941px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-keyword">function</span> <span class="hljs-title function_">inheritPrototype</span>(<span class="hljs-params">subType, superType</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">//1.创建了超类（父类）原型的（副本）浅复制</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> prototype = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(superType.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 2.修正子类原型的构造函数属性</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">//  constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// prototype.constructor  未修改前指向的 superType，为了弥补因重写原型而失去的默认constructor属性。 </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                prototype.<span class="hljs-property">constructor</span> = subType;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 3.将子类的原型替换为超类（父类）原型的（副本）浅复制</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                subType.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = prototype;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SuperType</span>(<span class="hljs-params">name</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">colors</span> = [<span class="hljs-string">"red"</span>, <span class="hljs-string">"blue"</span>, <span class="hljs-string">"green"</span>];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SuperType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">sayName</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            };</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">SubType</span>(<span class="hljs-params">name, age</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">//构造函数式继承--子类构造函数中执行父类构造函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title class_">SuperType</span>.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>, name);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 核心：因为是对父类原型的复制，所以不包含父类的构造函数，也就不会调用两次父类的构造函数造成浪费</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title function_">inheritPrototype</span>(<span class="hljs-title class_">SubType</span>, <span class="hljs-title class_">SuperType</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-title class_">SubType</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">sayAge</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title function_">alert</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> instance = <span class="hljs-keyword">new</span> <span class="hljs-title class_">SubType</span>(<span class="hljs-string">"lichonglou"</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(instance.<span class="hljs-property">name</span>)</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    87.JavaScript作用域链？</p> <p>        <span style="color:#f33b45;"><strong>作用域链的作用是保证执行环境有权访问的所有变量和函数的有效访问，通过作用域链，我们可以访问到外层环境的变量和函数。</strong></span></p> <p>    88.This的理解？</p> <p>        <span style="color:#f33b45;"><strong>this是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this的指向可以通过四种调用模式来判断</strong></span></p> <p><span style="color:#f33b45;"><strong>        1.函数调用模式，当一个函数直接作为函数来调用时，这个this指的是window（全局对象）</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.方法调用模式，当一个函数以一个对象的方法来调用时，这个this指的是这个对象</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.构造器调用模式，当一个函数用new的方式调用时，函数执行前会新创建一个对象，this指向这个新创建的对象</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.apply、call、bind调用模式，这三个方法都可以显示的指定调用函数的this指向</strong></span></p> <p>    89.写一个通用事件函数(封装 绑定事件、解绑事件、获取事件目标、获取event、阻止冒泡、取消默认行为)？</p> <p>     <span style="color:#f33b45;"><strong>   绑定事件：</strong></span></p> <pre data-index="23" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">addEvent</span>(<span class="hljs-params">ele,eventType,fun</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(ele.<span class="hljs-property">addEventListener</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele.<span class="hljs-title function_">addEventListener</span>(eventType,fun,<span class="hljs-literal">false</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(ele.<span class="hljs-property">attachEvent</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele.<span class="hljs-title function_">attachEvent</span>(<span class="hljs-string">'on'</span>+eventType,fun)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele[<span class="hljs-string">'on'</span>+eventType] = fun</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>       <span style="color:#f33b45;"><strong> 解绑事件：</strong></span></p> <pre data-index="24" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">removeEvent</span>(<span class="hljs-params">ele,eventType,fun</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(ele.<span class="hljs-property">removeEventListener</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele.<span class="hljs-title function_">removeEventListener</span>(eventType,fun,<span class="hljs-literal">false</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(ele.<span class="hljs-property">detachEvent</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele.<span class="hljs-title function_">detachEvent</span>(<span class="hljs-string">'on'</span>+eventType,fun)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    ele[<span class="hljs-string">'on'</span>+eventType] = <span class="hljs-literal">null</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        获取事件目标:</strong></span></p> <pre data-index="25" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">getTarget</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> event.<span class="hljs-property">target</span> || event.<span class="hljs-property">srcElement</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        获取event</strong></span></p> <pre data-index="26" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">getEvent</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> event || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>        阻止冒泡：</strong></span></p> <pre data-index="27" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">stopPropagation</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(event.<span class="hljs-property">stopPropagation</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    event.<span class="hljs-title function_">stopPropagation</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    event.<span class="hljs-property">cancelBubble</span> = <span class="hljs-literal">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#f33b45;"><strong>       取消默认行为：</strong></span></p> <pre data-index="28" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">preventDefault</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(event.<span class="hljs-property">preventDefault</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    event.<span class="hljs-title function_">preventDefault</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    event.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    90.三种事件模型是什么？ 事件处理机制</p> <p><span style="color:#f33b45;"><strong>        第一种事件模型（原始事件模型）：通过onclick，on+'事件类型'的形式绑定事件，只能绑定一个相同事件，再次绑定将会覆盖之前的事件</strong></span></p> <p><span style="color:#f33b45;"><strong>        第二种事件模型（IE事件模型）： 通过attachEvent绑定事件，只支持冒泡，所以事件有两个阶段，目标阶段和冒泡阶段，事件从目标元素冒泡到document，并且一次检查各个节点是否绑定了事件，如果有则执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        第三种事件模型：通过addEventListener绑定事件，有三个阶段，捕获阶段、目标阶段、冒泡阶段。捕获阶段：事件从外向内执行document->ele;冒泡阶段：事件从内向外执行ele->document;默认为冒泡（false）</strong></span></p> <p>    91.事件委托是什么？</p> <p><span style="color:#f33b45;"><strong>        事件委托的本质上利用了浏览器事件冒泡的机制，因为事件在冒泡的过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，</strong></span></p> <p><span style="color:#f33b45;"><strong>        因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式成为事件委托。</strong></span></p> <p>    92. ["1","2","3"].map(parseInt) 答案是什么？  </p> <p>       <span style="color:#f33b45;"><strong> map() 接收三个参数 item,index,arr （当前遍历项，当前索引，当前数组）</strong></span></p> <p><span style="color:#f33b45;"><strong>        parseInt() 接受两个参数 str,radix (要被解析的字符串，要解析的数字的基数)</strong></span></p> <p><span style="color:#f33b45;"><strong>        因为map()遍历第三个参数不需要，所以map之后的数组为[ parseInt(1,0), parseInt(2,1), parseInt(3,2) ]</strong></span></p> <p><span style="color:#f33b45;"><strong>        因为parseInt()第二个参数的值的取值范围在2~36之间且包含0，并且第一个参数的值的首位必须小于第二个参数，否则为NaN</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以最终的结果就是 [1,NaN,NaN]</strong></span></p> <p>    93.闭包？</p> <p>       <span style="color:#f33b45;"><strong> 闭包是指有权访问另一个函数作用域中变量的函数，</strong></span></p> <p><span style="color:#f33b45;"><strong>        闭包的作用：</strong></span></p> <p><span style="color:#f33b45;"><strong>         1.函数外部能够访问到函数内部的变量。通过使用闭包，在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量</strong></span></p> <p><span style="color:#f33b45;"><strong>         2.使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收</strong></span></p> <p>    94.javascript代码中的"use strict";是什么意思?使用它区别是什么？</p> <p>    <span style="color:#f33b45;"><strong>    "use strict" 指的是一种严格运行模式，在这种模式对js的使用添加了一些限制，比如说禁止this指向全局变量，禁止使用with语句等。</strong></span></p> <p>    95.怎么判断一个数据属于某种数据类型？  (如何判断一个对象是否属于某个类)</p> <pre data-index="29" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">getType</span>(<span class="hljs-params">o</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> <span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">toString</span>.<span class="hljs-title function_">call</span>(o).<span class="hljs-title function_">slice</span>(<span class="hljs-number">8</span>,-<span class="hljs-number">1</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    96.JavaScript中，哪个函数执行对象查找时永远不会去查找原型？</p> <p>       <span style="color:#f33b45;"><strong> Object.hasOwnProperty() : 用来检测一个对象是否含有特定的自身属性</strong></span></p> <p>    97.对于JSON的了解？</p> <p>      <span style="color:#f33b45;"><strong>  JSON是一种基于文本的轻量级数据交换格式，它可以被任何的编程语言读取和作为数据格式来传递。</strong></span></p> <p><span style="color:#f33b45;"><strong>        在js中，有两个操作json的方法，JSON.stringify():通过一个符合json格式的数据结构，将其转换为一个json字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>        JSON.parse():将一个符合json格式的字符串转换成一个js数据结构，如果不符合json格式的字符串则会报错。</strong></span></p> <p>    98.JS延迟加载的方式有哪些？</p> <p>   <span style="color:#f33b45;"><strong>     1.放在body标签底部</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.<script>标签中使用defer属性</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.<script>标签中使用async属性</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.动态加载script标签</strong></span></p> <p>    99.Ajax？ 如何创建一个ajax</p> <p>       <span style="color:#f33b45;"><strong> ajax是一种异步通信的方法，通过js向服务器发送http请求，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一个方法</strong></span></p> <pre data-index="30" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:1054px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">var</span> xhr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>()                          <span class="hljs-comment">// 1. 创建XMLHttpRequest对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-title function_">open</span>(<span class="hljs-string">'get/post'</span>,<span class="hljs-string">'url'</span>,<span class="hljs-literal">true</span>)                         <span class="hljs-comment">// 2. 使用open创建一个http请求，接受三个参数 method，url，是否异步</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-property">onreadstatechange</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){                     <span class="hljs-comment">// 3. 监听xhr状态的改变</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">readyState</span> !== <span class="hljs-number">4</span>) <span class="hljs-keyword">return</span>;                   <span class="hljs-comment">// 4. readyState等于4时，代表服务器返回的数据接收完成</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">status</span> === <span class="hljs-number">200</span>){                            <span class="hljs-comment">// 5. status状态码200 请求成功</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'请求成功'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">statusText</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }       </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-property">onerror</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){                               <span class="hljs-comment">// 6.监听xhr请求失败</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">statusText</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-property">responseType</span> = <span class="hljs-string">'json'</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-title function_">setRequestHeader</span>(<span class="hljs-string">'Accept'</span>,<span class="hljs-string">'application/json'</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        xhr.<span class="hljs-title function_">send</span>(<span class="hljs-literal">null</span>)                                          <span class="hljs-comment">// 7. 发送请求(params)</span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    100.浏览器的缓存机制？</p> <p><span style="color:#f33b45;"><strong>        浏览器的缓存机制指的是通过一段时间内保留已接收到web资源的一个副本，如果在资源的有效时间内，发起了对这个资源的再一次请求，那么浏览器会直接使用缓存的副本，而不是向服务器发送请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        浏览器的缓存类型分为两种：强缓存/协商缓存</strong></span></p> <p><span style="color:#f33b45;"><strong>        强缓存：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.不会向服务器发送请求，直接从缓存中读取资源，在谷歌控制台network选项中，可以看到请求状态码200并且size显示from disk cache或from memory cache </strong></span></p> <p><span style="color:#f33b45;"><strong>        协商缓存：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.向服务器发送请求，服务器会根据这个请求的请求头的一些参数来判断是否为协商缓存，如果是则返回304状态码并带上新的响应头通知浏览器从缓存中读取资源</strong></span></p> <p>    101.ajax解决浏览器缓存问题？</p> <p><span style="color:#f33b45;"><strong>        1. 在ajax发送请求前加上 ：          xhr.setRequestHeader('Cache-Control','no-cache')</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. 在请求地址上加上随机数或时间戳 :  "/server?t="+Math.random() 或 "/server?t="+new Date().getTime()</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. 如果是jquery，直接加上 :         $.ajaxSetup({cache:false})</strong></span></p> <p>    102.如何解决跨域问题？</p> <p><span style="color:#f33b45;"><strong>        1. get请求的话 可以使用 jsonp</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. CORS方式：Access-Control-Allow-Origin:*</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. 使用websocket协议，这个协议没有同源限制</strong></span></p> <p><span style="color:#f33b45;"><strong>        4. 使用服务器来代理跨域的访问请求：就是有跨域的请求操作时发送请求给后端，让后端代为请求再把最后返回的结果返回到前端</strong></span></p> <p>    103.同源策略？</p> <p><span style="color:#f33b45;"><strong>        我对浏览器的同源策略的理解是，一个域下的js脚本在未经允许的情况下，不能够访问另一个域的内容，这里的域指的是两个域的协议/域名/端口必须相同，否则则不属于同一个域。</strong></span></p> <p><span style="color:#f33b45;"><strong>        同源策略只要限制了三个方面：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.当前域下的js脚本不能够访问其他域下的cookie/localStorage和indexDB</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.当前域下的js脚本不能够操作访问其他域下的DOM</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.当前域下ajax不能够发送跨域请求</strong></span></p> <p><span style="color:#f33b45;"><strong>            同源策略的目的主要是为了保证用户的信息安全，它只是对js脚本的一中限制，并不是对浏览器的限制，对于一般的img或者<script>脚本请求都不会有跨域的限制</strong></span></p> <p>    104.document.write 和 innerHTML的区别？</p> <p><span style="color:#f33b45;"><strong>        document.write：替代整个文档内容，会重写整个页面</strong></span></p> <p><span style="color:#f33b45;"><strong>        innerHTML：替代指定元素的内容，只会重写页面中的部分内容</strong></span></p> <p>    105.js中DOM的操作(增删改查等操作)</p> <p><span style="color:#f33b45;"><strong>        查找节点：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.document.getElementById()</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.document.getElementsByTagName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.document.getElementsByClassName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            4.document.getElementsByName()</strong></span></p> <p><span style="color:#f33b45;"><strong>            5.document.querySelector()</strong></span></p> <p><span style="color:#f33b45;"><strong>            6.document.querySelecrotAll()</strong></span></p> <p><span style="color:#f33b45;"><strong>        创建：  createElement(node)      </strong></span></p> <p><span style="color:#f33b45;"><strong>        追加：  appendChild(node)</strong></span></p> <p><span style="color:#f33b45;"><strong>        插入：  insertBefore(oldNode,newNode)</strong></span></p> <p><span style="color:#f33b45;"><strong>        替换：  replaceChild(oldNode,newNode)</strong></span></p> <p><span style="color:#f33b45;"><strong>        移除：  removeChild(node)</strong></span></p> <p><span style="color:#f33b45;"><strong>        克隆：  cloneNode(true)   // true:克隆节点下所有的元素  false:克隆当前节点</strong></span></p> <p><span style="color:#f33b45;"><strong>        属性操作：</strong></span></p> <p><span style="color:#f33b45;"><strong>            getAttribute(key)   setAttribute(key,value)    hasAttribute(key)    removeAttribute(key)</strong></span></p> <p>    106. .call() 和 .apply()的区别？</p> <p> <span style="color:#f33b45;"><strong>       .call()和.apply()的作用是一样的，都是为了改变this指向,第一个参数为this的指向</strong></span></p> <p><span style="color:#f33b45;"><strong>        .call(): 传入的参数不确定，从第二个参数开始每个参数被依次传入函数中</strong></span></p> <p><span style="color:#f33b45;"><strong>        .apply(): 传入两个参数，第二个参数为一个数组</strong></span></p> <p>    107.js中数组，对象，字符串的常用方法？</p> <p><span style="color:#f33b45;"><strong>        数组：</strong></span></p> <p><span style="color:#f33b45;"><strong>            forEach()   遍历</strong></span></p> <p><span style="color:#f33b45;"><strong>            map()       遍历，返回一个新更改的数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            filter()    遍历，过滤返回一个条件满足的数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            every()     判断，数组元素是否全部都满足一个条件</strong></span></p> <p><span style="color:#f33b45;"><strong>            some()      判断，数组元素是否有一个满足条件</strong></span></p> <p><span style="color:#f33b45;"><strong>            find()      查找元素，找到元素则直接返回，不在进行遍历查询</strong></span></p> <p><span style="color:#f33b45;"><strong>            findIndex() 功能同上，不同点在于查找元素索引</strong></span></p> <p><span style="color:#f33b45;"><strong>            push()      在数组后面新加一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            unshift()   在数组前面新加一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            shift()     删除数组中第一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            pop()       删除数组中最后一个元素</strong></span></p> <p><span style="color:#f33b45;"><strong>            concat()    拼接数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            reverse()   数组反转</strong></span></p> <p><span style="color:#f33b45;"><strong>            sort()      排序</strong></span></p> <p><span style="color:#f33b45;"><strong>            join()      参数作为分隔符，将数组转化为字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>            slice()     截取数组（开始的位置，结束的位置）index从0开始</strong></span></p> <p><span style="color:#f33b45;"><strong>            splice(下标，要删除的个数，插入或则是替换的值)</strong></span></p> <p><span style="color:#f33b45;"><strong>            reduce()    求和</strong></span></p> <p><span style="color:#f33b45;"><strong>        对象：</strong></span></p> <p><span style="color:#f33b45;"><strong>            hasOwnProperty()    检测对象是否含有某个属性</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.keys()       将对象中的属性名存在一个数组中返回</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.values()     将对象中的属性值存在一个数组中返回</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.is()         判断两个值是否相等</strong></span></p> <p><span style="color:#f33b45;"><strong>            Object.assign()     对象的合并（浅拷贝）</strong></span></p> <p><span style="color:#f33b45;"><strong>        字符串：</strong></span></p> <p><span style="color:#f33b45;"><strong>            replace()           替换字符串(‘要替换的字符串’，‘替换后的字符串’)</strong></span></p> <p><span style="color:#f33b45;"><strong>            trim()              清楚两端空格</strong></span></p> <p><span style="color:#f33b45;"><strong>            substr()            字符串截取（开始的位置，结束的位置）index从0开始</strong></span></p> <p><span style="color:#f33b45;"><strong>            split()             字符串转数组，将参数中的值进行匹配截断成为一个数组</strong></span></p> <p><span style="color:#f33b45;"><strong>            includes()          字符串中是否包含某些字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>            startsWith()        字符串是否以某些字符串开头</strong></span></p> <p><span style="color:#f33b45;"><strong>            endsWith()          字符串是否以某些字符串结尾</strong></span></p> <p><span style="color:#f33b45;"><strong>            padStart()          满足条件时在字符串前面填充字符串 (字符串长度不足多少个时，要填充的字符串)</strong></span></p> <p><span style="color:#f33b45;"><strong>            padEnd()            满足条件时在字符串后面填充字符串 (字符串长度不足多少个时，要填充的字符串)</strong></span></p> <p><span style="color:#f33b45;"><strong>            repeat()            重复字符串（重复的次数）</strong></span></p> <p><span style="color:#f33b45;"><strong>        数组和字符串共有的方法： indexOf()和lastIndexOf()     </strong></span></p> <p>    108.JavaScript中的作用域和变量声明提升？</p> <p>      <span style="color:#f33b45;"><strong>  作用域分为局部作用域和全局作用域，函数内声明的变量称为局部作用域，不可被函数外所访问；函数外声明的变量称为全局作用域，可以在任何地方使用。</strong></span></p> <p><span style="color:#f33b45;"><strong>        变量声明提升就涉及到一个预解析的概念，也就是说函数的声明、变量的声明会提升到使用之前，只提升声明，不提升赋值。</strong></span></p> <p>    109.如何编写高性能的JavaScript</p> <p></p> <p>    110.哪些操作会造成内存泄漏？</p> <p><span style="color:#f33b45;"><strong>        1.由于使用未声明的变量（隐士全局变量），而意外的创建了全局变量，而使这个变量一直留在内存中无法被回收</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.设置了setInterval()定时器，而没有清除掉这个定时器</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.获取一个DOM元素的引用，而后这个元素删除了，由于我们一直保留了这个元素的引用，那么它也不会被回收</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.不合理的闭包，从而导致某些变量一直存在于内存中</strong></span></p> <p>    111.需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。（SPA）</p> <p><span style="color:#f33b45;"><strong>        第一种方式：通过location.hash，设置hash可以操作浏览器的前进和后退</strong></span></p> <p><span style="color:#f33b45;"><strong>        第二种方式：通过H5的pushState API,通过pushState把记录保存到浏览器的历史记录中，然后通过window.onpopstate事件来响应浏览器的前进和后退，</strong></span></p> <p><span style="color:#f33b45;"><strong>        这种方式有两个问题：一个是打开首页时没有记录，可以通过replaceState来将首页记录替换；另一个问题是当页面刷新的时候，请求的url需要后端配合将其重定向到一个页面中</strong></span></p> <p>    112.如何判断当前脚本运行在浏览器端还是node端</p> <p>   <span style="color:#f33b45;"><strong>     this === 'window' ? 'browser' : 'node'</strong></span></p> <p>    113.移动端的点击事件有延迟，是多久？为什么会出现？怎么解决？</p> <p><span style="color:#f33b45;"><strong>        移动端的点击事件有300ms的延迟，是因为移动端有双击缩放的这个操作，因此浏览器在click事件后要等待300ms，来判断用户是不是双击。</strong></span></p> <p><span style="color:#f33b45;"><strong>        解决方式：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过meta标签禁止网页的缩放</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过调用现成的第三方库 比如 FastClick</strong></span></p> <p>    114.前端路由？ 优缺点？</p> <p><span style="color:#f33b45;"><strong>        前端路由是指把不同的路由对应不同的页面的任务交给前端来做，一般在单页面应用会使用前端路由。</strong></span></p> <p><span style="color:#f33b45;"><strong>        优点：无刷新、用户体验好，不需要每次都从服务器全部获取，快速展现给用户</strong></span></p> <p><span style="color:#f33b45;"><strong>        缺点：单页面无法记住之前滚动的位置，无法在前进后退的时候回到上一次的位置</strong></span></p> <p>    115.检测浏览器版本的方式？</p> <p><span style="color:#f33b45;"><strong>        1.通过 window.navigator.userAgent</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.通过各个浏览器中的特征来判断，比如IE浏览器有window.ActiveXObjcet函数，谷歌浏览器中有window.chrome对象等</strong></span></p> <p>    116.使用js实现获取文件扩展名？</p> <pre data-index="31" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">getFileExtension</span>(<span class="hljs-params">filename</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> filename.<span class="hljs-title function_">slice</span>(((filename.<span class="hljs-title function_">lastIndexOf</span>(<span class="hljs-string">"."</span>) - <span class="hljs-number">1</span>) >>> <span class="hljs-number">0</span>) + <span class="hljs-number">2</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    117.防抖 节流？</p> <p>    <span style="color:#f33b45;"><strong>    防抖：在事件被触发n秒后在执行回调，如果在这n秒内事件又被触发，则重新计时</strong></span></p> <pre data-index="32" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">debounce</span>(<span class="hljs-params">fn,delay</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> timer = <span class="hljs-literal">null</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> that = <span class="hljs-variable language_">this</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        arg = <span class="hljs-variable language_">arguments</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span>(timer){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">clearTimeOut</span>(timer);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        timer = <span class="hljs-literal">null</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    timer = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">setTimeOut</span>(<span class="hljs-function">()=></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        fn.<span class="hljs-title function_">apply</span>(that,arg);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    },delay)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>        <span style="color:#f33b45;"><strong>节流：规定一个时间，在这个时间内，只能有一次触发事件回调函数的执行，如果在同一个时间内某事件被触发多次，只能有一次生效</strong></span></p> <pre data-index="33" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">throttle</span>(<span class="hljs-params">fn,delay</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> preTime = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> nowTime = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> that = <span class="hljs-variable language_">this</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        arg = <span class="hljs-variable language_">arguments</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 如果两次时间间隔超过了指定时间，则执行函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span>(nowTime-preTime >= delay){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        preTime = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        <span class="hljs-keyword">return</span> fn.<span class="hljs-title function_">apply</span>(that,arg)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    118.Object.is() 和 == 和 === 操作符的区别？</p> <p><span style="color:#f33b45;"><strong>        使用双等号判断是否相等时，如果两边的类型不一致，则会进行强制类型转换后在进行比较，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用三等号判断是否相等时，如果两边的类型不一致，不会做强制类型转换，直接返回false，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用Object.is()判断时，一般情况下和使用三等号判断一致，只是新加了一些特殊处理，比如：+0和-0为false，NaN和NaN为true</strong></span></p> <p>    119.Unicode和UTF-8的关系？</p> <p><span style="color:#f33b45;"><strong>        Unicode是一个字符集合，每一个字符对应不同的Unicode编码，它只规定了符号的二进制代码，却没有规定这个二进制代码在计算机中如何传输</strong></span></p> <p><span style="color:#f33b45;"><strong>        UTF-8是一种Unicode的编码格式，可以用1~4个字节表示一个字符</strong></span></p> <p>    120.js事件循环是什么？</p> <p><span style="color:#f33b45;"><strong>        因为JS是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        在执行同步代码的时候，如果遇到了异步事件，js引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈的其他任务。</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个异步事件返回结果后，js会将这个事件加入到与当前执行栈不同的另一个队列，我们称之为任务队列。</strong></span></p> <p><span style="color:#f33b45;"><strong>        被放入事件队列不会立即执行，而是等待当前执行栈中所有的任务都执行完毕，主线程属于闲置状态时，才会去找任务队列是否有任务。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行同步代码。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如此反复，就会形成一个循环，我们称之为事件循环。  </strong></span></p> <p><span style="color:#f33b45;"><strong>        任务队列(异步任务)可以分为宏任务和微任务，同一次事件循环中，微任务永远在宏任务之前执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        比如：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.微任务：new Promise().then() then函数的处理就是一个微任务   new Promise()是同步任务</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.宏任务：setInterval()    setTimeout()</strong></span></p> <p>    121.js中深浅拷贝的实现？</p> <p><span style="color:#f33b45;"><strong>        浅拷贝：</strong></span></p> <pre data-index="34" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">           <span class="hljs-number">1.</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">shallowCopy</span>(<span class="hljs-params">object</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 只拷贝对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(!object || <span class="hljs-keyword">typeof</span> object !== <span class="hljs-string">'object'</span>) <span class="hljs-keyword">return</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 根据 object 的类型判断是新建一个数组还是对象</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> newObject = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(object) ? [] : {};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> object){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span>(object.<span class="hljs-title function_">hasOwnProperty</span>(key)){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        newObject[key] = object[key];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> newObject;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">          <span class="hljs-number">2.</span> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">shallowCopy</span>(<span class="hljs-params">object</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>({},object);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#f33b45;"><strong>    深拷贝：</strong></span></p> <pre data-index="35" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:928px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">deepCopy</span>(<span class="hljs-params">object</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(!object || <span class="hljs-keyword">typeof</span> object !== <span class="hljs-string">'object'</span>) <span class="hljs-keyword">return</span> ;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span> = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(object) ? [] : {};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> objcet){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span>(object.<span class="hljs-title function_">hasOwnProperty</span>(key)){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        newObject[key] = <span class="hljs-keyword">typeof</span> object[key] === <span class="hljs-string">'object'</span> ? <span class="hljs-title function_">deepCopy</span>(object[key]) : object[key];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> newObject;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    122.手写call、apply及bind函数？</p> <pre data-index="36" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">call</span>: <span class="hljs-title class_">Function</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">myCall</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">context</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-variable language_">this</span> != <span class="hljs-string">'function'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeError</span>(<span class="hljs-string">'type error'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">let</span> arg = [...<span class="hljs-variable language_">arguments</span>].<span class="hljs-title function_">slice</span>(<span class="hljs-number">1</span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    result = <span class="hljs-literal">null</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                context = context || <span class="hljs-variable language_">window</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                context.<span class="hljs-property">fn</span> = <span class="hljs-variable language_">this</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                result = context.<span class="hljs-title function_">fn</span>(...arg)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">delete</span> context.<span class="hljs-property">fn</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> result</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">              }  </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">apply</span>: <span class="hljs-title class_">Function</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">myApply</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">context</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-variable language_">this</span> !== <span class="hljs-string">'function'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeError</span>(<span class="hljs-string">'type error'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  }  </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  <span class="hljs-keyword">let</span> result = <span class="hljs-literal">null</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  context = context || <span class="hljs-variable language_">window</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  context.<span class="hljs-property">fn</span> = <span class="hljs-variable language_">this</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">1</span>]){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                      result = context.<span class="hljs-title function_">fn</span>(...<span class="hljs-variable language_">arguments</span>[<span class="hljs-number">1</span>])</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  }<span class="hljs-keyword">else</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                      result = context.<span class="hljs-title function_">fn</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  <span class="hljs-keyword">delete</span> context.<span class="hljs-property">fn</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                  <span class="hljs-keyword">return</span> result</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">               }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">bind</span>: <span class="hljs-title class_">Function</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">myBind</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">context</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> <span class="hljs-variable language_">this</span> !== <span class="hljs-string">'function'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="58"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="59"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">TypeError</span>(<span class="hljs-string">'error'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="60"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="61"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="62"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="63"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">let</span> arg = [...<span class="hljs-variable language_">arguments</span>].<span class="hljs-title function_">slice</span>(<span class="hljs-number">1</span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="64"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="65"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    fn = <span class="hljs-variable language_">this</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="66"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="67"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Fn</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="68"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="69"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">return</span> fn.<span class="hljs-title function_">apply</span>(</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="70"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="71"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        <span class="hljs-variable language_">this</span> <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">Fn</span> ? <span class="hljs-variable language_">this</span> : context,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="72"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="73"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        arg.<span class="hljs-title function_">concat</span>(...<span class="hljs-variable language_">arguments</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="74"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="75"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    )</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="76"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="77"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="78"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="79"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">              } </div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    123.函数柯里化的实现？       编写一个sum函数，实现如下功能： console.log(sum(1)(2)(3))      // 6</p> <p>       <span style="color:#f33b45;"><strong> 函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术</strong></span></p> <pre data-index="37" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:852px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">curry</span>(<span class="hljs-params">fn, ...args</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> fn.<span class="hljs-property">length</span> > args.<span class="hljs-property">length</span> ? <span class="hljs-function">(<span class="hljs-params">...args2</span>) =></span> <span class="hljs-title function_">curry</span>(fn, ...args, ...args2) : <span class="hljs-title function_">fn</span>(...args)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">fn</span>(<span class="hljs-params">a, b, c</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a + b + c )</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        sum = <span class="hljs-title function_">curry</span>(fn)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-title function_">sum</span>(<span class="hljs-number">1</span>)(<span class="hljs-number">2</span>)(<span class="hljs-number">3</span>) <span class="hljs-comment">// 6    </span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p></p> <p>    124. toPrecision和toFixed和Math.round的区别？</p> <p><span style="color:#f33b45;"><strong>        163.65.toPrecision(4)       =>  163.7</strong></span></p> <p><span style="color:#f33b45;"><strong>        163.65.toFixed(2)           =>  163.7</strong></span></p> <p><span style="color:#f33b45;"><strong>        Math.round(163.65)          =>  164</strong></span></p> <p><span style="color:#f33b45;"><strong>        toPrecision() 用于处理精度，四舍五入，从左至右第一个不为0的数开始计算 </strong></span></p> <p><span style="color:#f33b45;"><strong>        toFixed()   小数点后指定位数取整，从小数点开始计起（四舍五入）</strong></span></p> <p><span style="color:#f33b45;"><strong>        Math.round() 四舍五入取整</strong></span></p> <p>    125.什么是xss攻击？如何防范</p> <p><span style="color:#f33b45;"><strong>        xss攻击指的是跨站脚本攻击，是一种代码注入攻击。XSS的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合，导致浏览器没有办法辨别哪些脚本是可信的，从而导致了恶意代码的执行。</strong></span></p> <p><span style="color:#f33b45;"><strong>        xss一般分为存储型、反射型、DOM型。</strong></span></p> <p><span style="color:#f33b45;"><strong>        存储型：恶意代码提交到了网站的数据库中，当用户请求数据的时候，服务器将其拼接为HTML后返回给了用户，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        反射型：攻击者构建了特殊的URL，当服务器接收到请求后，从URL中读取数据，拼接到HTML后返回，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        DOM型：攻击者构建了特殊的URL，用户打开网站后，js脚本从url中获取数据，从而导致恶意代码的执行</strong></span></p> <p><span style="color:#f33b45;"><strong>        XSS攻击的防范可以从两个方面入手，一个是恶意代码提交的时候，一个是浏览器执行恶意代码的时候。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于第一个方面，由于我们没有办法判断数据最后的使用场景，所以直接在输入端进行恶意代码的处理其实是不可靠的。</strong></span></p> <p><span style="color:#f33b45;"><strong>        因此我们可以从浏览器的执行来进行防御：一种是使用纯前端的方式，不用服务器拼接后返回。另一种是对需要插入到HTML中的代码做好充分的转义。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对于DOM型的攻击，主要是前端脚本的不可靠造成的，我们对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。</strong></span></p> <p><span style="color:#f33b45;"><strong>        还有一些方式，比如CSP(告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击)。</strong></span></p> <p><span style="color:#f33b45;"><strong>        还可以对一些敏感信息进行保护，比如cookie使用http-only，使得脚本无法获取。</strong></span></p> <p><span style="color:#f33b45;"><strong>        也可以使用验证码，避免脚本伪装成用户执行一些操作。</strong></span></p> <p>    126.什么是CSP？</p> <p>     <span style="color:#f33b45;"><strong>   CSP指的是内容安全策略，它的本质是建立一个白名单，告知浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自身实现。</strong></span></p> <p><span style="color:#f33b45;"><strong>        通常有两种方式来开启CSP，一种是设置HTTP响应头信息Content-Security-Policy,另一种是通过meta标签<meta http-equiv="Content-Security-Policy" content="（配置规则）"></strong></span></p> <p>    127.什么是CSRF攻击？如何防范</p> <p>      <span style="color:#f33b45;"><strong>  CSRF：指的是跨站请求伪造攻击，攻击者诱导用户进入第三方网站，然后该网站向被攻击网站发送跨站请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        CSRF攻击的本质是利用了cookie会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一般的CSRF攻击类型有三种：</strong></span></p> <p><span style="color:#f33b45;"><strong>        1.GET类型的攻击：比如在网站中的一个img标签里构建一个请求，当用户打开网站时就会自动发起提交</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.POST类型的攻击：比如说构建一个隐藏表单，当用户进入时自动提交这个表单</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.链接类型的攻击：比如在a标签的href属性里构建一个请求，然后诱导用户去点击。</strong></span></p> <p><span style="color:#f33b45;"><strong>        防范的方式：在设置cookie属性的时候设置Samesite,限制cookie不能作为第三方使用，从而可以避免被攻击者使用。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Samesite一共有两种模式，一种是严格模式，在严格模式下cookie在任何情况下都不能被第三方cookie使用；</strong></span></p> <p><span style="color:#f33b45;"><strong>        在宽松模式下，cookie可以被会发生页面跳转的get请求使用。</strong></span></p> <p>    128.什么是MVVM？比之MVC有什么区别？</p> <p>       <span style="color:#f33b45;"><strong> MVVM,MVC都是常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。</strong></span></p> <p><span style="color:#f33b45;"><strong>        MVC通过分离Model、View、Controller的方式来组织代码结构。其中View负责页面的显示逻辑，Model负责存储页面的业务数据以及对相应数据的操作；</strong></span></p> <p><span style="color:#f33b45;"><strong>        并且View和Model应用了观察者模式，当Model层发生改变的时候会通知有关的View层更新界面；Controller是Model层和View层的纽带，它主要负责用户与应用的响应操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        MVVM中的VM指的是ViewModel通过双向的数据绑定将View层和Model层自动化同步更新。当 Model 发生变化的时候，ViewModel就会自动更新；ViewModel变化了，View也会更新。</strong></span></p> <p>    129.vue双向数据绑定原理？</p> <p>       <span style="color:#f33b45;"><strong> vue采用数据劫持结合发布者-订阅者模式的方式实现双向数据绑定，通过Object.defineProperty()来劫持各个属性的getter、setter，</strong></span></p> <p><span style="color:#f33b45;"><strong>        在数据变动时发布消息给订阅者，触发相应的监听回调，重新渲染视图。</strong></span></p> <p></p> <p>    130.介绍一下Object.defineProperty()</p> <p>      <span style="color:#f33b45;"><strong>  Object.defineProperty() 作用：创建一个对象，该方法接收三个参数，第一个参数为对象名称，第二个参数为对象中的属性名称，第三个参数是该属性的描述符。</strong></span></p> <p><span style="color:#f33b45;"><strong>        一个属性的描述符有四个属性，分别是 value(属性的值)  writable(是否可重写)   enumerable(是否可枚举/遍历)   configurable(是否可配置)</strong></span></p> <p><span style="color:#f33b45;"><strong>        还有get和set存取描述符，在给对象设置get和set时，就不能设置属性值value和可读性writable，两者不能共存</strong></span></p> <p><span style="color:#f33b45;"><strong>        通过 Object.defineProperty添加的属性默认是不可修改、不可枚举、不可写的</strong></span></p> <p>    131.使用Object.defineProperty()进行数据劫持有什么缺点？</p> <p>      <span style="color:#f33b45;"><strong>  Object.defineProperty()本身有一定的监控数组下标变化的能力，但是在Vue中，从性能、体验的性价比考虑，尤大大放弃了这个特性。</strong></span></p> <p><span style="color:#f33b45;"><strong>        而是内部更改了原Array的方法 push(),shift(),pop(),unshift()等，通过Vue.$set()的方式改变数组对象。</strong></span></p> <p>    132.什么是Virtual DOM？为什么Virtual DOM比原生DOM快？</p> <p><span style="color:#f33b45;"><strong>        从我的理解来看，Virtual DOM是指生成Virtual DOM树，对比两棵树的差异，更新视图。</strong></span></p> <p><span style="color:#f33b45;"><strong>        其中生成虚拟DOM树围绕着三个部分，分别是：节点类型、节点属性、子节点。</strong></span></p> <p><span style="color:#f33b45;"><strong>        对比两棵树的差异首先需要对树进行遍历，这样每个节点都有一个唯一的标记，通过这个标记和新的树的同一位置的节点进行对比，有差异则保存到一个对象中，</strong></span></p> <p><span style="color:#f33b45;"><strong>        常见的差异有四种，分别是：替换节点、增删节点、修改节点属性、更改文本内容。</strong></span></p> <p><span style="color:#f33b45;"><strong>        更新视图分别对应四种方法：replaceChild() appendChild() removeChild() setAttribute() removeAttribute() textContent/innerText</strong></span></p> <p><span style="color:#f33b45;"><strong>        我认为Virtual DOM这种方法对于我们需要大量的DOM操作的时候，能够很好的提高我们的操作效率，通过在操作前确定需要做的最小修改，尽可能的减少DOM操作带来的重绘和回流的影响。</strong></span></p> <p><span style="color:#f33b45;"><strong>        其实Virtual DOM并不一定比我们真实操作DOM要快，这种方法的目的是为了提高我们开发时的维护性，在任意情况下，都能保证一个尽量小的性能消耗去进行操作。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新，这一点是原生DOM远远无法替代的。</strong></span></p> <p>    133.说说webpack？</p> <p><span style="color:#f33b45;"><strong>        webpack的核心是一个用于现代JavaScript应用程序的静态模块绑定器。当webpack处理应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个包。</strong></span></p> <p><span style="color:#f33b45;"><strong>        webPack有四个主要的核心概念（Entry、Output、Loader、Plugins）入口、出口、加载器、插件</strong></span></p> <p><span style="color:#f33b45;"><strong>        Entry：是webpack的入口起点，它指示webpack应该从哪个模块开始着手，来构建内部依赖图的开始。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Output：打包文件的目录名称，告诉webpack在哪里输出它所创建的打包文件 默认位置为./dist</strong></span></p> <p><span style="color:#f33b45;"><strong>        Loader:可以理解为webpack的加载编译器，它使得webpack可以处理一些非JavaScript的文件。在对loader进行配置的时候，</strong></span></p> <p><span style="color:#f33b45;"><strong>            test属性标志着有哪些后缀的文件应该被处理，是一个正则表达式；use属性指定test类型的文件应该用哪个loader进行预处理</strong></span></p> <p><span style="color:#f33b45;"><strong>            常用的loader有 style-loader   css-loader等</strong></span></p> <p><span style="color:#f33b45;"><strong>        Plugins:用于执行范围更广的任务，包括打包、优化、压缩、搭建服务器等等，要使用一个插件，一般是先使用npm包管理器进行安装，然后在配置中引入，</strong></span></p> <p><span style="color:#f33b45;"><strong>            最后将其实例化后传递给plugins数组属性中。常用的plugins有  htmlWebpackPlugin（生成HTML） 、 uglifyjsWebpackPlugin（删除注释压缩） 等等</strong></span></p> <p>    134.clientWidth/Height 和 offsetWidth/Height 和 scrollWidth/Height 的区别？</p> <p><span style="color:#f33b45;"><strong>        clientWidth/Height:返回的是元素内部的宽度/高度，它只包含content+padding，不包含滚动条的宽高。</strong></span></p> <p><span style="color:#f33b45;"><strong>        clientLeft/Top : 返回的是左边框/上边框的宽度。</strong></span></p> <p><span style="color:#f33b45;"><strong>        offsetWidth/Height:返回的是元素的布局宽度/高度，它包含content+padding+border，包含了滚动条的宽高。</strong></span></p> <p><span style="color:#f33b45;"><strong>        offsetLeft/Top : 返回的是当前元素相对于其offsetParent元素 左侧/顶部 的距离。</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollWidth/Height: 返回值包含content+padding+溢出内容的尺寸。</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollTop : 返回的是一个元素的内容垂直滚动的距离</strong></span></p> <p><span style="color:#f33b45;"><strong>        scrollLeft : 返回的是元素滚动条到元素左边的距离</strong></span></p> <p>    135.异步编程的实现方式？</p> <p></p> <p>    136.js和css的动画有啥区别？分别实现方式？</p> <p><span style="color:#f33b45;"><strong>        css动画的优点：在性能上会稍微好一些，浏览器会对css3的动画做一些优化，代码也相对简单；缺点就是在动画控制上不够灵活，兼容性不好。</strong></span></p> <p><span style="color:#f33b45;"><strong>        js动画正好弥补了这两个缺点，控制能力强，可以单帧的控制，变换，同时还可以兼容，并且功能强大。对于一些复杂的动画，使用js会比较靠谱，</strong></span></p> <p><span style="color:#f33b45;"><strong>        而实现一些小的交互动效的时候就用css好。</strong></span></p> <p><span style="color:#f33b45;"><strong>        css：</strong></span></p> <p><span style="color:#f33b45;"><strong>            @keyframes 动画名称{<!-- --></strong></span></p> <p><span style="color:#f33b45;"><strong>                from / 0% {}</strong></span></p> <p><span style="color:#f33b45;"><strong>                to / 100% {}</strong></span></p> <p><span style="color:#f33b45;"><strong>            }</strong></span></p> <p><span style="color:#f33b45;"><strong>            animation: 动画名称 动画所需时间  动画速度曲线  延迟时间  播放的次数  是否轮流反向播放</strong></span></p> <p><span style="color:#f33b45;"><strong>        js:</strong></span></p> <p><span style="color:#f33b45;"><strong>            1. 利用setTimeout 定时器的方式实现</strong></span></p> <p><span style="color:#f33b45;"><strong>            2. 利用setInterval 定时器的方式实现</strong></span></p> <p><span style="color:#f33b45;"><strong>            3. 利用requestAnimationFrame() 方法实现，将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。性能上比上两种方式要好</strong></span></p> <p><span style="color:#f33b45;"><strong>            4. 利用 canvas 画布实现</strong></span></p> <p>    137.get和post请求在缓存方面的区别？</p> <p><span style="color:#f33b45;"><strong>        缓存一般只适用于不会修改服务器数据的请求，一般get请求都是查找请求，不会对服务器资源数据造成修改，而post请求一般都会对服务器数据进行修改，</strong></span></p> <p><span style="color:#f33b45;"><strong>        所以，一般会对get请求进行缓存，很少会对post请求进行缓存。</strong></span></p> <p>    138.图片懒加载和预加载？</p> <p><span style="color:#f33b45;"><strong>        懒加载：也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户去访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户体验，并且减少服务器压力；</strong></span></p> <p><span style="color:#f33b45;"><strong>            它适用于图片很多，页面很长的一些网站场景；懒加载的实现原理是将img标签中的src属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，</strong></span></p> <p><span style="color:#f33b45;"><strong>            进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值到src属性中，以此来实现图片懒加载。</strong></span></p> <p><span style="color:#f33b45;"><strong>        预加载：指的是将所需要的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存中取资源。通过预加载能够减少用户的等待时间，提高用户体验。</strong></span></p> <p><span style="color:#f33b45;"><strong>            我了解到的预加载最常见的方式是通过js中的image对象，通过为image对象设置src属性，来实现图片的预加载。</strong></span></p> <p><span style="color:#f33b45;"><strong>        这两种方式都是提高网页性能的方式，两者主要的区别在于一个是提前加载，一个是延迟加载甚至不加载。懒加载对服务器有一定的缓解压力的作用，预加载则会加重服务器前端压力</strong></span></p> <p>    139.mouseover和mouseenter的区别？</p> <p>     <span style="color:#f33b45;"><strong>   当鼠标移动到元素中就会触发mouseenter事件，类似mouseover，他们之间的区别在于mouseenter不会冒泡，也就是说只执行一次，而mouseover则会触发多次事件回调。</strong></span></p> <p>    140.js拖拽功能的实现？  </p> <p><span style="color:#f33b45;"><strong>        一个元素的拖拽过程，可以分为三个步骤：第一步是鼠标按下目标元素，第二部是鼠标保持按下的状态移动鼠标，第三步是鼠标抬起，拖拽过程结束。</strong></span></p> <p><span style="color:#f33b45;"><strong>        这三个步骤分别对应3个事件，mousedown,mousemove,mouseup,只有在鼠标按下的状态鼠标移动我们才会执行拖拽事件，因此我们需要在mousedown事件中</strong></span></p> <p><span style="color:#f33b45;"><strong>        设置一个状态来标识鼠标已经按下，然后在mouseup事件中取消这个状态。在mousedown事件中我们首先要判断，目标元素是不是为拖拽元素，如果是拖拽元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>        我们就设置状态保存这个时候鼠标的位置，然后在mousemove事件中，我们通过鼠标现在的位置和以前的位置的相对移动，来确定拖拽元素在移动中的坐标，</strong></span></p> <p><span style="color:#f33b45;"><strong>        最后mouseup事件触发后，清除状态，结束拖拽事件。</strong></span></p> <pre data-index="38" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:1373px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        #drag {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            position: absolute;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            width: 200px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            height: 200px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            background-color: green;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            left: 100px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            top: 100px;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            cursor: move;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"drag"</span>></span>*******<span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> drag = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'drag'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            drag.<span class="hljs-property">onmousedown</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> event = e || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    dragX = e.<span class="hljs-property">clientX</span> - drag.<span class="hljs-property">offsetLeft</span>,    <span class="hljs-comment">//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    dragY = e.<span class="hljs-property">clientY</span> - drag.<span class="hljs-property">offsetTop</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span> (drag.<span class="hljs-property">setCapture</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    drag.<span class="hljs-title function_">setCapture</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> event = e || <span class="hljs-variable language_">window</span>.<span class="hljs-property">event</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> left = e.<span class="hljs-property">clientX</span> - dragX,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        top = e.<span class="hljs-property">clientY</span> - dragY;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (left < <span class="hljs-number">0</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        left = <span class="hljs-number">0</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (left > <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerWidth</span> - drag.<span class="hljs-property">offsetWidth</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        left = <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerWidth</span> - drag.<span class="hljs-property">offsetWidth</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (top < <span class="hljs-number">0</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="58"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="59"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        top = <span class="hljs-number">0</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="60"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="61"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (top > <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span> - drag.<span class="hljs-property">offsetHeight</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="62"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="63"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        top = <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span> - drag.<span class="hljs-property">offsetHeight</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="64"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="65"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="66"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="67"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    drag.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = left + <span class="hljs-string">'px'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="68"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="69"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    drag.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = top + <span class="hljs-string">'px'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="70"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="71"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="72"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="73"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmouseup</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="74"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="75"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-variable language_">this</span>.<span class="hljs-property">onmousedown</span> = <span class="hljs-literal">null</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="76"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="77"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-variable language_">this</span>.<span class="hljs-property">onmousemove</span> = <span class="hljs-literal">null</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="78"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="79"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (drag.<span class="hljs-property">releaseCapture</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="80"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="81"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        drag.<span class="hljs-title function_">releaseCapture</span>()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="82"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="83"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="84"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="85"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="86"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="87"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="88"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="89"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    141.let和const的注意点？</p> <p><span style="color:#f33b45;"><strong>        let: 1.不存在变量声明提升</strong></span></p> <p><span style="color:#f33b45;"><strong>             2.存在暂时性死区（只要块级作用域内存在let命令，它所声明的变量就绑定了这个区域，不再受外界影响）</strong></span></p> <p><span style="color:#f33b45;"><strong>             3.不允许重复声明</strong></span></p> <p><span style="color:#f33b45;"><strong>        const: 1.声明常量必须赋值，否则报错</strong></span></p> <p><span style="color:#f33b45;"><strong>               2.也存在暂时性死区（只能在声明的位置后面使用。）</strong></span></p> <p><span style="color:#f33b45;"><strong>               3.不允许重复声明，不存在声明提升</strong></span></p> <p><span style="color:#f33b45;"><strong>               4.常量不允许被修改，（只针对于基本数据类型，引用数据类型除外）</strong></span></p> <p>    142.Set和WeakSet？</p> <p><span style="color:#f33b45;"><strong>        ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值，(一般用来做数组去重)。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakSet和Set类似，也是不重复值得集合，但是WeakSet的成员只能是对象，不能是其他类型的值。WeakSet不能遍历</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakSet的对象都是弱引用，因此适合临时存放一组对象以及存放跟对象绑定的信息，只要这些对象在外部消失，它在WeakSet的引用也会消失。</strong></span></p> <p>    143.Map和WeakMap？</p> <p><span style="color:#f33b45;"><strong>        Map数据结构类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakMap类似于Map，也是键值对的集合，但是键只能是对象（null除外），不接受其他类型的值作为键名。</strong></span></p> <p><span style="color:#f33b45;"><strong>        WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。</strong></span></p> <p>    144.什么是Proxy？</p> <p><span style="color:#f33b45;"><strong>        Proxy用来修改某些操作的默认行为，等同于在语言层面上进行修改，所以属于一种“元编程”，即对编程语言进行编程。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Proxy可以理解成，在目标对象之前架设一层拦截，外界对这个对象的访问都必须先通过这层拦截，因此提供了一层机制，</strong></span></p> <p><span style="color:#f33b45;"><strong>        可以对外界的访问进行过滤和改写。</strong></span></p> <p>    145.什么是Promise对象？ 什么是Promise/A+规范 ？</p> <p><span style="color:#f33b45;"><strong>        Promise对象是异步编程的一种解决方案；Promise/A+规范是javascript Promise的标准，规定了一个Promise所必须具有的特性。</strong></span></p> <p><span style="color:#f33b45;"><strong>        Promise是一个构造函数，接收一个函数作为参数，返回一个Promise实例。一个Promise实例有三种状态，分别是：pending、resolved、rejected，</strong></span></p> <p><span style="color:#f33b45;"><strong>        分别代表了进行中、已成功、已失败。实例的状态只能由pending转变为resolved或者rejected状态，并且状态一经改变，就无法在被更改了。</strong></span></p> <p><span style="color:#f33b45;"><strong>        状态的改变是由resolve()和reject()函数来实现的。我们可以在异步操作结束后调用这两个函数改变Promise实例的状态，它的原型上定义了一个then方法，</strong></span></p> <p><span style="color:#f33b45;"><strong>        使用这个then方法可以为两个状态的改变注册回调函数，这个回调函数属于微任务，会在本轮事件循环的末尾进行。</strong></span></p> <p>    146.手写一个Promise</p> <p></p> <p>    147.怎么做JS代码的error统计？</p> <p>       <span style="color:#f33b45;"><strong> 通过window.onerror事件进行统计，需要放在所有js脚本前执行</strong></span></p> <p>    148.Vue的生命周期是什么？ 有哪些阶段？</p> <p><span style="color:#f33b45;"><strong>        Vue的生命周期指的是组件从创建到销毁的一系列过程，称之为Vue生命周期。有8个阶段（创建前，创建后，加载前，加载后，更新前，更新后，销毁前，销毁后）</strong></span></p> <p><span style="color:#f33b45;"><strong>        每个阶段都对应了一个生命周期的钩子函数。</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeCreate    组件创建前</strong></span></p> <p><span style="color:#f33b45;"><strong>        created         组件已创建（此时已经可以拿到data中的数据了）</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeMount     虚拟DOM渲染前</strong></span></p> <p><span style="color:#f33b45;"><strong>        mounted         虚拟DOM已渲染</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeUpdate    数据更新时调用（适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器）   </strong></span></p> <p><span style="color:#f33b45;"><strong>        updated         数据更改导致DOM重新渲染后调用（一般不在这里做什么操作而是用watch或computed）</strong></span></p> <p><span style="color:#f33b45;"><strong>        beforeDestroy   实例销毁前（一般会在这里销毁定时器，解绑全局事件）</strong></span></p> <p><span style="color:#f33b45;"><strong>        destroyed       实例销毁后，Vue实例中所有的东西都会被移除</strong></span></p> <p><span style="color:#f33b45;"><strong>        处于 keep-alive 缓存的组件还有两个生命周期并且不会被销毁而是执行了这两个生命周期，activated和deactivated，分别代表 缓存的组件被激活、缓存的组件被停用</strong></span></p> <p>    149.Vue组件间的传递方式？</p> <p><span style="color:#f33b45;"><strong>        父子组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.子组件通过props属性来接收父组件的数据；然后父组件在子组件上注册监听事件，子组件通过$emit触发事件来向父组件发送数据</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过ref属性给子组件设置一个名字，父组件通过$refs组件名来获得子组件；子组件可以通过$parent来获得父组件</strong></span></p> <p><span style="color:#f33b45;"><strong>            3.使用provider/inject，在父组件中通过provider提供变量，在子组件中通过inject来将变量注入到组件中。无论子组件有多深，只要调用了inject就可以注入provider中的数据</strong></span></p> <p><span style="color:#f33b45;"><strong>        兄弟组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            1.通过EventBus的方式，本质就是创建一个空的Vue实例来作为消息传递的对象，通过在这个实例上监听$on和触发$emit事件，来实现消息的传递</strong></span></p> <p><span style="color:#f33b45;"><strong>            2.通过$parent.$refs来获取兄弟组件进行通信</strong></span></p> <p><span style="color:#f33b45;"><strong>        任意组件间通信：</strong></span></p> <p><span style="color:#f33b45;"><strong>            业务不复杂的情况下也可以使用EventBus的方式，不然就用Vuex</strong></span></p> <p>    150.computed和watch的差异？</p> <p><span style="color:#f33b45;"><strong>        1.computed是计算一个新的属性，并将该属性挂载到Vue实例上；而watch是监听已经存在并挂载到Vue实例上的数据，所以用watch同样可以监听computed计算属性的变化</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.computed本质是一个惰性的观察者，具有缓存性，只有当依赖发生变化后，第一次访问computed属性才会计算新的值；而watch则是当数据发生变化便会调用执行函数，methods也是</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.从使用场景上说，computed适用于一个数据被多个数据影响，watch适用于一个数据影响多个数据</strong></span></p> <p>    151.vue-router中导航钩子函数（导航守卫）</p> <p><span style="color:#f33b45;"><strong>        全局守卫：beforeEach 和 afterEach</strong></span></p> <p><span style="color:#f33b45;"><strong>            beforeEach((to,from,next)=>{})前置守卫： 接收三个参数，to：要进入的路由对象，from：要离开的路由对象，next是一个必须要执行的函数，</strong></span></p> <p><span style="color:#f33b45;"><strong>            该函数（next）如果不传参数，那就执行下一个钩子函数，如果传入false，则终止跳转，如果传入一个路径，则导航到对应的路由，如果传入error，则导航终止，error传入错误的监听函数。</strong></span></p> <p><span style="color:#f33b45;"><strong>            afterEach((to,from)=>{}) 后置守卫： 和前置守卫不同的就是不用传入next</strong></span></p> <p><span style="color:#f33b45;"><strong>        路由独享守卫：beforeEnter</strong></span></p> <p><span style="color:#f33b45;"><strong>            路由配置上进行定义，和beforeEach的方法参数是一样的</strong></span></p> <p><span style="color:#f33b45;"><strong>        组件内守卫：beforeRouteEnter    beforeRouteUpdate   beforeRouteLeave</strong></span></p> <p><span style="color:#f33b45;"><strong>            组件内进行定义，和beforeEach的方法参数是一样的</strong></span></p> <p>    152. $route 和 $router 的区别？</p> <p><span style="color:#f33b45;"><strong>        $route:是路由信息对象，包括path、params、query、hash、name等路由信息参数，</strong></span></p> <p><span style="color:#f33b45;"><strong>        $router:是路由实例对象包括了路由的跳转方法，钩子函数等（push() replace() go() back() ...）</strong></span></p> <p>    153.Vue常用的修饰符？</p> <p><span style="color:#f33b45;"><strong>        事件修饰符：</strong></span></p> <p><span style="color:#f33b45;"><strong>            .stop           阻止冒泡</strong></span></p> <p><span style="color:#f33b45;"><strong>            .prevent        取消默认事件</strong></span></p> <p><span style="color:#f33b45;"><strong>            .capture        使用事件捕获机制</strong></span></p> <p><span style="color:#f33b45;"><strong>            .once           只执行一次</strong></span></p> <p><span style="color:#f33b45;"><strong>            .self           操作当前元素才执行</strong></span></p> <p><span style="color:#f33b45;"><strong>            .native         监听组件根元素事件</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-model修饰符：</strong></span></p> <p><span style="color:#f33b45;"><strong>            .trim           清空两端空字符</strong></span></p> <p><span style="color:#f33b45;"><strong>            .number         转换成数字类型</strong></span></p> <p><span style="color:#f33b45;"><strong>            .lazy           延迟更新，让数据失去焦点时更新</strong></span></p> <p>    154.Vue中key的作用？</p> <p><span style="color:#f33b45;"><strong>        key的作用可以分为两种情况，第一种是v-if中使用key，第二种是v-for中使用key</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-if:由于Vue会尽可能高效的渲染元素，通常是复用已有元素而不是从头开始渲染。因此，当我们使用v-if来实现元素切换的时候，如果切换前后含有相同类型的元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>            那么这个元素就会被复用。如果是相同的input元素，那么切换前后用户的输入不会被清除掉，可以使用key来标识一个唯一元素，这种情况下，使用key的元素不会被复用。</strong></span></p> <p><span style="color:#f33b45;"><strong>            这个时候key的作用是用来标识一个独立的元素。</strong></span></p> <p><span style="color:#f33b45;"><strong>        v-for:用v-for更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处的每个元素，</strong></span></p> <p><span style="color:#f33b45;"><strong>            因此通过为每一个列表项提供一个key值，以便跟踪元素所在的位置，从而高效的实现复用。这个key的作用是为了高效的更新渲染虚拟DOM</strong></span></p> <p>    155.keep-alive组件有什么作用？</p> <p><span style="color:#f33b45;"><strong>        具有缓存组件的作用：如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive组件包裹需要保存的组件。</strong></span></p> <p>    156.Vue中mixin和mixins的区别？</p> <p><span style="color:#f33b45;"><strong>        minxin：用于全局混入，会影响到每个组件实例。</strong></span></p> <p><span style="color:#f33b45;"><strong>        minxins：最常使用的扩展组件的方式了，如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过minxins混入代码，比如返回上一个页面，上拉下拉等操作，</strong></span></p> <p><span style="color:#f33b45;"><strong>        需要注意的是minxins混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项时也会有选择性的进行合并</strong></span></p> <p>    157.开发中几种常用的Content-Type ?</p> <p><span style="color:#f33b45;"><strong>        1. application/x-www-form-urlencoded        原生form表单</strong></span></p> <p><span style="color:#f33b45;"><strong>        2. multipart/form-data                      常见post提交方式 文件上传</strong></span></p> <p><span style="color:#f33b45;"><strong>        3. application/json                         JSON字符串</strong></span></p> <p><span style="color:#f33b45;"><strong>        4. text/xml                                 用来提交xml格式的数据</strong></span></p> <p>    158.如何封装一个javascript的类型判断函数？</p> <p>     </p> <p>    159.如何判断一个对象是否为空对象？</p> <p> <span style="color:#f33b45;"><strong>       Object.keys(o).length === 0</strong></span></p> <p>    160.手写一个jsonp？</p> <pre data-index="39" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:736px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">jsonp</span>(<span class="hljs-params">url, params, callback</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> querystring = url.<span class="hljs-title function_">indexOf</span>(<span class="hljs-string">'?'</span>) === -<span class="hljs-number">1</span> ? <span class="hljs-string">'?'</span> : <span class="hljs-string">'&'</span>   <span class="hljs-comment">// 判断是否含有参数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 添加参数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> k <span class="hljs-keyword">in</span> params) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span> (params.<span class="hljs-title function_">hasOwnProperty</span>(k)) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    querystring += k + <span class="hljs-string">'='</span> + params[k] + <span class="hljs-string">'&'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 处理回调函数名</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> random = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>().<span class="hljs-title function_">toString</span>().<span class="hljs-title function_">replace</span>(<span class="hljs-string">'.'</span>, <span class="hljs-string">''</span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">               callbackName = <span class="hljs-string">"myJsonp"</span> + random;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 添加回调函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            querystring += <span class="hljs-string">'callback='</span> + callbackName</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 构建请求</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> scriptNode = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">"script"</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            scriptNode.<span class="hljs-property">src</span> = url + querystring</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">window</span>[callbackName] = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 调用回调函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-title function_">callback</span>(...<span class="hljs-variable language_">arguments</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 删除这个引入的脚本</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">'head'</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">removeChild</span>(scriptNode)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 发起请求</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">           <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">'head'</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">appendChild</span>(scriptNode)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    161.手写一个观察者模式？</p> <pre data-index="40" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">var</span> events = (<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">var</span> topics = {};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 注册监听函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">subscribe</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">topic, handler</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (!topics.<span class="hljs-title function_">hasOwnProperty</span>(topic)) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        topics[topic] = [];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    topics[topic].<span class="hljs-title function_">push</span>(handler);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 发布事件，触发观察者回调事件</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">publish</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">topic, info</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (topics.<span class="hljs-title function_">hasOwnProperty</span>(topic)) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        topics[topic].<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">handler</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                            <span class="hljs-title function_">handler</span>(info);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        });</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 移除主题的一个观察者的回调事件</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">remove</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">topic, handler</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (!topics.<span class="hljs-title function_">hasOwnProperty</span>(topic)) <span class="hljs-keyword">return</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">var</span> handlerIndex = -<span class="hljs-number">1</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    topics[topic].<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">item, index</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        <span class="hljs-keyword">if</span> (item === handler) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                            handlerIndex = index;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    });</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (handlerIndex >= <span class="hljs-number">0</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        topics[topic].<span class="hljs-title function_">splice</span>(handlerIndex, <span class="hljs-number">1</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment">// 移除主题的所有观察者的回调事件</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">removeAll</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">topic</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (topics.<span class="hljs-title function_">hasOwnProperty</span>(topic)) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        topics[topic] = [];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            };</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        })();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">//主题监听函数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">var</span> handler = <span class="hljs-keyword">function</span> (<span class="hljs-params">info</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(info);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">//订阅hello主题</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        events.<span class="hljs-title function_">subscribe</span>(<span class="hljs-string">'hello'</span>, handler);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-comment">//发布hello主题</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        events.<span class="hljs-title function_">publish</span>(<span class="hljs-string">'hello'</span>, <span class="hljs-string">'hello world'</span>);</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    162.js命名规则？</p> <p>        <span style="color:#f33b45;"><strong>开头字符必须是字母、下划线或 $符号, 余下的字符可以是下划线、$、或任意字母或数字字符 </strong></span></p> <p>    163.Object.assign()</p> <p>       <span style="color:#f33b45;"><strong>Object.assign(target,source1,source2...) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象 (浅拷贝)</strong></span></p> <p>    164.Math.ceil() 和 Math.floor()</p> <p>       <span style="color:#f33b45;"><strong> Math.ceil()：向上取整      Math.floor()：向下取整</strong></span></p> <p>    165.如何查找一篇英文文章出现频率最高的单词？</p> <pre data-index="41" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:957px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">findMostWord</span>(<span class="hljs-params">article</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span> (!article) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            article = article.<span class="hljs-title function_">trim</span>().<span class="hljs-title function_">toLowerCase</span>()      <span class="hljs-comment">// 清除两端空字符串并转为小写</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> wordlist = article.<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/[a-z]+/g</span>),   <span class="hljs-comment">// 将文章中的每个单词转换成数组中的每一项元素</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                visited = [],</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                maxNum = <span class="hljs-number">0</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                maxWord = <span class="hljs-string">''</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            article = <span class="hljs-string">" "</span> + wordlist.<span class="hljs-title function_">join</span>(<span class="hljs-string">" "</span>) + <span class="hljs-string">" "</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 遍历判断单词出现次数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            wordlist.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span> (visited.<span class="hljs-title function_">indexOf</span>(item) === -<span class="hljs-number">1</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    visited.<span class="hljs-title function_">push</span>(item)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">let</span> wrod = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">" "</span> + item + <span class="hljs-string">" "</span>, <span class="hljs-string">"g"</span>),       <span class="hljs-comment">// 正则  全局匹配 当前单词                  </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        num = article.<span class="hljs-title function_">match</span>(wrod).<span class="hljs-property">length</span>;           <span class="hljs-comment">// 当前单词出现的个数                  </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (num > maxNum) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        maxNum = num</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        maxWord = item</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> maxWord + <span class="hljs-string">" "</span> + maxNum</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    166. 算法知识总结</p> <p>      (1).冒泡排序</p> <p>      (2).选择排序</p> <p>      (3).插入排序</p> <p>      (4).希尔排序</p> <p>      (5).归并排序</p> <p>      (6).快速排序</p> <p>      (7).推排序</p> <p>      (8).基数排序</p> <p></p> <p>      <span style="color:#f33b45;"><strong>动态规划 爬楼梯问题->（有一座高度是10级台阶的楼梯，从下往上走，每跨一步只能向上1级或者2级台阶。要求用程序来求出一共有多少种走法？）</strong></span></p> <pre data-index="42" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">getClimbingWays</span>(<span class="hljs-params">n</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(n<<span class="hljs-number">1</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(n===<span class="hljs-number">1</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(n===<span class="hljs-number">2</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">2</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            lat a = <span class="hljs-number">1</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                b = <span class="hljs-number">2</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                temp = <span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">3</span>;i<=n;i++){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                temp = a + b;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                a = b;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                b = temp;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> temp;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    167.js实现一个函数，完成超过范围的两个大整数相加功能</p> <pre data-index="43" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:751px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">bigNumberAdd</span>(<span class="hljs-params">str1, str2</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> result = <span class="hljs-string">""</span>, <span class="hljs-comment">// 保存最后结果</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            carry = <span class="hljs-literal">false</span>; <span class="hljs-comment">// 保留进位结果</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 将字符串转换为数组</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            str1 = str1.<span class="hljs-title function_">split</span>(<span class="hljs-string">""</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            str2 = str2.<span class="hljs-title function_">split</span>(<span class="hljs-string">""</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 当数组的长度都变为 0，并且最终不再进位时，结束循环</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">while</span> (str1.<span class="hljs-property">length</span> || str2.<span class="hljs-property">length</span> || carry) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 每次将最后的数字进行相加，使用~~的好处是，即使返回值为 undefined 也能转换为 0</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            carry += ~~str1.<span class="hljs-title function_">pop</span>() + ~~str2.<span class="hljs-title function_">pop</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 取加法结果的个位加入最终结果</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            result = carry % <span class="hljs-number">10</span> + result;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 判断是否需要进位，true 和 false 的值在加法中会被转换为 1 和 0</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            carry = carry > <span class="hljs-number">9</span>; }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-comment">// 返回最终结果</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> result;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    168.JS如何实现数组扁平化（将一个多维数组变成一个一维数组）  [1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]</p> <pre data-index="44" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">flattenArray</span>(<span class="hljs-params">array</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span>(!<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(array)) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> result  = []</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            result =  array.<span class="hljs-title function_">reduce</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">prev,cur</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> prev.<span class="hljs-title function_">concat</span>(<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(cur)? <span class="hljs-title function_">flattenArray</span>(cur) : cur)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            },[])</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> result;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    169.JS实现数组去重？</p> <pre data-index="45" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">unique</span>(<span class="hljs-params">arr</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">if</span> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">hasOwnProperty</span>(<span class="hljs-string">'from'</span>)) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>(arr));</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            } <span class="hljs-keyword">else</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> n = {}, r = [];</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < arr.<span class="hljs-property">length</span>; i++) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-keyword">if</span> (!n[arr[i]]) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        n[arr[i]] = <span class="hljs-literal">true</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                        r.<span class="hljs-title function_">push</span>(arr[i]);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> r;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    170.求数组的最大值 和 最小值？</p> <pre data-index="46" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">arrayMax</span>(<span class="hljs-params">arr</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> <span class="hljs-title class_">Math</span>.<span class="hljs-property">max</span>.<span class="hljs-title function_">apply</span>(<span class="hljs-literal">null</span>,arr)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">arrayMin</span>(<span class="hljs-params">arr</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> <span class="hljs-title class_">Math</span>.<span class="hljs-property">min</span>.<span class="hljs-title function_">apply</span>(<span class="hljs-literal">null</span>,arr)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    171.如何求两个数的最大公约数？   最小公倍数？</p> <p>       <span style="color:#f33b45;"><strong> 最大公约数： 用大的数去除以小的那个数，然后再用小的数去除以的得到的余数，一直这样递归下去，直到余数为 0 时，最后的被除数就是两个数的最大公约数</strong></span></p> <pre data-index="47" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">getMaxCommonDivisor</span>(<span class="hljs-params">a, b</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">if</span> (b === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> a;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> <span class="hljs-title function_">getMaxCommonDivisor</span>(b, a % b);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>  <span style="color:#f33b45;"><strong>      最小公倍数：将两个数相乘，然后除以它们的最大公约数</strong></span></p> <pre data-index="48" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">getMinCommonMultiple</span>(<span class="hljs-params">a, b</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">return</span> a * b / <span class="hljs-title function_">getMaxCommonDivisor</span>(a, b);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    172.判断一个字符串是否为回文字符串？</p> <pre data-index="49" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:746px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">isPalindrome</span>(<span class="hljs-params">str</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">let</span> reg = <span class="hljs-regexp">/[\W_]/g</span>,         <span class="hljs-comment">// 匹配所有非单词的字符及下划线</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            newStr = str.<span class="hljs-title function_">replace</span>(reg,<span class="hljs-string">""</span>).<span class="hljs-title function_">toLowerCase</span>()      <span class="hljs-comment">// 替换为空字符并转为小写字母</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            reverseStr = newStr.<span class="hljs-title function_">split</span>(<span class="hljs-string">""</span>).<span class="hljs-title function_">reverse</span>().<span class="hljs-title function_">join</span>(<span class="hljs-string">""</span>)    <span class="hljs-comment">// 将字符串反转</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword">return</span> reverseStr === newStr;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        }</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>    173.状态码？</p> <p><span style="color:#f33b45;"><strong>        1xx ： 代表服务器接收到请求     </strong></span></p> <p><span style="color:#f33b45;"><strong>        2xx ： 代表成功         200：成功       </strong></span></p> <p><span style="color:#f33b45;"><strong>        3xx :  代表重定向       301：永久性重定向       302：临时性重定向       304：所请求的资源未修改</strong></span></p> <p><span style="color:#f33b45;"><strong>        4xx ： 代表客户端错误   400：客户端请求语法错误     404：请求资源不存在</strong></span></p> <p><span style="color:#f33b45;"><strong>        5xx :  代表服务器端错误     500：服务器内部错误</strong></span></p> <p>    174.post 和 get 请求的区别？</p> <p><span style="color:#f33b45;"><strong>        post和get都是http请求的两种方法</strong></span></p> <p><span style="color:#f33b45;"><strong>        get请求一般用于不会对服务器资源产生影响的场景，浏览器一般会对get请求缓存，get请求的url会被保存在历史记录中，不太安全，并且浏览器对url有一个长度的限制，所以会影响get请求发送数据时的长度。</strong></span></p> <p><span style="color:#f33b45;"><strong>        post请求一般用于会对服务器资源产出影响的场景，浏览器很少会对post请求缓存，post请求相对安全，请求参数支持更多的数据类型。</strong></span></p> <p>    175.当你在浏览器中输入Google.com并且按下回车之后发生了什么？</p> <p>       <span style="color:#f33b45;"><strong> 1.首先会对url进行解析，分析所需要使用的传输协议和请求的资源路径，如果输入的url中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。</strong></span></p> <p><span style="color:#f33b45;"><strong>            如果没有问题，浏览器会检测url中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一个过程</strong></span></p> <p><span style="color:#f33b45;"><strong>        2.浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并没有失效，那么就直接使用，否则向服务器发起新的请求。</strong></span></p> <p><span style="color:#f33b45;"><strong>        3.下面是TCP建立连接的三次握手的过程，首先是客户端向服务器发送一个连接请求，服务端接收到请求后向客户端发送一个应答，客户端收到应答后也向服务器发送了一个应答，此时双方的连接就建立起来了。</strong></span></p> <p><span style="color:#f33b45;"><strong>        4.当页面请求发送到服务器端后，服务器会返回一个html文件作为响应，浏览器接收到响应后，开始对html进行解析，开始页面的渲染过程。</strong></span></p> <p><span style="color:#f33b45;"><strong>        5.浏览器首先会对html文件构建DOM树，根据解析到的css构建CSSOM树，如果遇到script标签，则判断是否含有defer或async属性，要不然script脚本的加载和执行会造成页面渲染的阻塞，</strong></span></p> <p><span style="color:#f33b45;"><strong>            当DOM树和CSSOM树建立好后，根据它们来建构渲染树，渲染树构建好后，会根据渲染树来进行布局，布局完成后，浏览器对页面进行绘制，这个时候整个页面就出来了</strong></span></p> <p>    176.http中的OPTIONS请求方法有什么作用？</p> <p><span style="color:#f33b45;"><strong>        OPTIONS会请求服务器返回该资源所支持的所有http请求方法，该方法会用*来代替资源名称向服务器发送OPTIONS请求，可以测试服务器功能是否正常。</strong></span></p> <p><span style="color:#f33b45;"><strong>        JS的XMLHTTPRequest对象进行CORS跨域资源共享时，对于复杂请求，就是使用OPTIONS方法发送预请求，以判断是否有对指定资源的访问权限</strong></span></p> <p>    177.怎么实现多个网站之间共享登录状态？</p> <p><span style="color:#f33b45;"><strong>        在多个网站之间共享登录状态指的就是单点登录。多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。</strong></span></p> <p><span style="color:#f33b45;"><strong>        我认为单点登录可以这样来实现，首先将用户信息的验证中心独立出来，作为一个单独的认证中心，该认证中心的作用是判断客户端发送的账号密码的正确性，</strong></span></p> <p><span style="color:#f33b45;"><strong>        然后向客户端返回对应的用户信息，并且返回一个由服务器端秘钥加密的登录信息的 token 给客户端，该token 具有一定的有效时限。</strong></span></p> <p><span style="color:#f33b45;"><strong>        当一个应用系统跳转到另一个应用系统时，通过 url 参数的方式来传递 token，然后转移到的应用站点发送给认证中心，认证中心对 token 进行解密后验证，</strong></span></p> <p><span style="color:#f33b45;"><strong>        如果用户信息没有失效，则向客户端返回对应的用户信息，如果失效了则将页面重定向会单点登录页面。</strong></span></p> <p></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1550043">Windows家庭版开启远程桌面的方法</a> <br /> <a href="/Article/Index/1356381">java 使用多线程模拟 大气测试数据传感器 和 计算机显示数据</a> <br /> <a href="/Article/Index/955581">GeoServer安装部署</a> <br /> <a href="/Article/Index/1432966">图及谱聚类商圈聚类中的应用</a> <br /> <a href="/Article/Index/645942">【IC刷卡数据专题】IC刷卡数据分析的技术要点</a> <br /> <a href="/Article/Index/1006314">【C语言】详解atoi函数</a> <br /> <a href="/Article/Index/1284262">LIS系统 检验系统源码 检验科LIS系统源码</a> <br /> <a href="/Article/Index/1673595">Docker网络管理：深入理解与最佳实践</a> <br /> <a href="/Article/Index/666000">unity 皮肤材质效果实现分析</a> <br /> <a href="/Article/Index/1076691">一文搞懂——搜索树</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_42661283/article/details/115909331 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>