面试必问JavaScript基础面试题（附答案详解）

文章目录

前言

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

1、JavaScript的数据类型有哪些？

• 基本数据类型： 字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、Symbol。
• 引用数据类型： 对象(Object)、数组(Array)、函数(Function)。

注意：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

2、null，undefined的区别？

• null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
• undefined表示声明的变量未初始化，转换为数值时为NAN。

3、JS中变量的作用域是什么？

变量的作用域是程序中定义它的区域，JS变量只有两个作用域：

• 全局变量 ：全局变量具有全局作用域，这意味着它在JS代码中的任何位置都可见
• 局部变量 ：局部变量仅在定义它的函数中可见，函数参数始终是该函数的本地参数。

4、说说var、let、const之间的区别?

区别一：作用域

• 用 var 声明的变量的作用域是它当前的执行上下文，即如果是在任何函数外面，则是全局执行上下文，如果在函数里面，则是当前函数执行上下文。换句话说，var 声明的变量的作用域只能是全局或者整个函数块的。
• let 声明的变量的作用域则是它当前所处代码块，即它的作用域既可以是全局或者整个函数块，也可以是 if、while、switch等用{}限定的代码块。另外，var 和 let 的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用。

区别二：定义变量

• var定义变量时，存在变量的默认提升功能，而let和const没有
• var 定义变量是可以重复定义，而let和const不可以重复定义（同时定义一个变量时）
• var定义变量时会自动挂载在Windows对象上，而let和const不会
• let存在暂时死去问题

区别三：let与const区别

• const声明的是一个只读变量，声明之后不允许改变其值，因此const一旦声明必须初始化，否则会报错

5、栈和堆的区别？

• 栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；
• 堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。

6、Javascript实现继承的几种方式？

Javascript实现继承有三种方式：

• 方式一：构造函数法（又叫经典继承）

functionSuperType(name){this.name = name;this.sayName=function(){
        window.alert(this.name);};}functionSubType(name, age){SuperType.call(this, name);//在这里借用了父类的构造函数this.age = age;}

• 方式二：对象冒充

functionSuperType(name){this.name = name;this.sayName=function(){
        window.alert(this.name);}}functionSubType(name, age){this.supertype = SuperType;//在这里使用了对象冒充this.supertype(name);this.age = age;}

• 方式三：组合继承（最常用）

functionSuperType(name){this.name = name
}SuperType.prototype ={sayName:function(){
        window.alert(this.name);}};functionSubType(name, age){SuperType.call(this, name);//在这里继承属性this.age = age;}SubType.prototype =newSuperType();//在原型上继承方法

7、谈谈this的理解？

• this总是指向函数的直接调用者（而非间接调用者）
• 如果有new关键字，this指向new出来的那个对象
• 在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。
• 详解…

8、什么是window对象? 什么是document对象?

• window对象：代表浏览器中打开的一个窗口；
• document对象：代表整个html文档。实际上，document对象是window对象的一个属性。

9、什么是闭包（closure），说说优缺点?

闭包：指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量；外层变量不会被垃圾回收机制回收。
注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值。
优缺点：

• 优点：避免全局变量污染。
• 缺点：容易造成内存泄漏。

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

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

11、 JS延迟加载的方式有哪些？

一般有六种方式；defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。

• defer属性：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。
• async属性：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行；
• 动态创建dom方式
• 使用jquery的getScript方法：getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法：jQuery.getScript(url,success(response,status))

• 使用setTimeout延迟方法
• 让js最后加载　将脚本元素放在文档体的底端（</body>标签前面），这样脚本就可以在HTML解析完毕后加载了。但此方案的问题是，只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站，可能会带来显著的性能损耗。

12、同步和异步的区别?

同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。

• 同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
• 异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

13、call和applyd的区别？

call（）方法和apply（）方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。
区别：

• 在使用call（）方法时，传递给函数的参数必须逐个列举出来
• 使用apply（）时，传递给函数的是参数数组。

14、documen.write和 innerHTML的区别？

• document.write()只能重绘整个页面

setTimeout(function(){
       document.write('<p>5 secs later</p>');},5000);

或者

window.onload = function(){ document.write("HI");

• innerHTML可以重绘页面的一部分

15、数组对象有哪些原生方法，列举一下？

pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some

总结

以上就是今天所整理的内容，本文仅仅简单介绍了前端面试关于JavaScript面试题的一部分题，后续会更新更多关于前端的知识，喜欢关注收藏加关注！