JavaScript面试题
一、说说你对作用域链的理解
作用域链是指：当js编译器在寻找变量时，先在最近的作用域（花括号）里找，如果找不到，则朝上一级作用域（花括号）里找，依次类推，直到找到或者找不到为止。这就是作用域链。
二、JaveScript 原型,原型链?有什么特点?
1）、原型：
每个函数都会有一个属性prototype。这个属性就是原型属性。JavaScript在实现面向对象时，会经常使用原型。每个对象（实例）的有一个属性（ __ proto __）指向构造函数的prototype属性（prototype指向的内存区域）。prototype属性里保存着所有对象（实例）共享的属性和方法。
2）、原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 __ proto __ 隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的 __ proto __中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
三、请解释什么是事件代理
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
使用事件代理的好处是可以提高性能，可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒，可以实现当新增子对象时无需再次对其绑定
四、Javascript如何实现继承?
1.原型链
基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。
构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
2.借用构造函数
基本思想：在子类型构造函数的内部调用超类构造函数，通过使用call()和apply()方法可以在新创建的对象上执行构造函数。
3.组合继承
基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式。
4.原型式继承
基本想法：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型。
5.寄生式继承
基本思想：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。
6.寄生组合式继承
基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法
五、谈谈 This对象的理解
this是函数的内置对象，this是代名词，所以，this代表哪个对象，要看函数属于哪种情况。
this的指向有四种情况：
①当this所在函数是事件处理函数时，this代表事件源
②当this所在函数是构造函数时，this代表new出来的对象
③当this所在函数时类的方法时，this代表调用方法的对象。
④当this所在函数没有明确的所属对象，this代表window对象。
另外：箭头函数根本没有自己的this，它内部的this就是外层代码块的this
补充：
其实，this表示什么意思，更多要看调用，要看运行。因为在调用时，有可能this的指向会被改变。
六、如何解决跨城问题?
1、jsonp 可以使用jsonp来完成跨域，本质上是利用HTML标签的 src属性可以跨域的特性
2、CORS
3、反向代理
七、谈谈你对webpack的看法
Webpack是一个模块打包工具，你可以使用Webpack管理你的模块依赖，并编译输出模块们所需要的静态文件。它能够很好的管理，打包web开发中所用到的HTML，Javascript，CSS以及各种静态文件（图片，字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。Webpack模块打包器会分析模块间的依赖关系，最后，生成了优化切合并后的静态资源。
webpack的两大特色：
1.code splitting（可以自动完成）
2.loader 可以处理各种类型的静态文件，并且支持串联操作
webpack是以commonJS的形式来书写脚本的，但对AMD/CMD的支持也会很全面，方便旧项目进行代码迁移。
webpack具有requireJS的和browserify的功能，但仍有很多自己的新特性。
1.对CommonJs，AMD，ES6的语法做了兼容；
2.对js，css，图片等资源文件都支持打包。
3.串联模式加载器以及插件机制，让其具有更好的灵活性和拓展性，例如提供对CoffeeScript，ES6的支持
4.有独立的配置文件webpack.config.js
5.可以将代码切割成不同的chunk，实现按需加载，降低了初始时间
6.支持SourceUrls和SourceMaps，易于调试
7.具有强大的Plugin接口，大部分是内部插件，使用起来比较灵活。
8.webpack使用异步IO并具有多级缓存。这使得webpack很快在增量编译上更快
八、说说你对AMD和 Commonjs的理解
CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
AMD规范则是非同步加载模块，允许指定回调函数。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的
九、常见web安全及防护原理
1、sql注入原理
相信很多同学应该都会听过这个，具体就是通过把sql命令插入到web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意sql命令
防范：
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息
2、xss
xss：跨站脚本（Cross-site Scripting）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
意思就是比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
防范：
1.首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<” , ”>” , ”;” , ”’” 等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息
3、CSRF
跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
就是说冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。只要是伪造用户发起的请求，都可成为CSRF攻击。
防范：
服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。通过验证码的方法
XSS与CSRF的区别：
1.XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
2.要完成一次CSRF攻击，受害者必须依次完成两个步骤：
a.登录受信任网站A，并在本地生成Cookie。
b.在不登出A的情况下，访问危险网站B。
十、用过哪些设计模式?
-
工厂模式： 工厂模式解决了重复实例化的问题。 主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。
2.构造函数模式 使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this对象;
十一、为什么要有同源限制?
同源策略的目的就是限制不同源的document或者脚本之间的相互访问 以免造成干扰和混乱
十二、常见兼容性问题?
1）. 不同浏览器的标签默认外补丁margin和内补丁padding不同
发生概率：100%
解决方案：使用CSS通配符*，设置内外补丁为0
*{ margin: 0; padding: 0;}
2）. 块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）
发生概率：90%
解决方案：在float标签样式控制中加入display:inline;
3）. 设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度
发生概率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
4）. 行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）
发生概率：20%
解决方案：在display:block;后面加上display:inline;display:table;
5）. 图片默认有间距
发生概率：20%
解决方案：使用float为img布局
6）. 标签最低高度设置min-height不兼容
发生概率：5%
解决方案：例如要设置一个标签的最小高度为200px
{ min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;}
7）. 透明度兼容设置
发生概率：主要看你要写的东西设不设透明度
解决方案：一句话
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
8）. Box Model的bug
描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。
9）. IE6中的列表li楼梯状bug
描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。
解决办法：
ul li{float:left;}
或 ul li{display:inline;}
10）.li空白间距
描述：在IE下，会增加li和li之间的垂直间距
解决办法：给li里的a显式的添加宽度或者高度
li a{width:20px;}
或者
li a{display:block;float:left;clear:left;}
或者
li {display:inline;}
li a{display:block;}
11）.overflow：auto;和position:relative的碰撞
描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。
解决方案：给父元素也设置position:relative;
12）.浮动层的错位
描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。
解决方案：overflow：hidden;
13）.IE的图片缩放
描述：图片在IE下缩放有时会影响其质量
解决方案：img{ -mg-interpolation-mode:bicubic;}
14）.
在iframe调用的content.html页面中设置
body{background-color: transparent;}
15）.禁用IE默认的垂直滚动条
解决方案：
html{
overflow:auto;
}
十三、JS 数组和对象的遍历方式,以及几种方式的比较
for in循环 for循环 forEach
-
这里的 forEach回调中两个参数分别为 value，index，其位置刚好和 jQuery 的$.each 相反；
-
forEach 无法遍历对象；
-
IE不支持该方法；Firefox 和 chrome 支持；
-
forEach 无法使用 break，continue 跳出循环，且使用 return 是跳过本次循环；
-
可以添加第二个参数，为一个数组，回调中的 this 会指向这个数组，若没有添加，则是指向 window；
十四、说说你对promise的了解
概述：
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息
作用：
（1）、避免回调地狱的问题
（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易
Promise有三种状态：
pendding ：正在进行中，
rejected ：失败，
resolved ： 成功
基础用法：
new Promise(function(resolve,reject){undefined
异步代码
})
十五、Node的应用场景
1、RESTful API
这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。
2、 统一Web应用的UI层
目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。
3、大量Ajax请求的应用
例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。
4、实时交互、高并发量的web应用程序；
5、基于web、canvas等多人联网游戏。
总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。
十六、web开发中会话跟踪的方法有哪些
会话跟踪：主要解决HTTP的无状态问题
1.Cookie：
可以使用 cookie 存储购物会话的 ID；在后续连接中，取出当前的会话 ID，并使用这个 ID 从服务器上的查找表（lookup table）中提取出会话的相关信息。 2.URL重写：
采用这种方式时，客户程序在每个URL的尾部添加一些额外数据。这些数据标识当前的会话，服务器将这个标识符与它存储的用户相关数据关联起来。 URL重写是比较不错的会话跟踪解决方案，即使浏览器不支持 cookie 或在用户禁用 cookie 的情况下，这种方案也能够工作。
URL 重写具有 cookie 所具有的同样缺点，也就是说，服务器端程序要做许多简单但是冗长乏味的处理任务。即使有高层的 API 可以处理大部分的细节，仍须十分小心每个引用你的站点的 URL ，以及那些返回给用户的 URL。即使通过间接手段，比如服务器重定向中的 Location 字段，都要添加额外的信息。这种限制意味着，在你的站点上不能有任何静态 HTML 页面（至少静态页面中不能有任何链接到站点动态页面的链接）。因此，每个页面都必须使用 servlet 或 JSP 动态生成。即使所有的页面都动态生成，如果用户离开了会话并通过书签或链接再次回来，会话的信息也会丢失，因为存储下来的链接含有错误的标识信息。
3.隐藏的表单域：
HTML 表单中可以含有如下的条目：
这个条目的意思是：在提交表单时，要将指定的名称和值自动包括在 GET 或 POST 数据中。这个隐藏域可以用来存储有关会话的信息，但它的主要缺点是：仅当每个页面都是由表单提交而动态生成时，才能使用这种方法。单击常规的超文本链接并不产生表单提交，因此隐藏的表单域不能支持通常的会话跟踪，只能用于一系列特定的操作中，比如在线商店的结账过程。 4.session:
信息保存在服务器端
使用 setAttribute(String str,Object obj)方法将对象捆绑到一个会话
5.ip地址：
十七、介绍js 的基本数据类型
ECMAScript中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。
其中Undefined、Null、Boolean、Number都属于基本类型。Object、Array和Function则属于引用类型，String有些特殊
十八、介绍js有哪些内置对象?
javascript内置对象有String对象、Array对象、Date对象、Boolean对象、Number对象、Math对象等。对象包含属性和方法两个要素。
JavaScript常见内置对象：
String对象：字符串对象，提供了对字符串进行操作的属性和方法。
Array对象：数组对象，提供了数组操作方面的属性和方法。
Date对象：日期时间对象，可以获取系统的日期时间信息。
Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)
Number对象：数值对象。一个数值变量就是一个数值对象。
Math对象：数学对象，提供了数学运算方面的属性和方法。
Object对象、RegExp对象、 Global对象、Function对象。
对象包含两个要素：
1、用来描述对象特性的一组数据，也就是若干变量，通常称为属性。
2、用来操作对象特性的若干动作，也就是若干函数，通常称为方法。
十九、说几条写JavaScript的基本规范?
1、不要在同一行声明多个变量
2、使用===或!==来比较
3、使用字面量的方式来创建对象、数组，替代new Array这种形式
4、不要使用全局函数
5、switch语句必须要带default分支
6、函数不应该有的时候有return，有的时候没有return
7、fon-in循环中的变量，用var关键字说明作用域，防止变量污染
8、变量的声明遵循驼峰命名法，用let替代val，声明构造函数时首字母大写，定义常量的时候尽量用大写字母，用_分割
9、三元表达式可以替代if语句
10、&&和||是可以短路的，使用&&时如果前面一个值是错的，那么后面的值不用判断，使用||时，如果前面一个值是对的，那么后面的值不用判断
11、比较数据类型以下6中情况是false，其他都是true------false、""、0、null、undefined、NaN
12、数据类型检测用typeof，对象类型检测用instanceof
13、异步加载第三方的内容
14、单行注释//，多行注释/**/
15、使用命名空间解决变量名冲突
16、多人协作开发，新建一个js文件，const声明常量，在js文件中引用，用常量名替代方法名，这样做可以防止命名冲突
二十、JavaScript有几种类型的值?，你能画一下他们的内存图吗?
栈：原始数据类型（Undefined Null Boolean Number String）
堆：引用数据类型（对象、数组、函数）
原始数据
引用数据
二十一、eval是做什么的?
eval（）的作用：
把字符串参数解析成JS代码并运行，并返回执行的结果；
二十二、null,undefined、的区别?
undefined:定义变量后，没有赋值
null:对象没有引用的值，即就是引用类型里没有存储地址
二十三、javascript代码由的"usestric".是什么意思?使用它区别是什么?
"use strict";是一个字符串字面量，用来指定代码运行于严格模式下。在严格模式下远行代码有很多限制，也有很多好处，比如：变量在使用前必须声明，这可以防止无意中使用了未声明的变量； 函数中的this不再是引用全局对象（window），而是undefined，这可以消除以前代码中的一些古怪行为，代码会变得更严谨（尤其是当函数是作为构造函数时，获得的好处更明显）
二十四、谈谈你对JSON 的了解?
JSON 结构有两种结构
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
二十五、js 延迟加载的方式有哪些?
1）、defer 属性
HTML 4.01 为