前端面试题

时间  2019-11-24
标签 端面 试题 繁體版
原文   原文链接

HTML面试问题

  1. Doctype做用？标准模式和兼容模式有什么区别？javascript

    1. doctype写在html第一行，doctype规定了浏览器的解析器用什么标准去解析文档，doctype缺失或者或者格式不正确,会致使文档以兼容模式呈现。
    2. 标准模式的排版和js运做模式都是以该浏览器支持的最高标准运行。在兼容模式中，浏览器以较宽松的向后兼容的方式显示，以确保能在旧版本的浏览器上也能运行。

  2. html5为何只须要写？css

    1. html5不是基于SGML的，不须要对DTD进行引用，可是须要doctype来规范浏览器的行为。
    2. html4是基于SGML的，须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

  3. 行内元素有哪些？块级元素有哪些？空元素有哪些？html

    1. 行内元素：input、span、img、a
    2. 块级元素：div、p、h1
    3. 空元素：input、img

  4. 页面导入样式时，使用link和@import有什么区别？前端

    1. link属于xhtml标签，不只能引入css,还能引入RSS,定义rel链接属性等做用。@import是css提供的，只能用来引入css。
    2. 引入的时间点不同：link是在页面加载时同时加载，@import引入的css是等页面加载完再加载的。
    3. imprt是css2.1提出的，只有在ie5以上的浏览器支持，link是xhtml标签，无兼容问题。
    4. link支持使用js控制DOM去改变样式，而@import不支持。

  5. 介绍一下你对浏览器内核的理解？html5

    主要分为渲染引擎和js引擎。java

    渲染引擎：负责取得网页的内容,引入css,计算网页的显示方式，输出到显示器。node

    js引擎：解析和执行js来实现网页的动态效果。jquery

  6. 常见的浏览器内核有哪些？android

    1. Trident：IE、360、搜狗
    2. Gecko：Netscape6及以上，FireFox
    3. Presto：Opera7及以上(原为Presto,现为Blink)
    4. Webkit内核：Safari，Chrome(Chrome:Blink是Webkit的分支)

  7. html5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分HTML和HTML5?ios

    1. 新增了语义化标签和其余一些标签例如canvas、video、audio,新增了localStorage、sessionStorage、Geolocation、WebSocket
    2. 去除了一些纯表现元素big、center 和对可用性产生负面影响的元素frame
    3. 经过doctype区分

  8. 简述一下你对html语义化的理解？

    1. 用正确的标签作正确的事。
    2. 页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。
    3. 没有css的状况下，也以文档格式显示，容易阅读。
    4. 搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字权重，有利于seo
    5. 使阅读源代码的人对网站更容易的分块，便于阅读维护。

  9. html5的离线存储怎么使用，工做原理能不能解释一下？

    1. 在html标签上添加上manifest="cache.manifest"

    2. 在cache.manifest文件中配置

      #CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
net.png

FALLBACK:
//offline.html
复制代码

    3. 工做原理：

      1. 在线状况下，浏览器会发现html上有manifest属性，它会请求manifest文件，第一次进入app时,浏览器会根据manifest配置文件的内容下载相应的资源并进行离线存储。若是已经访问过app而且资源已经离线存储，那么浏览器就会使用离线的资源进行加载页面，浏览器会对比新旧manifest文件，若是文件有改变，那么就会从新下载全部的资源文件并进行离线存储。
      2. 离线状态下，直接使用离线下载好的资源文件。

    4. 会出现的问题：

      1. 若是有一个资源文件下载失败，那么全部的资源文件仍是会用原先旧的资源文件
      2. 若是manifest没有更新，那么仍是会使用旧的资源文件
      3. manifest更新了，可是http的缓存规则告诉浏览器本地缓存的manifest文件没有过时，这种状况下仍是会使用旧的manifest文件，因此不会下载新的资源文件，仍是使用旧的资源文件。
      4. 更新资源以后，只有下次打开才生效，若是要立刻生效，可使用window.applicationCache.swapCache()方法来使之生效。浏览器会先使用离线存储的资源，而后再会去检查manifest文件有没有更新，因此须要到下次打开页面才能生效。

  10. 请描述一下cookies,sessionStorage和localStorage的区别？

  11. cookie数据始终在同源的http请求中携带，在客户端和终端之间来回传递的，通常会加密，是用来验证身份的。sessionStorage和localStorage仅保存在客户端。

  12. 存储量大小：cookie不超过4kb；其余2个在5M或者更大。

  13. 什么时候销毁：cookie会设置有效期，过了有效期就过时了；sessionStorage窗口关闭就销毁了；localStorage窗口除非手动删除，否则一直会保存在浏览器中。

  14. iframe有哪些缺点？

  15. label的做用是什么？是怎么用的？

    label的做用是当用户选择标签时，浏览器会将焦点自动指向label所指向的表单控件。

  16. html5的form如何关闭自动完成功能？

    给form或者须要关闭自动完成功能的标签添加autocomplete=off。

  17. 如何实现浏览器内多个标签页之间的通讯？

    1. 使用localStorage、事件监听。
    2. 使用cookie、setInterval。
    3. ShareWorker（同源）
    4. WebSocker（长连接）

  18. webSocket如何兼容低浏览器？

  19. 页面可见性(Page Visibility API)能够有哪些用途？

  20. 如何在页面上实现一个圆形的可点击区域？

    1. border-radius
    2. js获取坐标点
    3. map+area或者svg

  21. 实现不使用border画出1px高的线，在不一样浏览器的标准模式和怪异模式下都能保持同样的效果。

    .line{
  height:1px;
  overflow:hidden;
  background:red;
}
复制代码

  22. 网页验证码是干吗的，是为了解决什么问题。

    1. 为了区分是计算机仍是人的公共全自动程序，防止破解密码，刷票、论坛灌水。
    2. 有效防止黑客对某一特定的注册用户用特定程序暴力破解方式进行不断的登陆尝试。

  23. title与h1的区别，b与strong的区别，i与em的区别

css面试题

  1. 介绍一下标准的css盒子模型？

    1. css盒子模型：IE盒模型和w3c标准盒模型。
    2. 盒模型：content+padding+border+margin。
    3. IE盒模型，content+padding+border;w3c标准盒模型，content。

  2. css选择符有哪些？哪些属性能够继承？

    1. id选择器、类选择器、标签选择器、后代选择器、子选择器、相邻选择器、通配符选择器、属性选择器、伪类选择器
    2. 可继承的样式：font-size、color、font-family
    3. 不可继承的样式：border、padding、margin、width、height

  3. css优先级算法如何计算？

    同权重：标签内部>style标签中>外部样式表

    ​ ！important>id>class>tag

    ​ ！important比内联优先级高

  4. css新增伪类有哪些？

    after、before、enabled、disabled、checked、first-type-of

  5. 如何居中div？

    1. 水平居中：
      1. 行内元素：text-align:center;
      2. margin:0 auto;
    2. 水平垂直居中：
      1. flex布局：justify-content:center;+align-items:center;
      2. absolute+margin（子元素宽高的一半的负值）
      3. absolute+margin:auto;
      4. absolute+translate
      5. display:table-cell;+text-align:center;+vertical-align:middle;+父元素有具体的宽高

  6. display有哪些值？说明他们的做用。

    1. none：不显示，并从文档流中移除。
    2. block：块级元素类型，默认宽度是父元素的宽度，能够设置宽高，先后要换行。
    3. inline：行内元素类型，默认宽度是内容宽度，不能够设置宽高，同行显示。
    4. inline-block：默认宽度是内容宽度，能够设置宽高，同行显示。
    5. list-item：像块元素类型同样显示，并添加样式列表标记。
    6. table：此元素会做为块级表格来显示。
    7. inherit：继承父元素属性的值。

  7. position的值relative和absolute定位原点是？

    1. absolute：生成绝对定位元素，相对于position不是static的第一个父元素进行定位。
    2. relative：生成相对定位元素，相对正常位置进行定位。
    3. fixed：生成绝对定位元素，相对于浏览器窗口进行定位。（老IE不支持）
    4. static：默认值，没有定位。元素出如今正常的流中。（忽略top/bottom/left/right/z-index）
    5. inherit：从父元素继承position的值。

  8. css3有哪些新特性？

    1. 新增了不少选择器
    2. transition过渡、animation动画、transform形状转换
    3. 边框：border-radius、box-shadow、border-image
    4. 背景：background-clip、background-origin、background-size、background-break
    5. 文字效果：word-wrap、text-overflow、text-shadow、text-decoration
    6. 渐变：线性渐变、径向渐变、圆锥渐变。
    7. 字体：@font-face
    8. 用户界面：盒模型、resize、outline-offset
    9. 反射
    10. 颜色
    11. 混合模式
    12. 媒体查询
    13. 布局：flex布局、grid布局、多列布局

  9. 请解释一下css3的flex布局，以及适用场景。

    1. ​

  10. 用纯css建立一个三角形的原理是什么？

利用border，三个面的border-color设置为transparent

  1. 一个满屏“品”字布局如何设计？

  2. css多列等高如何实现？

  3. 常常遇到的浏览器的兼容性问题有哪些？缘由，解决方法？经常使用的hack技巧？

    1. 浏览器默认的margin/padding不一样。统一设置*{margin:0;padding:0;}
    2. Chrome浏览器中文界面下会将小于12px的字体强制按照12px显示。-webkit-text-size-adjust:none;
    3. IE下event对象有x/y属性，可是没有pageX/pageY属性。firefox下则反之。用条件注释的方式解决。

  4. li和li之间有看不见的空白间隔是什么缘由引发的？有什么解决办法？

  5. 为何要初始化css样式？

    由于浏览器兼容问题，不一样浏览器之间的标签默认属性值不一样。

  6. absolute的containing block(容器块)计算方式跟正常流有什么不一样？

  7. css里的visibility属性有个collapse属性值是干吗用的?在不一样浏览器下有什么区别？

  8. position跟display、margin、overflow、float这些特性相互叠加后会怎么样？

  9. 对BFC规范(块级格式化上下文)的理解？

    Block Formatting Context,BFC外部元素和内部元素互不影响。

  10. css定义的权重。

  11. 请解释一下为何须要清除浮动？清除浮动的方式。

    1. 是为了清除使用浮动元素以后产生的影响，不影响其余元素的布局。浮动的元素，高度会坍塌，高度的坍塌会使页面后面的布局不能正常显示。
    2. 清除浮动的方式：overflow:hidden; clear:both;

  12. 什么是外边距合并？

    2个相邻块级元素的垂直外边距会合并。合并的原则是取二者边距的最大值。

  13. zoom:1的清除浮动原理？

  14. 移动端的布局用过媒体查询吗？

  15. 使用css预处理器吗？喜欢哪一个？

  16. css优化、提升性能的方法有哪些？

  17. 浏览器是怎么样解析css选择器的？

  18. 在网页中应该使用奇数仍是偶数字体？为何？

  19. margin和padding分别适合什么场景使用？

  20. 抽离样式模块怎么写

  21. 元素竖向的百分比设定是相对于容器的高度吗？

  22. 全屏滚动的原理是什么?用到了css的哪些属性？

  23. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的ie?

  24. 视差滚动效果，如何给每页作不一样的动画？（回到顶部，向下滑动再次出现，和只出现一次分别怎么作？）

  25. ::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的做用。

  26. 如何修改chrome记住密码后自动填充表单的黄色背景?

  27. 对line-height的理解。

  28. 设置元素浮动后，该元素的display值是多少？

  29. 怎么让chrome支持小于12px的文字。

  30. 让页面的字体变清晰，变细，用css怎么作？

  31. font-style属性可让它赋值为“oblique”,oblique是什么意思？

  32. position:fixed;在android、ios下无效怎么处理？

    fixed元素是相对于整个页面固定位置的，移动端当页面滚动时，滚动的是viewport。

    在html头部添加viewport的设置。

  33. 若是须要手动写动画，你认为最小时间间隔是多久？为何？

    多数显示器的频率是60hz，也就是1秒钟60帧，1000/60=16.67ms。

  34. display:inline-block何时会显示间隙？

  35. overflow:scroll不能平滑滚动的问题怎么处理？

  36. 有一个高度自适应的div，里面有2个div,1个高度100px,但愿另一个填满剩下的高度。

  37. png、jpg、gif这些图片格式解释一下，分别何时用。有没有了解过webp?

  38. 什么是cookie隔离？

  39. style标签写在body后与body前有什么区别？

  40. 什么是css预处理器/后处理器？

  41. rem布局的优缺点？

  42. rem和em有什么区别？

    rem是根据根元素的font-size大小定的；em是根据父元素的font-size大小定的。

javascript面试题

  1. 介绍js的基本数据类型。

    1. number
    2. string
    3. boolean
    4. undefined
    5. null
    6. ECMAScript2015新增了Symbol(建立后独一无二且不可变的数据类型)

  2. 介绍js有哪些内置对象？

    Object是javascript中全部对象的父对象。

    数据封装类对象：Object、Number、String、Boolean、Array

    其余对象：Function、Arguments、Math、Date、RegExp、Error

  3. 说几条javascript的基本规范？

  4. javascript有几种类型的值？你能画一下他们的内存图吗？

    1. 基本数据类型:number、string、boolean、undefined、null、symbol，在栈内存中
    2. 引用类型:Object、Function，在堆内存中

  5. 如何将字符串转化为数字，例如‘12.3b’?

  6. 如何实现数组的随机排序？

    1. sort
    2. 冒泡排序：遍历数组中的元素，一次比较2个，若是顺序错误，就交换位置。
    3. 快速排序：将数组分为2部分，一部分是大于某个值，另外一部分是小于此值。(须要递归，这个值是数组中的值)
    4. 插入排序：
    5. 希尔排序：

  7. javascript建立对象的几种方式？

    1. 对象字面量：
    2. new
    3. Object.create()

  8. eval是作什么的？

  9. 什么是window对象？什么是document对象？

    1. window对象，全局对象。
    2. document对象，表明整个html文档，能够用来访问页面中的全部元素。

  10. null、undefined的区别？

null 表示一个对象是“没有值”的对象，也就是值为“空”。

undefined 表示一个变量声明了，没有赋值。

  1. 写一个通用的事件侦听器函数。

  2. ["1","2","3"].map(parseInt)答案是什么？

  3. 什么是闭包？为何要用它？

    1. 闭包就是将函数内部和函数外部链接起来的一座桥梁。
    2. 闭包的做用：
      1. 在函数外部读取函数内部的变量
      2. 将建立的变量的值始终保存在内存中，以供本地环境使用。

  4. javascript代码中的“use strict”;是什么意思？使用它的区别是什么？

    1. 是一种ECMAScript5添加的严格运行模式，这种模式使得javascript在更严格的条件下运行，可以提升编译器效率，增长运行速度。也为将来新版本的Javascript标准化作铺垫。
    2. 使js编码更加规范化的模式，消除javascript语法的一些不合理、不严谨之处，减小一些怪异行为。默认之处的糟糕特性都会被禁用，好比不能用with，也不能在乎外的状况下给全局变量赋值；全局变量的显式声明，函数必须声明在顶层，不容许在非函数代码块中声明函数，arguments.call也不容许使用；消除代码运行的一些不安全之处，保证代码运行的安全，限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同。

  5. 如何判断一个对象是否属于某个类？

    if(a instanceOf Person){
  alert("yes");
} 
复制代码

  6. new操做符具体干了什么？

  7. javascript,有一个函数，执行时对象查找时，永远不会去查找原型。

    hasOwnProperty。

  8. 对json的了解。

    json是轻量级的数据交换格式。它是javascript的一个子集，数据格式简单，易于读写，占用带宽小。

  9. ajax是什么？如何建立一个ajax?

    1. ajax全称，Asynchronous Javascript And Xml
    2. 建立XMLHttpRequest对象，也就是建立一个异步调用对象。
    3. 建立一个新的http请求，并指定请求地址，请求方法。
    4. 设置响应Http请求状态变化的函数
    5. 发送http请求
    6. 获取异步调用返回的数据
    7. 使用js和dom实现局部刷新

  10. ajax解决浏览器缓存问题？

    1. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modifier-Since","0");
    2. anyAjaxObj.setRequestHeader("Cache-Control","no-cache");
    3. url后添加随机数
    4. url后添加时间戳
    5. jquery的话$.ajaxSetup({cache:false})

  11. 同步和异步的区别？

    同步，所有在一个线程上完成，不一样进程为协同完成某项工做而在前后次序上调整(经过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

  12. 如何解决跨域问题看这

    1. 设置document.domain
    2. 有src的标签
    3. JSONP
    4. navigation ie6/7
    5. 跨域资源共享(CORS) Access-Control-Allow-Origin
    6. window.postMessage()

  13. 页面编码和被请求的资源编码不一致怎么处理？

  14. 服务器代理转发时，如何处理cookie?

  15. 模块化开发怎么作？AMD、CMD规范区别？requireJS核心原理是什么？（如何动态加载的？如何避免屡次加载？如何缓存的？）

    1. CommonJS,用在服务器端规范，node.js用的就是CommonJS
    2. AMD，Asynchronous Module Definition,异步模块定义，推崇依赖前置，RequireJs加载模块后会缓存，屡次加载后获得同一个对象。
    3. CMD，Common Module Definition,通用模块定义，推崇依赖就近，SeaJs

  16. JS模块加载器的轮子怎么造，如何实现一个模块加载器？

  17. 谈谈你对ECMAScript6的了解。

    1. 参数设置默认值
    2. 模板对象
    3. 多行字符串
    4. 解构赋值
    5. 箭头函数
    6. Promise
    7. let和const let限制块级做用域 var限制函数做用域 const限制块级做用域+定义常量
    8. Class
    9. Module export import

  18. Promise的理解？

    Promise对象有2个特色：

    1. 对象的状态不受外界影响，有3种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。
    2. 一旦状态改变，就不会再变。

    Promise构造函数接受一个函数做为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由javascript引擎提供，不用本身部署。

    const promise = new Promise(function(resolve,reject){
  //somecode
  if(/**异步操做成功*/){
     return resolve();
  }else{
  	return reject();
  }
})
复制代码

    Promise实例生成后，可使用then方法分别指定resolved状态和rejected状态的回调函数。

    promise.then(function(value){
  
},function(error){
  
})
复制代码

  19. 异步加载JS方式有哪些？

    1. script标签添加async="async"，异步加载
    2. script标签添加defer="defer"，延时加载
    3. 动态建立script标签
    4. 使用jquery:$document.ready(function(){})

  20. document.write和innerHTML的区别。

    1. document.write会重绘整个页面。
    2. innerHTML只会重绘部分页面

  21. DOM操做——怎样添加、移除、替换、插入、复制、建立和查找节点？

    1. 添加节点：appendChild()
    2. 移除节点：removeChild()
    3. 替换节点：replaceChild()
    4. 插入节点：insertBefore()
    5. 复制节点：importNode()
    6. 建立节点：createElement()、createTextNode()
    7. 查找节点：getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()

  22. 什么是伪数组？怎么转换成数组？

    1. 伪数组是一个含有length属性的json对象，它是按照索引的方式存储数据，它并不具备数组的一些方法。
    2. 经过 var 数组= Array.prototype.slice.call(伪数组); 转换成真正的数组。

  23. call()和apply()的区别？还有bind()？

    1. 三者都是用来改变this对象的指向。
    2. 第一个参数都是this要指向的对象。
    3. 三者均可以利用后续参数传参。
    4. call()和apply()对函数直接调用,当即执行；bind()返回的是函数，回调执行。
    5. call()的第二个参数开始后续参数是一一对应的，apply()第二个参数是一个数组，数组中的值和后续参数一一对应。所以当参数不肯定数量时，使用apply();

  24. 数组和对象有哪些原生方法？

    1. 数组

      方法 描述
      concat() 链接2个或更多的数组，并返回结果
      join() 把数组的全部元素放入字符串，并用指向的分隔符分隔
      pop() 删除并返回数组的最后一个元素
      push() 向数组末尾添加一个或更多的元素，并返回新的长度
      reverse() 将数组反转
      shift() 删除并返回数组的第一个元素
      slice() 从某个已有的数组返回选定的元素
      sort() 数组排序
      splice() 删除元素，并向数组添加新元素
      unshift() 向数组开头添加一个或更多元素，并返回新的数组长度
      toString() 把数组转换为字符串，并返回
      toLocaleString() 把数组转换为本地数组，并返回结果
      toSource() 返回该对象的源代码
      valueOf() 返回数组对象的原始值

    2. Object对象实例方法

      方法 描述
      valueOf() 返回当前对象对应的值。
      toString() 返回当前对象对应的字符串形式。
      toLocaleString() 返回当前对象对应的本地字符串形式。
      hasOwnProperty() 判断某个属性是否为当前对象自身的属性，仍是继承自原型对象的属性。
      isPrototypeOf() 判断当前对象是否为另外一个对象的原型。
      propertyIsEnumerable() 判断某个属性是否可枚举。

  25. ECMAScript6怎么写class,为何会出现class这东西？

    class Cat{
  constructor(name){
    this.name=name;
  }
  makeSound(){
    alert("喵喵喵");
  }
}
//必定要new
const cat = new Cat("猫");
cat.makeSound();

//表达式
const Cat = class{
  makeSound(){
    alert("喵喵喵");
  }
}

//不存在变量提高,与继承有关 
new Foo(); //ReferenceError
class Foo{}

//静态方法 静态方法中的this指向的是类，不是类的实例
//静态属性和和实例属性 尚未静态属性 提案中
复制代码

  26. JS怎么实现一个类？怎么实例化这个类？看这

    1. 构造函数法

      function Cat(){
  this.name="猫";
}

//类的属性和方法能够定义在构造函数的prototype对象上
//为何不用this.makeSound?
//若是用this.makeSound每次建立对象都会复制makeSound到这个对象上，开销大
Cat.prototype.makeSound = function(){
   alert("喵喵喵");
}

var cat = new Cat();
alert(cat.name)；
cat.makeSound();
复制代码

    2. Object.create()法 变量声明法

      var Cat = {
  name:"猫",
  makeSound:function(){
    alert('喵喵喵');
  }
}

var cat = Object.create(Cat);
alert(cat.name);
cat.makeSound();

//不兼容的老浏览器
if(!Object.create()){
  Object.create = function(o){
    function F(){
    }
    F.prototype = o;
    return new F();
  }   
}
复制代码

    3. 极简主义法

      var Cat = {
         createNew:function(){
           var cat = {};
           cat.name="猫";
           car.makeSound=function(){
             alert("喵喵喵");
           }
           return cat； 
         }
       }
    
       var cat1 = Cat.createNew();
       alert(cat1.name);
       cat1.makeSound();
复制代码

  27. 继承？

    var Animal = {
  createNew:function(){
    var animal = {};
    animal.sleep = function(){
      alert("睡觉");
    }
    return animal;
  }
}

var Cat = {
  sound:'喵喵喵',//静态属性 共享
  createNew:function(){
    var cat = Animal.createNew();
    var name = "猫";//私有属性
    cat.name= name;
    cat.makeSound = function(){
      alert(Cat.sound);
    };
    cat.changeSound = function(x){
      Cat.sound = x;
    };
    return cat;
  }
}

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.sleep();
cat1.makeSound();
cat2.makeSound();
cat1.changeSound("汪汪汪");
cat1.makeSound();
cat2.makeSound();
复制代码

  28. javascript原型、原型链？有什么特色。

    每一个对象都会在其内部初始化一个属性，就是prototype(原型)，当咱们访问一个对象的属性时，若是这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有本身的prototype，因而就这样一直找下去，也就是咱们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__

特色：
JavaScript对象是经过引用来传递的，咱们建立的每一个新对象实体中并无一份属于本身的原型副本。当咱们修改原型时，与之相关的对象也会继承这一改变。

 当咱们须要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 若是没有的话，
 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
	function Func(){}
	Func.prototype.name = "Sean";
	Func.prototype.getInfo = function() {
	  return this.name;
	}
	var person = new Func();//如今能够参考var person = Object.create(oldObject);
	console.log(person.getInfo());//它拥有了Func的属性和方法
	//"Sean"
	console.log(Func.prototype);
	// Func { name="Sean", getInfo=function()}
复制代码

  29. javascript做用域链？

    当查找变量的时候，会先从当前上下文的变量对象中查找，若是没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫作做用域链。

  30. javascript中的做用域与变量声明提高?

    全局做用域和局部做用域。

    变量声明提高，变量会先声明，在任意代码执行前先声明。

  31. 谈谈对this的理解。

    1. this,指向函数的直接调用者。
    2. 若是有new关键字，this指向new出来的那个对象
    3. 在事件中，this指向触发这个事件的对象，在IE的attachEvent中this老是指向全局对象。
    4. 在箭头函数中，没有本身的this,它使用执行上下文（函数或全局）的this值。
    5. apply/call/bind，this指向传递的第一个参数，若是第一个参数不传或者为null/undefined，则指向全局对象。
    6. html中，this指向html元素。

  32. 如何编写高性能的javascript？

    1. 避免循环引用，防止内存泄漏
    2. 尽可能不要使用for...in，使用for
    3. 建议对象缓存处理，特别是DOM访问
    4. 不要在函数内进行过深的嵌套判断
    5. 建议避免在函数内部返回一个未声明的变量，会污染外部变量
    6. var声明变量，建议写在多行。

  33. 哪些操做会形成内存泄漏？

    内存泄漏指的是因为疏忽或错误形成程序未能释放已经再也不使用的内存。

    垃圾回收机制2种方式：标记清除和引用计数。

    意外的全局变量引发的内存泄漏、闭包的使用不当、没有清理DOM元素的引用、被遗忘的定时器或回调、子元素存在引用父元素删除引发的内存泄漏、循环、控制台日志、EventListener

  34. What is a Polyfill?

    polyfill是一个js库，是为了抚平不一样浏览器内核之间对js实现的差别。

  35. 咱们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几回事件，会先执行冒泡仍是捕获？

    会执行2次事件，先执行捕获事件，再执行冒泡事件。

  36. 什么是事件？IE与火狐的事件机制有什么区别？

    IE事件对象只有x、y,没有pageX、pageY。

    火狐反之。

  37. 冒泡事件和捕获事件。

    1. 事件捕获是从上至下触发事件。
    2. 事件冒泡是从下至上触发事件。
    3. 绑定事件方法的第三个参数是否为事件捕获。默认为false,事件冒泡。
    4. event.stopPropagation()会阻止冒泡

  38. 什么是JS的函数节流和函数防抖？

    1. 函数节流指的是js函数必定时间内只跑一次。应用场景：页面滚动
    2. 函数防抖，频繁触发的状况下，只有足够的空闲时间，才执行代码一次。应用场景：用户注册时手机号验证和邮箱验证。

ECMAScript6相关

  1. Object.is()与原来的比较操做符“===”、“==”的区别？
  2. ES6是如何编译成ES5的？
  3. css-loader的原理？

前端框架

  1. angular2+中的编译模式？有什么区别？

    1. jit编译模式

      1. 使用typescript开发angular应用
      2. 使用tsc来编译这个应用的typescript代码
      3. 打包
      4. 压缩
      5. 部署
      6. 浏览器端下载全部代码
      7. angular启动
      8. angular在浏览器中开始jit编译过程，例如生成app中各个组件的js代码
      9. 应用页面渲染

    2. aot编译模式

      1. 使用typescript开发angular应用
      2. 使用ngc来编译应用
        1. 使用angular编译器对模板进行编译，生成typescript代码
        2. typescript代码编译成js代码
      3. 打包
      4. 压缩
      5. 部署
      6. 浏览器端下载全部代码
      7. angular启动
      8. 应用页面渲染

      二者的区别在于：

      1. 编译过程发生的时机
      2. jit生成的是js代码，aot生成的是ts代码。这是由于jit在浏览器中编译，没有必要生成ts代码，而是直接生成js代码。

其余问题

  1. Webpack热更新实现原理？
  2. Node.js的适用场景？
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程