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 模块打包器会分析模块间的依赖关系,最后 ⽣成了优化且合并后的静态资源