前端面试问题-JavaScript

1 闭包

• 闭包就是能够读取其他函数内部变量的函数
• 闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域
• 闭包的特性：
  • 函数内再嵌套函数
  • 内部函数可以引⽤外层的参数和变量
  • 参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

• 使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产⽣作⽤域的概念
• 闭包 的最⼤⽤处有两个，⼀个是可以读取函数内部的变量，另⼀个就是让这些变量始终保持在内存中
• 闭包的另⼀个⽤处，是封装对象的私有属性和私有⽅法
• 好处：能够实现封装和缓存等；
• 坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题

使⽤闭包的注意点

• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在IE中可能导致内存泄露
• 解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除

2 说说你对作⽤域链的理解

• 作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能向上访问，变量访问到 window 对象即被终⽌，作⽤域链向下访问变量是不被允许的
• 简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和⽣命周期

3 JavaScript原型，原型链 ? 有什么特点？

• 每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的属性时
• 如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃⼰的 prototype ，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念
• 关系： instance.constructor.prototype = instance.proto
• 特点：
  • JavaScript 对象是通过引⽤来传递的，我们创建的每个新对象实体中并没有⼀份属于⾃⼰的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变
• 当我们需要⼀个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的
• 就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 内建对象

4 请解释什么是事件代理

• 事件代理（ Event Delegation ），⼜称之为事件委托。是 JavaScript 中常⽤绑定事件的常⽤技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使⽤事件代理的好处是可以提⾼性能
• 可以⼤量节省内存占⽤，减少事件注册，⽐如在 table 上代理所有 td 的 click 事件就⾮常棒
• 可以实现当新增⼦对象时⽆需再次对其绑定

5 Javascript如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷⻉继承
• 原型 prototype 机制或 apply 和 call ⽅法去实现较简单，建议使⽤构造函数与原型混合⽅式

function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

6 谈谈This对象的理解

• this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）
• 如果有 new 关键字， this 指向 new 出来的那个对象
• 在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的this 总是指向全局对象 Window

7 事件模型

W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段（ targetin ）、冒泡阶段（ bubbling ）

• 冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发
• 捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发
• DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件
• 阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble =true
• 阻⽌捕获：阻⽌事件的默认⾏为，例如 click - 后的跳转。在 W3c 中，使⽤preventDefault() ⽅法，在 IE 下设置 window.event.returnValue = false

8 new操作符具体⼲了什么呢?

• 创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型
• 属性和⽅法被加⼊到 this 引⽤的对象中
• 新创建的对象由 this 所引⽤，并且最后隐式的返回 this

9 Ajax原理

• Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据
• Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核⼼机制

/** 1. 创建连接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 连接服务器 **/
xhr.open('get', url, true)
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else {
/** false **/
fail && fail(xhr.status);
}
}
}

ajax 有那些优缺点?

• 优点：
  • 通过异步模式，提升了⽤户体验.
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占⽤.
  • Ajax 在客户端运⾏，承担了⼀部分本来由服务器承担的⼯作，减少了⼤⽤户量下的服务器负载。
  • Ajax 可以实现动态不刷新（局部刷新）
• 缺点：
  • 安全问题 AJAX 暴露了与服务器交互的细节。
  • 对搜索引擎的⽀持⽐较弱。
  • 不容易调试。

10 如何解决跨域问题?

⾸先了解下浏览器的同源策略 同源策略 /SOP（Same origin policy） 是⼀种约定，由Netscape公司1995年引⼊浏览器，它是浏
览器最核⼼也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS 、 CSFR 等攻击。所谓同源是指"协议+域名+端⼝
"三者相同，即便两个不同的域名指向同⼀个ip地址，也⾮同源

那么怎样解决跨域问题的呢？

• 通过jsonp跨域

document.domain + iframe跨域
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执⾏函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执⾏函数
function onBack(res) {
alert(JSON.stringify(res));
}

• document.domain + iframe跨域

  此⽅案仅限主域相同，⼦域不同的跨域应⽤场景
  

1.）⽗窗⼝：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>

2.）⼦窗⼝：(http://child.domain.com/b.html)

document.domain = 'domain.com';
// 获取⽗窗⼝中变量
alert('get js data from parent ---> ' + window.parent.user);

• nginx代理跨域
• nodejs中间件代理跨域
• 后端在头部信息⾥⾯设置安全域名

11 模块化开发怎么做？

• ⽴即执⾏函数,不暴露私有成员

var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();

12 异步加载JS的⽅式有哪些？

• defer，只⽀持 IE
• async ：
• 创建 script ，插⼊到 DOM 中，加载完毕后 callBack

13 那些操作会造成内存泄漏？

• 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
• setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏
• 闭包使⽤不当

14 XML和JSON的区别？

• 数据体积⽅⾯
  • JSON 相对 于XML 来讲，数据的体积⼩，传递的速度更快些。
• 数据交互⽅⾯
  • JSON 与 JavaScript 的交互更加⽅便，更容易解析处理，更好的数据交互
• 数据描述⽅⾯
  • JSON 对数据的描述性⽐ XML 较差
• 传输速度⽅⾯
  • JSON 的速度要远远快于 XML

15 谈谈你对webpack的看法

• WebPack 是⼀个模块打包⼯具，你可以使⽤ WebPack 管理你的模块依赖，并编绎输出模块们所需的静态⽂件。它能够很好地管理、打包 Web 开发中所⽤到的 HTML 、Javascript 、 CSS 以及各种静态⽂件（图⽚、字体等），让开发过程更加⾼效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后 ⽣成了优化且合并后的静态资源