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)文章来源：https://www.toymoban.com/news/detail-557605.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)文章来源地址https://www.toymoban.com/news/detail-557605.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 模块打包器会分析模块间的依赖关系，最后 ⽣成了优化且合并后的静态资源
到了这里，关于前端面试问题-JavaScript的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
