2018初、中级前端面试题

一、HTML 2、flex-wrap 不换行，换行，换行且第一行在下方 flex-wrap: nowrap | wrap | wrap-reverse; 3、flex-flow 前两项属性简写，默认 row nowrap flex-flow: | ; 4、justify-content: 子元素主轴位置: 左对齐，右对齐，居中，两端对齐，项目两侧距离相 等 justify-content: flex-start | flex-end | center | space-between | space-around; 5、align-items 子元素纵轴对齐：上，下，居中，基线，占满 align-items: flex-start | flex-end | center | baseline | stretch; 6、align-content 带基线对齐（多行的弹性盒模型容器） align-content: flex-start | flex-end | center | space-between | space-around | stretch; flex 元素属性： 1、flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写， 默认值为0 1 auto flex: none | ? | flex-grow：弹性盒的扩展比率弹性盒的扩展比率；flex-shrink：弹性盒的收缩比率弹性盒的收缩比率；flex-basis：弹性弹性 盒伸缩基准值盒伸缩基准值 2、order 属性，默认 0，填写可设置元素顺序 3、align-self 子元素在纵轴方向上的对齐方式 align-self: auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承 父元素的 align-items 属性，如果没有父元素，则等同于 stretch Grid 布局：将页面表示为栅格 display: grid;目前还处于 W3C 的工作草案之中，并且默认情况下，还不被所有的 浏览器所支持。Internet Explorer 10 和 11 已经可以实现支持，但也是利用一种过时的 语法实现的 二列属性，padding 值设 置在主面板) 问题：DOM 元素的书写顺序不得更改。当面板的main内容部分比两边的子面板宽 度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避 免问题。 3、 双飞翼布局(float + 负 margin + margin) 双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼 布局在圣杯布局上做了改进， 在 main 元素上加了一层 div, 并设置 margin,由于 两侧栏的负边距都是相对于 main-wrap 而言，main 的 margin 值变化便不会 影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。（圣杯采用的是 padding， 而双飞翼采用的 margin， 解决了圣杯布局 main 的最小宽度不能小于左侧栏的 缺点） 1.2 BFC BFC 就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己 建立了新的 BFC）。两个相邻的 BFC 之间的距离由 margin 决定。在同一个 BFC 内部，两个垂直方向相邻的块级元素的 margin 会发生“塌陷”。 float 属性不为 none overflow 不为 visible(可以是 hidden、scroll、auto) position 为 absolute 或 fixed display 为 inline-block、table-cell、table-caption BFC 的作用 1. 清除内部浮动 我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高 度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把把父元素变成一 个 BFC 就行了。常用的办法是给父元素设置 overflow:hidden。 2. 垂直 margin 合并 在 CSS 当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合 并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 3. 创建自适应两栏布局 在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。 1.3 居中问题 1、 父元素 inlink-block + text-align子元素水平居中（需要为内联元素） 2、block + margin: 0 auto;水平居中 3、position + margin-left: | margin-top(水平left: 0;top: 0;right: 0;bottom: 0; + margin: auto; 6、diplay：table-cell + vertical-align: middle +text-align: center (元素本身 不得浮动) 7、flexBox 居中 display: flex;justify-content: center;align-items:center; 8、父元素font-size: 0;line-height: height;text-align: center; 子元素 vertical-align: middle;display: inline-block; 1.4session、cookie、sessionStorage、localStorage 等区别 1.4.1 cookie 和 session cookie 和 session 都是用来跟踪浏览器用户身份的会话方式 区别： 1、保持状态：cookie 保存在浏览器端，session 保存在服务器端 2、使用方式： （1）cookie 机制：如果不在浏览器中设置过期时间，cookie 被保存在内存中，生命周期 随浏览器的关闭而结束，这种 cookie 简称会话 cookie。如果在浏览器中设置了 cookie 的 过期时间，cookie 被保存在硬盘中，关闭浏览器后，cookie 数据仍然存在，直到过期时间 结束才消失。 Cookie 是服务器发给客户端的特殊信息，cookie 是以文本的方式保存在客户端，每次 请求时都带上它 （2）session 机制：当服务器收到请求需要创建 session 对象时，首先会检查客户端请求 中是否包含 sessionid。如果有 sessionid，服务器将根据该 id 返回对应 session 对象。如 果客户端请求中没有 sessionid，服务器会创建新的 session 对象，并把 sessionid 在本次 响应中返回给客户端。通常使用 cookie 方式存储 sessionid 到客户端，在交互中浏览器按 照规则将 sessionid 发送给服务器。如果用户禁用 cookie，则要使用 URL 重写，可以通过 response.encodeURL(url) 进行实现； API 对encodeURL的结束为， 当浏览器支持Cookie 时，url 不做任何处理；当浏览器不支持 Cookie 的时候，将会重写 URL 将 SessionID 拼接 到访问地址后。 3、 存储内容： cookie 只能保存字符串类型， 以文本的方式； session 通过类似与 Hashtable 的数据结构来保存，能支持任何类型的对象(session 中可含有多个对象) 4、存储的大小：cookie：单个 cookie 保存的数据不能超过 4kb；session 大小没有限制。 5、安全性：cookie：针对 cookie 所存在的攻击：Cookie 欺骗，Cookie 截获；session 的安全性大于 cookie。 原因如下： （1）sessionID 存储在 cookie 中，若要攻破 session 首先要攻破 cookie； （2）sessionID 是要有人登录，或者启动 session_start 才会有，所以攻破 cookie 也不一 定能得到 sessionID； （3）第二次启动 session_start 后，前一次的 sessionID 就是失效了，session 过期后， sessionID 也随之失效。 （4）sessionID 是加密的 （5）综上所述，攻击者必须在短时间内攻破加密的 sessionID，这很难。 6、应用场景： cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密 码）。如果我们删除 cookie，则每次登录必须从新填写登录的相关信息。 （2）保存上次登录的时间等信息。 （3）保存上次查看的页面 （4）浏览计数 session：Session 用于保存每个用户的专用信息，变量的值保存在服务器端， 通过 SessionID 来区分不同的客户。 （1）网上商城中的购物车 （2）保存用户登录信息 （3）将某些数据放入 session 中，供同一用户的不同页面使用 （4）防止用户非法登录 7、缺点：cookie：（1）大小受限 （2）用户可以操作（禁用）cookie，使功能受限 （3）安全性较低 （4）有些状态不可能保存在客户端。 （5）每次访问都要传送 cookie 给服务器，浪费带宽。 （6）cookie 数据有路径（path）的概念，可以限制 cookie 只属于某个路径下。 session：（1）Session 保存的东西越多，就越占用服务器内存，对 于用户在线人数较多的网站，服务器的内存压力会比较大。 （2）依赖于 cookie（sessionID 保存在 cookie），如果禁 用 cookie，则要使用 URL 重写，不安全 （3）创建 Session 变量有很大的随意性，可随时调用，不需 要开发者做精确地处理，所以，过度使用 session 变量将会导致代码不可读而且 不好维护。 1.4.2 WebStorage WebStorage 的目的是克服由 cookie 所带来的一些限制，当数据需要被严格控 制在客户端时，不需要持续的将数据发回服务器。 WebStorage 两个主要目标：（1）提供一种在 cookie 之外存储会话数据的路 径。（2）提供一种存储大量可以跨会话存在的数据的机制。 HTML5 的 WebStorage 提供了两种 API：localStorage（本地存储）和 sessionStorage（会话存储）。 1、生命周期：localStorage:localStorage 的生命周期是永久的，关闭页面或浏 览器之后 localStorage 中的数据也不会消失。 localStorage 除非主动删除数据， 否则数据永远不会消失。 sessionStorage 的生命周期是在仅在当前会话下有效。 sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源 的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进 入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口 后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是 不一样的。 2、 存储大小： localStorage 和 sessionStorage 的存储数据大小一般都是： 5MB 3、存储位置：localStorage 和 sessionStorage 都保存在客户端，不与服务器 进行交互通信。 4、存储内容类型：localStorage 和 sessionStorage 只能存储字符串类型，对 于复杂的对象可以使用 ECMAScript 提供的 JSON 对象的 stringify 和 parse 来 处理 5、获取方式：localStorage：window.localStorage;；sessionStorage： window.sessionStorage;。 6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录）， 适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录； WebStorage 的优点： （1）存储空间更大：cookie 为 4KB，而 WebStorage 是 5MB； （2）节省网络流量：WebStorage 不会传送到服务器，存储在本地的数据可以 直接获取，也不会像 cookie 一样美词请求都会传送到服务器，所以减少了客户 端和服务器端的交互，节省了网络流量； （3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃 的数据，sessionStorage 会非常方便； （4）快速显示：有的数据存储在 WebStorage 上，再加上浏览器本身的缓存。 获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快； （5）安全性：WebStorage 不会随着 HTTP header 发送到服务器端，所以安 全性相对于 cookie 来说比较高一些，不会担心截获，但是仍然存在伪造问题； （6）WebStorage 提供了一些方法，数据操作比 cookie 方便； setItem (key, value) 保存数据，以键值对的方式储存信息。 getItem (key) 获取数据，将键值传入，即可获取到对应的 value 值。 removeItem (key) 删除单个数据，根据键值移除对应的信 息。 clear () 删除所有的数据 key (index) 获取某个索引的 key 1.5 CSS 单位 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身 来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点 html 的字体大小来计算，CSS3 新加属性，chrome/firefox/IE9+支持。 vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%。 vh：viewpoint height，视窗高度，1vh 等于视窗高度的 1%。 vmin：vw 和 vh 中较小的那个。 vmax：vw 和 vh 中较大的那个。 %: 百分比 in: 寸 cm: 厘米 mm: 毫米 pt: point，大约 1/72 寸 pc: pica，大约 6pt，1/6 寸 1.6CSS3 animation 和 transiton 的相关属性 .1 为什么动画推荐用 c3c3 而不是 jsjs 1、导致 JavaScript 效率低的两大原因：操作 DOM 和使用页面动画。在浏 览器上实现动画效果可不比客户端轻松，通常我们会通过频繁的操作 DOM 的 CSS 来实现视觉上的动画效果，刚巧导致 js 效率低的两个因素都包括在内了。 在频繁的操作 DOM 和 CSS 时，浏览器会不停的执行重排（reflow）和重绘 （repaint）， 在 PC 版本的浏览器中，因为浏览器可用的内存比较大，用户肉 眼几乎看不见页面动画产生的 repaint 和 reflow，所以工程师几乎无需过多的 考虑动画带来的性能问题，但在移动设备上可大有不同，移动设备分配给内置浏 览器的内存可没有 PC 版本的浏览器内存可观， 2、CSS3 提供了一大批新的特性，包括 2D3D 动画特性，其它特性不在 本篇讨论范围内，我们此刻讨论一下 CSS3 的动画特性。用 CSS3 动画替代 JS 模拟动画的好处： a. 不占用 JS 主线程； b. 可以利用硬件加速； c. 浏览器可对动画做优化（元素不可见时不动画，减少对 FPS 的影响）。 坏处是： 浏览器对渲染的批量异步化处理让动画难以控制。 3、CSS3 动画提供了 2D 和 3D 以及常规动画属性接口，它可以工作在页 面的任何一个元素的任意一个属性，CSS3 的动画是利用 C 语言编写的，它是 系统层面的动画，因此它的效率绝对的高于 js 模拟的动画， CSS3 动画与 javascript 模拟动画有以下区别： a. CSS 3D 动画在 js 中无法实现 b. CSS 2D 矩阵动画效率高于 js 利用 margin 和 left,top 模拟的矩阵动画。 CSS3 的 2D 动画是指是 2D 矩阵 Transform 变化，比如缩放变形x 轴y 轴， c. CSS3 其它常规动画属性的效率均低于 js 模拟的动画 常规动画属性在这里是指：height，width,opacity,border-width,color. 4、动画事件。 每在页面执行一次动画时，都应该带有至少两个事件 animationStart 和 animationEnd 有的可能还需要 animationDuration，在手机上我们不推荐 animationDuration，本来 效率就已经非常低了，尽量不要在动画执行期间还做其它 的事件。用 js 模拟动画，需要开 发者编写这些动画事件的接口，以便更好的做下一步的工作，而 CSS3 动画不需要开发者 编写这些事件接口，浏览器本身就已经提供了， 拿 webkit 内核的浏览器举例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnima tionDuration,webkitAnimationEnd 事件接口，开发者可以很方便的使用这些事件。 至于采用 js 动画还是 css3 动画，需要开发者根据不同的需求做出不同的抉择，但应该遵 循一个基本的原则是：如果你需要做 2D 动画，请勿必使用 CSS3 的 transition 或 animation。 1.7css 编写注意事项 引用 表现与结构完全分离，代码中不涉及任何的表现元素，如 style、font、bgColor、 border 等 .1 分类方法 1、一个项目我们只引用一个 CSS，但是对于较大的项目，我们需要把 CSS 文件进行分类。 a. 按照 CSS 的性质和用途，将 CSS 文件分成“公共型样式”、“特殊型样式”、“皮 肤型样式”，并以此顺序引用（按需求决定是否添加版本号） b. 重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分 标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置 C. 统一处理：统一设置处理的样式 .1 命名 a. 使用类选择器，放弃 ID 选择器 b.使用单个字母+-为前缀 d. 后代选择器命名防止污染和被污染 .1 代码格式 a.选择器、属性和值都使用小写 b. 单行写完一个选择器定义 c.最后一个值也以分号结尾 d. 省略值为 0 时的单位 e. 省略 url 引用中的引号，其他需要引号的地方使用单引号 f.除非你需要透明度而使用 rgba，否则都使用#f0f0f0 这样的表示方法，并尽量 缩写#fff。 g.遵循横向顺序，先显示定位布局类属性，后盒模型等自身属性，最后是文本 类及修饰类属性。 h. 私有在前，标准在后。先写带有浏览器私有标志的，后写 W3C 标准的。 i. 注释格式：/* 注释文字 */ j. 原则上不允许使用 Hack k. 建议并适当缩写值 .1 代码优化方案 A. 值缩写 B. 选择器合并 C. 背景图优化合并: 图片本身的优化，多张图片的合并（css 精灵 spirit） D. 尽量使用 CSS 代替 JS 二、JavaScript 部分 2.1 JavaScript 数据类型 Number、String、Object、Boolean、Null、Undefind、Symbol 2.2 JavaScript 闭包 变量的作用域 1、内部声明变量的时候，一定要使用 var | let | const 命令，否则实际上声明了 一个全局变量 2、var 只存在函数作用域，let catch (e) / ie、chrome的安全机制无法修改parent.location.hash， var ifrproxy = document.createElement(iframe); ifrproxy.style.display = none; ifrproxy.src = document.body.appendChild(ifrproxy); /因为parent.parent（即 所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); .3通过 HTML5HTML5 的 postMessagepostMessage 方法跨域 windowObj.postMessage(message, targetOrigin); windowObj: 接受消息的 Window 对象。 message: 在最新的浏览器中可以是对象。 targetOrigin: 目标的源，* 表示任意。 这个方法非常强大，无视协议，端口，域名的不同。下面是烤熟的栗子： var windowObj = window; / 可以是其他的 Window 对象的引用 var data = null; addEventListener(message, function(e) if(e.origin = http:/jasonkid.github.io/fezone) data = e.data; e.source.postMessage(Got it!, *); ); message 事件就是用来接收 postMessage 发送过来的请求的。函数参数的属性有 以下几个： origin: 发送消息的 window 的源。 data: 数据。 source: 发送消息的 Window 对象。 .4通过 jsonpjsonp 跨域 一般用来获取数据， 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一 段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入 .5通过 CORSCORS 跨域 CORS 是一个 W3C 标准， 全称是跨域资源共享。 它允许浏览器向跨源服务器， 发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。 CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。整个 CORS 通信过程，都是浏览器自动完成，不需要用 户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全 一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时 还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键 是服务器。只要服务器实现了 CORS 接口，就可以跨源通信 服务器端对于 CORS 的支持， 主要就是通过设置 Access-Control-Allow-Origin 来进行的。如果浏览器检测到相应的设置，就可以允许 Ajax 进行跨域的访问。 CORS 和 JSONP 对比 1、JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求。 2、使用 CORS，开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据， 比起 JSONP 有更好的错误处理。 3、JSONP 主要被老的浏览器支持，它们往往不支持 CORS，而绝大多数现代浏览 器都已经支持了 CORS）。 4、CORS 与 JSONP 相比，无疑更为先进、方便和可靠。 .5通过 跨域 window 对象有个 name 属性，该属性有个特征：即在一个窗口(window)的生命周期 内,窗口载入的所有的页面都是共享一个 的， 每个页面对 都有读写的权限， 是持久存在一个窗口载入过的所有页面中的，并不会 因新页面的载入而进行重置。 var iframe = document.getElementById(iframe); var data = ; iframe.onload = function() iframe.onload = function() data = iframe.contentW; iframe.src = about:blank; ; （或者将里面的 about:blank 替换成某个同源页面（about:blank，javascript: 和 data: 中的内容，继承了载入他们的页面的源） 这种方法与 document.domain 方法相比，放宽了域名后缀要相同的限制，可以从任 意页面获取 string 类型的数据。 .6HeaderHeader 属性 Accept请求头用来告知客户端可以处理的内容类型 Accept-Language请求头允许客户端声明它可以理解的自然语言，以及 优先选择的区域方言 Content-Language是一个 entity header （实体消息首部），用来说 明访问者希望采用的语言或语言组合， 这样的话用户就可以根据自己偏 好的语言来定制不同的内容 Last-Event-ID只读属性表示事件的唯一 ID Content-Type实体头部用于指示资源的 MIME 类型 media type 2.4 JavaScript 继承 函数是在特定环境中执行代码的对象函数是在特定环境中执行代码的对象 .1 原型链继承 利用原型链让一个引用类型继承另外一个引用类型的属性和方法， （将父类的实 例作为子类的原型） 特点： 非常纯粹的继承关系，实例是子类的实例，也是父类的实例 父类新增原型方法/原型属性，子类都能访问到 简单，易于实现 缺点： 要想为子类新增属性和方法， 必须要在 new Animal()这样的语句之后执行， 不能放到构造器中 无法实现多继承 来自原型对象的引用属性是所有实例共享的 创建子类实例时，无法向父类构造函数传参 function SuperType() perty = true; SuperTtotype.getSuperValue = function() return perty; ; function SubType() this.subproperty = false; /继承了 SuperType SubTtotype = new SuperType(); SubTtotype.getSubValue = function () return this.subproperty; ; var instance = new SubType(); console.log(instance.getSuperValue();/ true .2 构造函数继承（伪造对象或经典继承） 通过使用 call()和 apply()方法，在子类型构造函数的内部调用超类构造函数 Call()，apply() 改变函数执行的作用域改变函数执行的作用域，即在，即在特定的作用域中调用函数，实际上等于设置函数特定的作用域中调用函数，实际上等于设置函数 体内体内 this 对象的值对象的值 语法 1：fun.call(thisArg, arg1, arg2, .) 语法 2：fun.apply(thisArg, argsArray) thisArg: 在 fun 函数运行时指定的 this 值。 a、链接构造函数 b、调用匿名函数 c、调用函数并且指定上下文的this 相同点：都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另 一个对象来执行，并且是立即执行 不同点： call 方法从第二个参数开始可以接收任意个参数，每个参数会映射到相应位 置的 func 的参数上，可以通过参数名调用，但是如果将所有的参数作为数组传 入，它们会作为一个整体映射到 func 对应的第一个参数上，之后参数都为空 apply 方法最多只有两个参数，第二个参数接收数组或者类数组，但是都会 被转换成类数组传入 func 中，并且会被映射到 func 对应的参数上 特点： 解决了 1 中，子类实例共享父类引用属性的问题 创建子类实例时，可以向父类传递参数 可以实现多继承（call 多个父类对象） 缺点： 实例并不是父类的实例，只是子类的实例 只能继承父类的实例属性和方法，不能继承原型属性/方法 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能 function SuperType(name) = name; this.colors = red, blue, green; function SubType() SuperType.call(this, wxu); var instance1 = new SubType(); instance1.colors.push(black); console.log(instance1.colors); /red,blue,green,black var instance2 = new SubType(); console.log(instance2.colors); /red,blue,green .3 组合继承（伪经典继承） 将原型链和借用构造函数的技术组合在一块， 从而发挥两者之长的一种继承模式 通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作 为子类原型，实现函数复用 特点： 弥补了方式 2 的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法 既是子类的实例，也是父类的实例 不存在引用属性共享问题 可传参 函数可复用 缺点： 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份 屏蔽了） function SuperType(name) = name; this.colors = red, blue, green; SuperTtotype.sayName = function() alert(); ; function SubType(name, age) SuperType.call(this, name); this.age = age; /继承属性 /继承方法 SubTtotype = new SuperType(); SubTtotype.constructor = SubType; SubTtotype.sayAge = function() alert(this.age); ; var instance1 = new SubType(Nicholas, 29); instance1.colors.push(black); console.log(instance1.colors); /red,blue,green,black instance1.sayName(); /Nicholas; instance1.sayAge(); /29 var instance2 = new SubType(Greg, 27); console.log(instance2.colors); /red,blue,green instance2.sayName(); /Greg; instance2.sayAge(); /27 .4 寄生组合继承 通过借助构造函数来继承属性，通过原型链的混成形式来继承方法 通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就 不会初始化两次实例方法/属性，避免的组合继承的缺点，（实现较为复杂） function object(o) function F() F.prototype = o; return new F(); function inheritPrototype(subType, superType) var prototype = object(superTtotype); /创建对象 prototype.constructor = subType; /增强对象 subTtotype = prototype; /指定对象 function SuperType(name) = name; this.colors = red, blue, green; SuperTtotype.sayName = function() alert(); ; function SubType(name, age) SuperType.call(this, name); this.age = age; inheritPrototype(SubType, SuperType); SubTtotype.sayAge = function() alert(this.age); ; .5 ClassClass 继承 1、Class 可以通过extends关键字实现继承 class Point class ColorPoint extends Point constructor(x, y, color) super(x, y); / 调用父类的 constructor(x, y) this.color = color; toString() return this.color + + super.toString(); / 调用父类的 toString() super 关键字：表示父类的构造函数，用来新建父类的 this 对象 super 作为函数调用时（只能用在子类的构造函数之中），代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super 函数。如果子类没有定义 constructor 方法， 以下法会被默认添加 constructor(.args) super(.args); super 作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。 通过 super 调用父类的方法时，方法内部的 this 指向子类。 2.5 JavaScript 的节流和防抖 函数节流 是指一定时间内 js 方法只跑一次（多数在监听页面元素滚动事件的时 用到）。 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。如果空闲，则可以 正常触发方法执行。如果代码正在执行，则取消这次方法执行，直接 return。 var canRun = true; document.getElementById(throttle).onscroll = function() if(!canRun) / 判断是否已空闲，如果在执行中，则直接 return return; canRun = false; setTimeout(function() console.log(函数节流); canRun = true; , 300); ; 函数防抖 是指频繁触发的情况下， 只有足够的空闲时间， 才执行代码一次。 （常 见于用户注册时候的手机号码验证和邮箱验证，只有等用户输入完毕后，前端才 需要检查格式是否正确，如果不正确，再弹出提示语） 函数防抖的要点，也是需要一个 setTimeout 来辅助实现。延迟执行需要跑的代码。如果方 法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始。如果计时完 毕，没有方法进来访问触发，则执行代码。 var timer = false; document.getElementById(debounce).onscroll = function() clearTimeout(timer); / 清除未执行的代码，重置回初始化状态 timer = setTimeout(function() console.log(函数防抖); , 300); ; 事件触发可以使用 event.timeStamp返回事件触发时间间离 2.6 JavaScript 的事件 JavaScript 与 HTML 之间的交互就是通过事件实现的，事件是浏览器对用户行 为的一个响应 JavaScript 事件循环机制 事件循环机制就是在执行上下文的过程中，对函数的入栈和出栈。执行前函数先 入栈，执行完后函数出栈。如若遇到了一些异步操作像回调函数以及 ajax、 setTimeout 等，会先将他们交给浏览器的其他模块去执行，执行完后，会把回 调函数放入到 taskqueue 中。当所有的 call stack 执行完后再开始执行 task queue 中的函数。 (function test() setTimeout(function() console.log(4), 0); new Promise(function executor(resolve) console.log(1); for( var i=0 ; i 显示绑定 隐式绑定 默认绑定 5、箭头函数的 this 绑定：箭头函数不使用我们上面介绍的四种绑定，而是完全 根据外部作用域来决定 this。 (箭头函数的 this 绑定看的是 this 所在的函数定义在 哪个对象下，绑定到哪个对象则 this 就指向哪个对象；如果有对象嵌套的情况， 则 this 绑定到最近的一层对象上；箭头函数的 this 绑定无法被修改 ) 2.11 面向对象的理解 面向对象编程（OOP）是一种编程范式。js 是基于原型的面向对象语言，面向对 象隐藏了面向过程具体实现的细节， 把属性和行为封装成一个抽象模型， 即对象， 以便用专业的方法做专业的事情。 面向对象三大特性： 封装、继承、多态 1、封装：封装就是把抽象出来的数据和对数据的操作封装在一起，数据被保护 在内部，程序的其它部分只有通过被授权的操作(成员方法)，才能对数据进行操 作。JS 封装只有两种状态，一种是公开的，一种是私有的。 2、继承：继承可以解决代码复用，让编程更加靠近人类思维。当多个类存在相 同的属性(变量)和方法时，可以从这些类中抽象出父类，在父类中定义这些相同 的属性和方法，所有的子类不需要重新定义这些属性和方法，只需要通过继承父 类中的属性和方法。 3、多态：多态是指一个引用(类型)在不同情况下的多种状态。JS 通过子类重写 父类方法的方式实现多态 三、浏览器部分 3.1 浏览器加载页面过程 1、首先，在浏览器地址栏中输入 url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在 屏幕中显示页面内容。若没有，则跳到第三步操作。 3、在发送 http 请求前，需要域名解析(DNS 解析)，解析获取相应的 IP 地址。 4、浏览器向服务器发起 tcp 连接，与浏览器建立 tcp 三次握手。 5、握手成功后，浏览器向服务器发送 http 请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器 7、浏览器收到 HTTP 响应 8、读取页面内容，浏览器渲染，解析 html 源码 9、生成 Dom 树、解析 css 样式、js 交互 10、客户端和服务器交互 11、ajax 查询 重绘与回流 当第一次打开一个页面时，至少会有一次重绘和回流。之后，如果渲染树发生了 变动，那么可能会触发重绘或回流中的一个或二者。 触发 Repaint 或 Reflow 的操作： 增加、删除、修改 DOM 结点 使用display:none;的方式隐藏一个结点会导致 repaint 与 reflow，使用 visibility:hidden;进行 dom 隐藏仅仅导致 repaint(没有结构性变化， 仅 仅看不见而已) 移动 dom 或着该 dom 进行动画 添加新的样式，或者修改某个样式 用户的一些操作诸如改变浏览器窗口大小，调整字体大小，滚动等等 压缩 repaints 或 reflows： 不要一个一个地去改变结点的样式，而可以通过设置 cssText 一次性将结 点样式修改完毕：el.style.cssText += ; left: + left + px; top: + top + px; 对多个 dom 进行操作时， 我们可以使用一种“离线”方式。“离线”意味着我 们我们先在渲染树之外进行操作。 不要经常去访问计算后的样式，如果可以，可以先将这些信息缓存下来。 一般说来，如果对一个使用了绝对布局的 dom 进行操作，并不会导致大 量的 reflow，不过绝对布局丧失了许多灵活性，很少有人会使用绝对定位 的方式进行主界面的布局。 3.2 前端优化部分 恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用 前端优化的目的：从用户角度而言，优化能够让页面加载得更快、对用户的操作 响应得更及时，能够给用户提供更为友好的体验；从服务商角度而言，优化能够 减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 页面级优化 1、减少 HTTP 请求数： 从设计实现层面简化页面； 合理设置 HTTP 缓存； 资源合并与压缩（尽可能的将外部的脚本、样式进行合并，多个合为一个）； CSS Sprites（合并 CSS 图片）； Inline Images（使用 data: URL sche