常考前端题

7.js的继承

    答：js继承的实现方式：

            1）原型链继承：将父类的实例作为子类的原型

            2）构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

            3）实力继承：为父类实例添加新特性，作为子类实例返回

            4）拷贝继承

            5）组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

           6）计生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

8.call和apply的区别

   答：共同点：都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由this Obj指定的新对象”

       不同点：apply只有两个参数，新this对象和一个数组。call可以接受多个参数，第一个和apply一样，第二个是参数列表

9.ajax是同步还是异步，怎么样实现同步

   答：ajax默认是异步的。  实现同步  jquery的acync：false；默认是true：异步，false：同步。

    $.ajax({ 

           type: "post", 

           url: "path", 

           cache:false, 

           async:false, 

           dataType: ($.browser.msie) ? "text" : "xml", 

           success: function(xmlobj){ 

         } 

      });

10.ajax实现过程

   答：ajax异步的JavaScript和xml，全称：“Asynchrous（异步） Javascript And XML”，是指一种创建交互式网页的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统的web交互模式。

   同步和异步：

                 传统的同步技术，客户端浏览器向服务器提出请求后，然后在服务器响应这个请求之前，一直处于等待状态，并不能进行别的操作。

               同步操作模式：当客户端浏览器是向Ajax引擎提交请求，然后由Ajax引擎负责和服务器进行请求信息转交，这样就能实现在客户端浏览器发送请求后，能够继续操作，而不是处于等待状态。当服务器处理完Ajax引擎请求后，将响应传递给Ajax引擎，Ajax引擎会更新客户端浏览器页面。

     ajax步骤：

          第一步：获取XMLHttpRequest对象。

          第二步：注册回调函数
       xmlhttp.onreadystatechange = function(){
                                                                       };
                       onreadystatechange是一个事件处理器，用于每个状态变化所触发的事件。

         第三步：open(“method”,”URL”,async,”uname”,”pswd”)
                                                   只用于设置请求方式、URL路径、以及是否同步，并不发送请求。

11.闭包的作用理解，以及那些地方用过闭包，以及闭包的缺点，如何实现闭包

   答：在js中变量作用域：全局变量和局部变量，javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。声明用var，不然是全局变量，从外部读取函数内部的局部变量，就有了闭包。

   闭包可以简单理解成“定义在一个函数内部的函数“。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

      用途：1）读取函数内部的变量，2）就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。

      缺点：                  

       （1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

      （2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

     

12.跨域方法以及怎么样实现的与原理

       

     跨域:

       浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

           上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

13.工作中做的项目有什么亮点

    

14.webpack工程构建工具怎么样用

       答：第一、安装node,安装好后，npm -v 查看版本，然后利用包管理器npm安装各种包

            第二、创建一个项目app01

             第三、我们首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init         

           第四、接下来通过全局安装webpack，在终端执行cd 退回到全局，然后执行：（sudo） npm install -g webpack，mac下报错的话前面可能需要加sudo获取管理员权限（下同）。这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。然后我们进入项目根目录局部安装webpack，进入./webpack-demo，执行：npm install webpack --save-dev

如果安装成功，此时根目录下会出现一个node_modules文件夹       

          第五、loader加载器。babel-core,babel-loader  编译js代码  babel-preset-es2015  es6编译成es5  extract-text-webpack    plugin   插件包

         第六、配置webpack.config.js

15.数组去重

     答：较全的去重法：https://www.jb51.net/article/118657.htm

16.快排和冒泡原理

    答：快速排序：一次排序后，将数据划分为两半，一半比某一个数小，另一半比某个数大。利用递归，完成对数组的排序。

            冒泡排序：以升序来说，从开头开始与他后面的数作比较，如果比后面的数小则不动，如果比后面的数大，则交换位置。每比完一轮，缩小比较范围，N个数比较，总的比较次数为N-1轮。

17.http状态码

     1：消息     2：成功     3：重定向    4：请求错误     5：数据库错误

        详细状态码：http://tool.oschina.net/commons?type=5

18.nodejs了解多少

     答：而Node.js是一个可以让JavaScript运行在服务器端的平台，使用V8内核。

        特点：  非阻塞I/O     事件驱动    数据密集型    实时交互应用程序

     

19.为什么css样式初始化，目的是为了什么

      答：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

20.为什么浏览器会产生同源策略

     答：没有同源（同域名，同端口，同协议），不同源的数据和资源就能互相访问，那就乱了。为了安全起见，资源的有效管理，浏览器采用这种策略。

21.axios有什么特点

   答：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

 

22.cookie和webstrage的区别以及cookie怎么样使用？原生cookie怎么样封装

   答：共同点：都是保存在浏览器端,且同源的

cookie有什么缺点？Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB

安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

区别  1、cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递  2、cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下、 3、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。 4、webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大  5、数据的有效期不同    sessionStorage：仅在当前的浏览器窗口关闭有效   localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；   cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭  6、作用域不同sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面； localStorage：在所有同源窗口都是共享的； cookie：也是在所有同源窗口中共享的

        webStorage只能操作字符串对象，所有的存储值都会为字符串数据

25.position属性有哪些值，分别有什么含义

    答：position属性有    absolute   生成绝对定位元素，

                                       relative  生成相对定位元素

                                       fixed  生成固定定位元素，相对于浏览器视口定位

                                       static   默认值，没有定位元素

  26.ES6用过吗，新增了那些东西，你用到过什么

     答：1）声明变量的方法：es5中var    es6  新增let（让自己的代码块中有了自己的作用域，避免for

循环，泄露全局变量的问题）    const（声明的变量是常量，不可以再改变）

      二者特点：变量声明不可提升    暂时性死区    变量不可重复    具有局部作用域

     2）新增   class、 extends、 super：

   constructor可以理解为构造方法，它里面声明的东西只能自己用，constructor以外的方法可以共用。

   Class之间可以通过extends关键字实现继承。

   子类继承父类的时候，在子类的constructor必须写super()。否则新建实例时会报错因为子类没有自己的this对象，而是继承父类的this对象。

3）arrow function箭头函数：一般用于回调函数中

  //ES5  function(i){ return i + 1;}

   //ES6   (i) => i + 1

4）default默认值默认值，省的我们经常需要用时||来赋值默认值了

//ES5

function auto(name){

    name = name || "uw3c"

    console.log(name);

}

 

auto();

//ES6

function auto(name = "uw3c"){

    console.log(name);

    auto();

}

5）export  import：export导出，import导入

具体：http://www.uw3c.com/jsviews/js105.html

28.箭头函数，箭头函数的特点

定义：(params1,params2,params3..)=>{expressions}

   其中()中的内容为传入箭头函数的参数，{}为函数内的内容。

规范：1、参数部分：

                 1）如果有多个参数，不能省略(),如果参数个数不明，可以用...rest表示，但是...rest必须放在最后

                 2）如果只有一个参数，可以省略()

                 3)   如果没有参数，那么可以用(),_表示  eg:() = > {}， _ = > {}

           2、函数体部分：如果没有{},则不用指定return

特性：1）箭头函数没有自己的this，即不生成自己独立的上下文环境。在函数体里面的this，捕捉上一层的上下文
 

26.什么是mvvm mvc是什么区别 原理

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架

三、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

 

27.px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

28.浏览器缓存有哪些，通常缓存有哪几种

   1）http缓存

   2）websql缓存

    3）cookie

     4）localstorage 跨选项卡，所有该浏览器的选项卡都可以访问，当关闭浏览器之后，再打开，数据依然在，是保存在硬盘中

     5）sessionstorage 仅限当前选项卡访问，浏览器关闭就会删除

      6）flash缓存

       7）indexedDB数据库 NoSql数据库，不支持sql语句

50、浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

   自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

51.css3新增的属性

     CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：

　　1.CSS3边框：①border-radius ：CSS3圆角边框 ②box-shadow：CSS3边框阴影③border-image：CSS3边框图片

　　2.CSS3背景：①background-size： 属性规定背景图片的尺寸②background-origin ：属性规定背景图片的定位区域③background-origin ：属性规定背景图片的定位区域。

　　3.CSS3文字效果：①text-shadow：文本应用阴影②word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

　　4.CSS3 2D转换：

　　transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

• translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
• rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
• scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
• skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。
• matrix() :

  matrix() 方法把所有 2D 转换方法组合在一起。

  matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

　　5.CSS3 3D转换：

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

　　6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

　　7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

　　8.CSS3多列：

• column-count：属性规定元素应该被分隔的列数。
• column-gap：属性规定列之间的间隔。
• column-rule ：属性设置列之间的宽度、样式和颜色规则。

　　9.CSS3用户界面：

• resize：属性规定是否可由用户调整元素尺寸。
• box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
• outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

  54：从输入url到显示页面，都经历了什么

  第一步：客户机提出域名解析请求,并将该请求发送给本地的域名服务器。

  第二步：当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。

  第三步：如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。
  第四步：本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
  第五步：重复第四步,直到找到正确的纪录。

  第2种解释：

  一般会经历以下几个过程：

  1、首先，在浏览器地址栏中输入url

  2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

  3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。

  4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

  5、握手成功后，浏览器向服务器发送http请求，请求数据包。

  6、服务器处理收到的请求，将数据返回至浏览器

  7、浏览器收到HTTP响应

  8、读取页面内容，浏览器渲染，解析html源码

  9、生成Dom树、解析css样式、js交互

  10、客户端和服务器交互

  11、ajax查询

  55：对<meta></meta>标签有什么理解

  什么是meta标签？

  引自下W3school的定义说明一下。

  元数据（metadata）是关于数据的信息。

  标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

  典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

  标签始终位于 head 元素中。

  元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

  其实对上面的概念简单总结下就是：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

  meta的作用

  meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容

  56：new操作符到底到了什么

  先看代码

  [javascript] view plain copy

  1. var Func=function(){  

  2. };  

  3. var func=new Func ();  

  new共经过了4几个阶段

  1、创建一个空对象

  [javascript] view plain copy

  1. varobj=new Object();  

  2、设置原型链

  [javascript] view plain copy

  1. obj.__proto__= Func.prototype;  

  3、让Func中的this指向obj，并执行Func的函数体。

  [javascript] view plain copy

  1. var result =Func.call(obj);  

  4、判断Func的返回值类型：

  如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

  [javascript] view plain copy

  1. if (typeof(result) == "object"){  

  2.   func=result;  

  3. }  

  4. else{  

  5.     func=obj;;  

  6. }  

  57：h5新特性

  HTML5新特性 —— 新特性
  (1)新的语义标签和属性
  (2)表单新特性
  (3)视频和音频
  (4)Canvas绘图
  (5)SVG绘图
  (6)地理定位
  (7)拖放API
  58：vue的生命周期

   

   

  58：请写出你对闭包的理解，并列出简单的理解

  使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

  闭包有三个特性：

  1.函数嵌套函数 

  2.函数内部可以引用外部的参数和变量 

  3.参数和变量不会被垃圾回收机制回收

   

  59：display none visibility hidden区别？

  1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

  2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

  60：JavaScript中如何检测一个变量是一个String类型？请写出函数实现

  typeof(obj) === "string"

  typeof obj === "string"

  obj.constructor === String

  61：如何理解闭包？

  1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。

  2、表现形式：使函数外部能够调用函数内部定义的变量。

  3、实例如下：

  (1)、根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

  var count=10;   //全局作用域 标记为flag1function add(){

      var count=0;    //函数全局作用域 标记为flag2

      return function(){

          count+=1;   //函数的内部作用域        alert(count);

      }

  }var s = add()

  s();//输出1

  s();//输出2

  4、变量的作用域

  要理解闭包，首先必须理解Javascript特殊的变量作用域。

  变量的作用域分类：全局变量和局部变量。

  特点：

  1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。

  2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

   5、使用闭包的注意点

  1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

  2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

  62：谈谈垃圾回收机制方式及内存管理

  回收机制方式

  1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

  2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

  3、实例如下：

  function fn1() {

      var obj = {name: 'hanzichi', age: 10};

  }

  function fn2() {

      var obj = {name:'hanzichi', age: 10};

     return obj;

  }var a = fn1();var b = fn2();

  fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。

   4、垃圾回收策略：标记清除(较为常用)和引用计数。

  标记清除：

  　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

  　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

  引用计数：

  　　定义和用法：引用计数是跟踪记录每个值被引用的次数。

  　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

  63：判断一个字符串中出现次数最多的字符，统计这个次数

  var str = 'asdfssaaasasasasaa';

  var json = {};

  for (var i = 0; i < str.length; i++) {

      if(!json[str.charAt(i)]){

         json[str.charAt(i)] = 1;

      }else{

         json[str.charAt(i)]++;

      }

  };var iMax = 0;var iIndex = '';for(var i in json){

      if(json[i]>iMax){

           iMax = json[i];

           iIndex = i;

      }

  }        console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

  64、$(document).ready()方法和window.onload有什么区别？

   (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

   (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

  65、 jquery中$.get()提交和$.post()提交有区别吗？

  相同点：都是异步请求的方式来获取服务端的数据；

  异同点：

  1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

  2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

  3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

  4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题