前端开发实习面试题（JavaScript篇）

秒速五厘米 2022-12-07 01:58 234阅读 0赞

**目录**

1.js有哪些数据类型？

2.说一下对闭包的理解，有什么运用场景？

3.对js中原型及原型链的理解

4.对作用域链的理解

5.介绍一下你对浏览器内核的理解？常见浏览器的内核是什么？

6.js中var和let和const的区别

--------------------

## 1.js有哪些数据类型？ ##

**JavaScript数据类型：**

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

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

**JavaScript 拥有动态类型：**

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

参考链接：[https://www.html.cn/qa/javascript/11572.html][https_www.html.cn_qa_javascript_11572.html]

## 2.说一下对闭包的理解，有什么运用场景？ ##

闭包是指有权访问另外一个函数作用域中变量的函数，创建闭包的常见的方式就是在一个函数内部创建另外一个函数访问这个函数的局部变量，利用闭包可以突破作用域链。

闭包的特性：

1.  函数内再嵌套函数
2.  内部函数可以引用外层的参数和变量
3.  参数和变量不会被垃圾回收机制回收

闭包的应用场景：

当我们使用计时器的时候setTimeout(function()\{\},1000)的时候，第一个参数是一个函数，或者是一段执行的js代码，第二参数是第一个参数执行的时间间隔。

当我们需要往第一个参数（这里针对第一个参数是一个函数的情况）是一个函数，需要往这个函数传递参数的时候，这时就可以使用闭包。

## 3.对js中原型及原型链的理解 ##

当我们创建一个函数的时候，每个函数会自动生成一个原型（prototype）属性；在函数中就只有这一个原型属性，而这个属性是一个指针，指向一个对象，称为原型对象，原型对象中含有一个constructor属性，通过这个属性又可指回函数。当我们向函数中添加属性时，实际上添加到了原型对象之中，当我们用new操作符创建新实例时，这个新实例是可以共享原型对象中的属性的。当我们向新实例中添加属性时，属性被保存到了新实例中，当向新实例中添加和原型中一模一样的属性时，这个属性会覆写原型中的属性。

每个对象都会在其内部初始化一个属性，就是`prototype`(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去`prototype`里找这个属性，这个`prototype`又会有自己的`prototype`，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：`instance.constructor.prototype = instance.`\_\_proto\_\_

特点：

*  `JavaScript`对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
 *  当我们需要一个属性的时候，`Javascript`引擎会先看当前对象中是否有这个属性， 如果没有的，就会查找他的`Prototype`对象是否有这个属性，如此递推下去，一直检索到 `Object` 内建对象

## 4.对作用域链的理解 ##

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

## 5.介绍一下你对浏览器内核的理解？常见浏览器的内核是什么？ ##

*  主要分成两部分：渲染引擎(`layout engineer`或`Rendering Engine`)和`JS`引擎
 *  渲染引擎：负责取得网页的内容（`HTML`、`XML`、图像等等）、整理讯息（例如加入`CSS`等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
 *  `JS`引擎则：解析和执行`javascript`来实现网页的动态效果
 *  最开始渲染引擎和`JS`引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。  
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。  
常见的浏览器内核：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

不同浏览器的默认样式存在差异，可以使用 `Normalize.css` 抹平这些差异。

## 6.js中var和let和const的区别 ##

*  var声明的变量会挂载在window上，而let和const声明的变量不会
 *  var声明变量存在变量提升，let和const不存在变量提升；let和const声明的变量不可在声明之前调用，必须先定义再使用，否则会报错，而var则是undefined，因为它的声明提升到当前作用域的头部
 *  let和const声明形成块级作用域，而var没有块级作用域，所以var声明在for循环中的变量，跳出for循环同样可以使用
 *  同一作用域下let和const不能声明同名变量，而var可以
 *  const一旦声明必须赋值,不能使用null占位；声明后变量值不能再修改；但如果声明的是复合类型数据，可以修改其属性，但必须是通过下标或者属性的方式修改，而不能重新赋值变量
 *  let定义的变量可以修改，如果不初始化会输出undefined，不会报错
 *  var定义的变量可以修改，如果不初始化会输出undefined，不会报错

var a = 1;
    // var a;//不会报错
    console.log('函数外var定义a：' + a);//可以输出a=1
    function change(){
    a = 4;
    console.log('函数内var定义a：' + a);//可以输出a=4
    } 
    change();
    console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4
    
    let a;
    console.log(a);//undefined
    
    const a;//报错
    
    for(var i=0;i<=1000;i++){ 
    var sum=0; 
    sum+=i; 
    } 
    alert(sum);//正常输出
    
    let a = 1;
    a = 2;
    console.log(a);//2
    
    const a = [1,2];
    // a = 1;//报错
    a[2] = 3;//可以修改a
    console.log(a);//[1, 2, 3]

let c = 3;
    console.log('函数外let定义c：' + c);//输出c=3
    function change(){
    let c = 6;
    console.log('函数内let定义c：' + c);//输出c=6
    } 
    change();
    console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

const b = 2;//正确
    // const b;//错误，必须初始化 
    console.log('函数外const定义b：' + b);//有输出值
    // b = 5;
    // console.log('函数外修改const定义b：' + b);//无法输出

以上皆是本人目前在广州找实习期间亲身经历过的面试题中的JavaScript问题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[https_www.html.cn_qa_javascript_11572.html]: https://www.html.cn/qa/javascript/11572.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221123/d857269f24d245338cc7cffb6c9ee437.png
[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF