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

柔情只为你懂 2022-09-08 15:44 149阅读 0赞

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

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

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

♥♥♥[完整面试题库][Link 1]♥♥♥

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70][]

# 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 #

[Link 1]: https://download.csdn.net/download/qq_46285118/21426432?spm=1001.2014.3001.5503
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2Mjg1MTE4_size_16_color_FFFFFF_t_70]: /images/20220829/c174055f5dad42ac970c16f6449a3b27.png