offer收割攻略，Web前端面试真题JavaScript系列(带详解)

Posted 2021-09-12 静Yu

临近秋招，不少小伙伴开始了求职之路，面试是十分重要的考验，其次也离不开面试题。网上的面试题零零散散，十分混乱，正好我抽时间帮助大家总结一下。难易程度肯定是从简到难，今天是第一篇的续集——基础篇中的javascript部分。

面试题来源是我从网上花钱购买的真题，是有专人亲自面试总结出来的精题，也是高频问题。

是一套完整的面试题库，如果有小伙伴需要可以下载。（面试题900题+公司实战面试题400问）

♥♥♥完整面试题库♥♥♥

JavaScript部分

1 闭包

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

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

使用闭包的注意点
1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
2.解决方法是，在退出函数之前，将不使用的局部变量全部删除 

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

1.作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的
2.简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

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

1.每个对象都会在其内部初始化一个属性，就是 prototype (原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个prototype 又会有自己的 prototype ，于是就这样一直找下去，也就是我们平时所说的原型链的概念
2.关系： instance.constructor.prototype = instance.__proto__
3.特点：
        JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变
4.当我们需要一个属性的时， 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 ）

1.冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
2.捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
3.DOM 事件流：同时支持两种事件模型：捕获型事件和冒泡型事件阻止冒泡：在 W3c 中，使用 stopPropagation() 方法；在IE下设置 cancelBubble =true
4.阻止捕获：阻止事件的默认行为，例如 click - <a> 后的跳转。在 W3c 中，使用preventDefault() 方法，在 IE 下设置 window.event.returnValue = false

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

1.创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2.属性和方法被加入到 this 引用的对象中

3.新创建的对象由 this 所引用，并且最后隐式的返回 this

9 哪些操作会造成内存泄漏？

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

10 XML和JSON的区别？

1.数据体积方面
        JSON 相对 于XML 来讲，数据的体积小，传递的速度更快些。
2.数据交互方面
        JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互
3.数据描述方面
        JSON 对数据的描述性比 XML 较差
4.传输速度方面
        JSON 的速度要远远快于 XML

11 谈谈你对webpack的看法

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

12 用过哪些设计模式？

工厂模式：
       工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法主要好处就是可以消除对象间的耦合，通过使用工程方法而不是 new 关键字

构造函数模式：
        使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this 对象;

13 为什么要有同源限制？

1.同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
2.举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。

14 你觉得jQuery源码有哪些写的好的地方

jquery 源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通
过传入window 对象参数，可以使 window 对象作为局部变量使用，好处是当 jquery 中
访问 window 对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问
window对象。同样，传入 undefined 参数，可以缩短查找 undefined 时的作用域链 jquery 将一些原型属性和方法封装在了 jquery.prototype 中，为了缩短名称，又赋值给了 jquery.fn ，这是很形象的写法有一些数组或对象的方法经常能使用到， jQuery 将其保存为局部变量以提高访问速度 jquery 实现的链式调用可以节约代码，所返回的都是同⼀个对象，可以提高代码效率

15 vue、react、angular

1.Vue.js 一个用于创建 web 交互界面的库，是一个精简的 MVVM 。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters
2.AngularJS 是一个比较完善的前端 MVVM 框架，包含模板，数据双向绑定，路由，模块
化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富的 Angular 指令
3.react React 仅仅是 VIEW 层是 facebook 公司。推出的一个用于构建 UI 的一个库，能够实现服务器端的渲染。用了 virtual dom ，所以性能很好。

16 哪些操作会造成内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

17 web开发中会话跟踪的方法有哪些

cookie
session
url 重写
隐藏 input
ip 地址

18 介绍js的基本数据类型

Undefined 、 Null 、 Boolean 、 Number 、 String

19 介绍js有哪些内置对象

Object 是 JavaScript 中所有对象的⽗对象
数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String
其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

20 javascript创建对象的几种方式

javascript 创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用 JSON ；但写法有很多种，也能混合使用

1.对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2.用function 来模拟无参的构造函数

function Person(){}
var person=new Person();//定义⼀个function，如果使⽤new"实例化",该function可
person.name="Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();

3.用 function 来模拟参构造函数来实现（用 this 关键字定义构造的上下文属性）

function Pet(name,age,hobby){
this.name=name;//this作⽤域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
}
}
var maidou =new Pet("⻨兜",25,"coding");//实例化、创建对象
maidou.eat();//调⽤eat⽅法

4.用工厂方式来创建（内置对象）

var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();

5.用原型方式来创建

function Dog(){}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();

6.用混合方式来创建

function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();

下集预告：jQuery部分

关注专栏，更新不断，祝你轻松拿offer