互联网大厂前端面试

ゝ一世哀愁。 2022-05-06 11:58 516阅读 0赞

1、meta标签

提供给页面的一些元信息（名称/值对）， 比如针对搜索引擎和更新频度的描述和关键词。

*  **`name`：**名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。
 *  **`http-equiv`**：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。
 *  **`content`**： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。
 *  **`scheme`**： 用于指定要用来翻译属性值的方案。

**2. css哪些属性可以继承**

*  字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
 *  文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
 *  列表相关：list-style-image, list-style-position, list-style-type, list-style
 *  颜色：color

**3. css3有哪些新属性**

（1）边框：

*  `border-radius`：圆角边框，border-radius:25px;
 *  `box-shadow`：边框阴影，box-shadow: 10px 10px 5px \#888888;
 *  `border-image`：边框图片，border-image:url(border.png) 30 30 round;

（2）背景：

*  `background-size`：规定背景图片的尺寸，background-size:63px 100px;
 *  `background-origin`：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;
 *  CSS3 允许您为元素使用多个背景图像。background-image:url(bg\_flower.gif),url(bg\_flower\_2.gif);

（3）文本效果：

*  `text-shadow`：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px \#FF0000;
 *  `word-wrap`：允许文本进行换行。word-wrap:break-word;

（4）字体：CSS3 @font-face 规则可以自定义字体。

（5）2D 转换（ `transform`）

*  `translate()`：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px,100px);
 *  `rotate()`：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg);
 *  `scale()`：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4);
 *  `skew()`：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg);
 *  `matrix()`： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

（6）3D 转换

*  `rotateX()`：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
 *  `rotateY()`：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

（7）transition：过渡效果，使页面变化更平滑

*  `transition-property` ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
 *  `transition-duration`：过渡动画的一个持续时间。
 *  `transition-timing-function`：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。
 *  `transition-delay`：延迟多久后开始动画。

简写为： `transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];`

（8）animation：动画

使用CSS3 @keyframes 规则。

*  `animation-name`: 定义动画名称
 *  `animation-duration`: 指定元素播放动画所持续的时间长
 *  `animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)`： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。
 *  `animation-delay`: 指定元素动画开始时间
 *  `animation-iteration-count:infinite | <number>`：指定元素播放动画的循环次
 *  `animation-direction: normal | alternate`： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
 *  `animation-play-state:running | paused` ：控制元素动画的播放状态。

简写为： `animation:[<animation-name> || <animation-duration>|| <animation-timing-function> || <animation-delay> ||<animation-iteration-count> || <animation-direction>]`

**4. 闭包是什么，什么时候闭包会消除?**

因为作用域链，外部不能访问内部的变量和方法，这时我们就需要通过闭包，返回内部的方法和变量给外部，从而就形成了一个闭包。

JavaScript是一门具有自动垃圾回收机制的编程语言，主要有两种方式：

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

引用计数（reference counting）的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。

导致问题：会导致循环引用的变量和函数无法回收。

解决：将用完的函数或者变量置为null。

**5. 怎么理解js是单线程的**

主要说一下异步以及事件循环机制，还有事件队列中的宏任务、微任务。

*  **`macrotask`**：主代码块，setTimeout，setInterval、setImmediate等。
 *  **`microtask`**：process.nextTick（相当于node.js版的setTimeout），Promise 。process.nextTick的优先级高于Promise。

**6. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？**

<table style="width:608px;"> 
 <thead> 
  <tr> 
   <th>排序算法</th> 
   <th>最坏事件复杂度</th> 
   <th>平均时间复杂度</th> 
   <th>稳定度</th> 
   <th>空间复杂度</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>冒泡排序</td> 
   <td>O(n^2)</td> 
   <td>O(n^2)</td> 
   <td>稳定</td> 
   <td>O(1)</td> 
  </tr> 
  <tr> 
   <td>插入排序</td> 
   <td>O(n^2)</td> 
   <td>O(n^2)</td> 
   <td>稳定</td> 
   <td>O(1)</td> 
  </tr> 
  <tr> 
   <td>选择排序</td> 
   <td>O(n^2)</td> 
   <td>O(n^2)</td> 
   <td>稳定</td> 
   <td>O(1)</td> 
  </tr> 
  <tr> 
   <td>快速排序</td> 
   <td>O(n^2)</td> 
   <td>O(n*log2n)</td> 
   <td>不稳定</td> 
   <td>O(log2n)~O(n)</td> 
  </tr> 
  <tr> 
   <td>二叉树排序</td> 
   <td>O(n^2)</td> 
   <td>O(n*log2n)</td> 
   <td>不一定</td> 
   <td>O(n)</td> 
  </tr> 
  <tr> 
   <td>堆排序</td> 
   <td>O(n*log2n)</td> 
   <td>O(n*log2n)</td> 
   <td>不稳定</td> 
   <td>O(1)</td> 
  </tr> 
 </tbody> 
</table>

**7. 原生ajax的请求过程**

创建全平台兼容的XMLHttpRequest对象：

1.  **`function getXHR(){`**
2.  **` var xhr = null;`**
3.  **` if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari`**
4.  **`   xhr = new XMLHttpRequest();`**
5.  **` } else if (window.ActiveXObject) {`**
6.  **`   try {`**
7.  **`     xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3`**
8.  **`   } catch (e) {`**
9.  **`     try {`**
10. **`       xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用`**
11. **`     } catch (e) {`**
12. **`       alert("您的浏览器暂不支持Ajax!");`**
13. **`     }`**
14. **`   }`**
15. **` }`**
16. **` return xhr;`**
17. **`}`**

Ajax请求数据的过程：

1.  **`var xhr = getXHR();`**
2.  **`xhr.open('GET', url/file,true);  //设置请求方式，url，以及是否异步`**
3.  **`xhr.onreadystatechange = function() {   //设置回调监听函数`**
4.  **`  if(xhr.readyState==4){`**
5.  **`       if(xhr.status==200){`**
6.  **`           var data=xhr.responseText;`**
7.  **`            console.log(data);`**
8.  **`  }`**
9.  **`};`**
10. **`xhr.onerror = function() {`**
11. **` console.log("Oh, error");`**
12. **`};`**
13. **`xhr.send();  //发送请求`**

**8. http状态码，cookie字段，cookie一般存的是什么，session怎么存在的？**

cookie和session都是为了弥补http协议的无状态特性，对server端来说无法知道两次http请求是否来自同一个用户，利用cookie和session就可以让用户只登录一次，server就知道某个请求是否需用重新登录。

1. cookie：客户端第一次正常访问服务器，服务器在response headers中返回与用户信息相关的cookie，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个cookie，服务器收到这个cookie就知道用户状态了。cookie可以设置过期时间，默认值是-1，表示关闭浏览器时cookie就会失效，值为0时表示立马失效，相当于删除cookie（cookie没有删除的方法），服务器和客户端都可以设置cookie，但不可以操作另一个域名下的cookie。

2. session: 客户端第一次正常访问服务器，服务器生成一个sessionid来标识用户并保存用户信息（服务器有一个专门的地方来保存所有用户的sessionId），在response headers中作为cookie的一个值返回，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个sessionId，服务器通过查找这个sessionId就知道用户状态了，并更新sessionId的最后访问时间。sessionId也会可以设置失效时间，比如如果60分钟内某个session都没有被更新，服务器就会删除这个它。

总言之cookie是保存在客户端，session是存在服务器，session依赖于cookie。

**9. http请求方式有哪些？**

*  HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
 *  HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

**1. css选择器，怎么选择相同的类**

id、class、标签、伪类、通配符等。可以用getElementsByClassName（）选择相同的类。

**2. css3有哪些伪类，伪类选择器有哪些**

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。

*  **伪类**：用于向某些选择器添加特殊的效果。例如，a标签的 `:link`, `:visited`,`:hover`, `:active`; 以及 `:first-child`, `:last-child`。
 *  **伪元素**：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如`:before`, `:after`, `:first-letter`, `:first-line`。css3只新增了一个伪元素`::selection`（改变用户所选取部分的样式）。

参考： CSS3 选择器——伪类选择器

**3. OSI七层网络模型**

<table style="width:608px;"> 
 <thead> 
  <tr> 
   <th>OSI七层模型</th> 
   <th>作用</th> 
   <th>对应协议</th> 
   <th>对应设备</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>应用层</td> 
   <td>它是计算机用户，以及各种应用程序和网络之间的接口</td> 
   <td>HTTP, FTP, SMTP, POP3</td> 
   <td>计算机设备</td> 
  </tr> 
  <tr> 
   <td>表示层</td> 
   <td>信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩</td> 
   <td>IPX, LPP, XDP</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>会话层</td> 
   <td>建立、维护、管理应用程序之间的会话</td> 
   <td>SSL, TLS, DAP, LDAP</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>传输层</td> 
   <td>服务点编址，分段与重组、连接控制、流量控制、差错控制</td> 
   <td>TCP, UDP</td> 
   <td>防火墙</td> 
  </tr> 
  <tr> 
   <td>网络层</td> 
   <td>为网络设备提供逻辑地址，进行路由选择、分组转发</td> 
   <td>IP ARP RARP ICMP IGMP</td> 
   <td>路由器</td> 
  </tr> 
  <tr> 
   <td>数据链路层</td> 
   <td>物理寻址，同时将原始比特流转变为逻辑传输路线</td> 
   <td>PPTP, ARP, RARP</td> 
   <td>交换机</td> 
  </tr> 
  <tr> 
   <td>物理层</td> 
   <td>机械、电子、定时接口通道信道上的原始比特流传输</td> 
   <td>IEEE 802.2, Ethernet v.2, Internetwork</td> 
   <td>网卡</td> 
  </tr> 
 </tbody> 
</table>

参考： 一张非常强大的OSI七层模型图解

**4. MVC和MVVM的区别**

*  Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；
 *  View作为视图层，主要负责数据的展示；
 *  Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。

`MVC`将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

`MVVM`把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

参考： 浅析前端开发中的 MVC/MVP/MVVM 模式

**5. 用过哪些设计模式**

（1）单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。

（2）发布/订阅模式  
定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景：订阅感兴趣的专栏和公众号。

（3）策略模式  
定义：将一个个算法（解决方案）封装在一个个策略类中。

优点：

*  策略模式可以避免代码中的多重判断条件。
 *  策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。
 *  策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。
 *  策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。
 *  违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。

应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。

（4）代理模式

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）

（5）中介者模式

定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景： 例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

（6）装饰者模式

定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。

应用场景： 有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。

参考： JavaScript设计模式

**8. es6相比es5有哪些优点**

大概说一下：let、const，模板字符串，箭头函数，做异步处理的promise、generator、async await，es6模块等。

参考： 阮一峰 —— ECMAScript 6 入门

**11. 懒加载怎么实现**

**场景**：一个页面中很多图片，但是首屏只出现几张，这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区在加载。优化首屏加载。

**实现**：img标签src属性为空，给一个data-xx属性，里面存放图片真实地址，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

**优点**：页面加载速度快，减轻服务器压力、节约流量，用户体验好。

**1. 为什么要用flex布局，align-items和justify-content的区别**

传统布局基于盒模型，非常依赖 display属性 、position属性 、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在垂直方向上的对齐方式；

justify-content：定义在水平方向上的对齐方式。

**2. webpack是怎么打包的，babel又是什么？**

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

**3. saas和less不同于普通css的地方**

*  **定义变量**，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；
 *  **嵌套写法**，父子关系一目了然；
 *  **使用运算符**，可以进行样式的计算；
 *  内置一些**颜色处理函数**用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
 *  **继承**：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
 *  **Mixins （混入）**：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

**4. es 6模块和其他模块不同的地方**

对比了一下es6模块和CommonJS模块：

<table style="width:608px;"> 
 <thead> 
  <tr> 
   <th>区别</th> 
   <th>CommonJS</th> 
   <th>es6</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>加载原理</td> 
   <td>第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。</td> 
   <td>不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。</td> 
  </tr> 
  <tr> 
   <td>输出</td> 
   <td>值的拷贝（模块中值的改变不会影响已经加载的值）</td> 
   <td>值的引用（静态分析，动态引用，原来模块值改变会改变加载的值）</td> 
  </tr> 
  <tr> 
   <td>加载方式</td> 
   <td>运行时加载（加载整个模块，即模块中的所有接口）</td> 
   <td>编译时加载（只加载需要的接口）</td> 
  </tr> 
  <tr> 
   <td>this指向</td> 
   <td>指向当前模块</td> 
   <td>指向undefined</td> 
  </tr> 
  <tr> 
   <td>循环加载</td> 
   <td>只输出已经执行的部分，还未执行的部分不会输出</td> 
   <td>遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。</td> 
  </tr> 
 </tbody> 
</table>

**5. 有没有用过es6的一些异步处理函数**

Promise，generator，async await

**6. redux怎么处理异步操作**

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

**7. 为什么reducer要是个纯函数，纯函数是什么？**

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（**浅比较**）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

**8. 高阶函数是什么，怎么去写一个高阶函数**

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

**9. vue跟react的区别是什么**

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

参考： Vue.js与React的全面对比

**10. nodejs处理了什么问题**

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

**11. 响应式布局，怎么做移动端适配**

使用媒体查询可以实现响应式布局。

移动端适配方案：

（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

1.  `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">`

`width=device-width`: 让当前viewport宽度等于设备的宽度  
`user-scalable=no`: 禁止用户缩放  
`initial-scale=1.0`: 设置页面的初始缩放值为不缩放  
`maximum-scale=1.0`: 允许用户的最大缩放值为1.0  
`minimum-scale=1.0`: 允许用户的最小缩放值为1.0

（2）媒体查询（响应式)

（3）动态 rem 方案

**5. 如何实现水平垂直居中，relative、absolute、fixed**

（1）使用表格

1.  **`.container{`**
2.  **` width: 600px;`**
3.  **` height: 600px;`**
4.  **` background: #eee;`**
5.  **` display: table-cell;`**
6.  **` text-align: center;`**
7.  **` vertical-align: middle;`**
8.  **`}`**
9.  **`.center{`**
10. **` background: blue;`**
11. **`}`**

（2）css3的transform属性

1.  **`.container{`**
2.  **` width: 100%;`**
3.  **` height: 400px;`**
4.  **` background: #eee;`**
5.  **` position: relative;`**
6.  **`}`**
7.  **`.center{`**
8.  **` background: blue;`**
9.  **` position:absolute;`**
10. **` top: 50%;`**
11. **` left: 50%;`**
12. **` transform: translate(-50%, -50%);`**
13. **`}`**

**（3）flex布局**

1.  **`.container{`**
2.  **` width: 100%;`**
3.  **` height: 400px;`**
4.  **` background: #eee;`**
5.  **` display: flex;`**
6.  **` justify-content: center;`**
7.  **` align-items: center;`**
8.  **`}`**
9.  **`.center{`**
10. **` width: 100px;`**
11. **` height: 100px;`**
12. **` background: blue;`**
13. **` text-align: center;`**
14. **`}`**

*  relative：相对于自己的定位；
 *  absolute：相对于最近一级定位元素的定位；
 *  fixed：相对于窗口的定位。

**实现call**方法

1.  **`Function.prototype.call2 = function (context) {`**
2.  **`   var context = Object(context) || window`**
3.  **`   context.fn = this`**
4.  **`   var args = []`**
5.  **`   for (var i = 1; i < arguments.length; i++) {`**
6.  **`       args.push('arguments[' + i +']')`**
7.  **`   }`**
8.   
9.  **`   var res = eval('context.fn(' + args + ')')`**
10.  
11. **`   delete context.fn`**
12. **`   return res`**
13. **`}`**

**数组有哪些方法，哪些会改变原数组**

改变原数组的方法：pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill；

不改变原数组（复制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes；

循环遍历：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

**Map有哪些方法**

Map的方法：set, get, has, delete, clear

遍历方法：

keys()：返回键名的遍历器。  
values()：返回键值的遍历器。  
entries()：返回所有成员的遍历器。  
forEach()：遍历 Map 的所有成员。