JavaScript 前端面试题目总结

JavaScript高级进阶教程学习视频
单个面试题目视频讲解
前端面试总结——JavaScript

一、关于类和对象

1、面向对象、重载、多态（重写）

① 面向对象

1.函数式(过程化)，2.面向对象(OOP)。
面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。
当函数作为构造函数时，prototype则起到类似class的作用。

② 重载和多态

2、如何新建一个对象（通过类/构造函数）

【JS】创建对象的6种方式总结

• js和其它语言一样，一切对象的基类都是Object，所以，new Object()和简易的{}是同样的空对象，就是默认的对象。
• 但是这如果想利用模板，创造很多对象，就需要构造函数
• 构造函数：首字母要大写，要跟new一起使用才有意义

3、构造函数中的new做了什么

4、构造函数的实例成员和静态成员

• 实例成员：必须要通过实例对象来进行访问（构造函数内部有this的）
  构造函数内部：Star{this.name=name},实例化一个ldh对象来访问：ldh.name
• 静态成员：Star.sex(直接通过构造函数访问)

二 、原型、原型链

1、原型

构造函数的属性prototype——原型

• es6 才提出了类的概念：之前使用构造函数和原型模拟类
• 构造函数有一个属性：prototype，在这个属性中一般定义一些公共的方法（公共属性定义到构造函数内部）—————避免内存浪费问题（创造一个对象就会在内存创造一些变量）
  

对象的属性__proto__

• 对象原型__proto__和原型对象prototype是等价的
• 但是__proto__是一个非标准的属性，所以不能用这来赋值，只是提供一个线路，最终还是要沿着
  对象——构造函数——构造函数prototype属性（查找）
  
  

隐式原型、显式原型

原型对象prototype的属性constructor

• 用处：指向构造函数
• ① 直接在原型上添加属性，② 覆盖了原型的所有内容，所以需要重写constructor属性（指向构造函数）
  

2、原型链

想找一个实例对象是不是存在某种属性

• 在这个对象自己身上找
• 通过__proto__属性，去 构造函数的 原型对象prototype上找
• 在 原型对象上也有一个__proto__属性，指向这个对象（一级原型对象）的原型对象（二级原型对象上找）
• 最顶级的原型对象是object（object的__proto__指向null）

三 、this相关

1、 this的指向

2、改变(函数)this的指向:call、apply和bind方法

参考1
参考2

用法

例子一

例子二

区别

apply

bind

四、继承

组合继承(类与类的方法)

详解JS继承，从原理入手到 五种js 实现继承方式

• 通过构造函数(继承父类属性)+原型对象(父类方法)

通过构造函数继承(继承父类属性)

  `function Parent(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // (该属性，强调私有)
}
function Child(name, like) {
    Parent.call(this, name, like) // 核⼼ 第一个参数是this现在指向哪里+name(父函数的参数)
    this.like = like;//孩子可以添加自己的属性
}`

通过原型对象(继承父类方法)

Parent.prototype.say = function () { // --- 将需要复⽤、共享的⽅法定义在⽗类原型上
    console.log('hello')
}

Child.prototype = new Parent() // 核⼼ 第⼀次
Child.prototype.constructor = Child // 修正constructor指向

组合继承优化

// 核⼼ 通过创建中间对象，⼦类原型和⽗类原型，就会隔离开。不是同⼀个啦，有效避免了⽅式4的缺点。
Child.prototype = Object.create(Parent.prototype)
// 这⾥是修复构造函数指向的代码
Child.prototype.constructor = Child

es6通过类继承

super必须放到this之前

    class Parent {
      constructor(name) {
        this.name = name;
      }
      getName() {}
    }
 
    class Child extends Parent {
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      getAge() {}
    }
    let person = new Child('Demi', 24)
    console.log(person) // {name: 'Demi', age: 24}

五、深拷贝、浅拷贝

面试题：深拷贝和浅拷贝(超级详细，有内存图)
深拷贝和浅拷贝区别

• 深拷贝和浅拷贝主要是针对对象的属性是对象（引用类型）
  

1、浅拷贝

• 只拷贝一层（对象只拷贝地址）
  手写浅拷贝（循环）：正常数值正常拷贝，对于对象——只拷贝地址（改变任何一份，都会改变这个对象的值）
  

2、深拷贝

六、闭包

1、闭包的定义

闭包的解释

2、闭包的作用（优点和缺点）

• 闭包的作用就是：延伸了变量的作用范围
  使得在函数外部也能访问函数内部的局部变量
  并且不会立刻销毁，而是在所有引用结束之后销毁
  
  

3、什么时候使用闭包

使用场景：闭包一般的用途在，轮播、幻灯片，setInterval（实现定时调用）
拉勾网顶部轮播图的实现（一）以及简单闭包的应用
比如：

// 计数器
var f1 = function () {
   var count = 0;
   return function () {
       return ++count;
   }
};

var fun = f1()

fun();  // 1
fun();  // 2

Window setInterval() 方法

七、 事件流，事件冒泡和事件捕获

浅谈事件冒泡和事件捕获——有具体易于理解的例子

1、事件、事件流的概念（分类）

事件是交互（浏览器和文档）
冒泡：子级元素先触发，父级元素后触发
捕获：父级元素先出发，子级元素后触发

2、 为什么要有冒泡和捕获两种事件流机制

第1个问题:为什么要有冒泡和捕获，自然各自有各自的应用场景。
比如有parent，child两个父级关系的div。

• 我在child上点击，但是我只想让child接收这个事件，那么需要用到的是冒泡机制，用捕获机制是没办法处理这个问题的，因为捕获的话肯定得先经过parent，所以你如果在parent绑定了事件，自然也就触发了。
• 而如果我只想想parent处理这个事件，不想child去处理，那么就需要用到捕获机制。用冒泡的话，事件先到达child，自然是不行的。
  and 比如点击一个全选按钮,要选择所有的列表项,则要进行事件冒泡捕获列表的整个父div然后选中
  所以设计两种事件触发机制，来源于应用场景的需要。

3、阻止冒泡

• 在子元素的div中加入
  
  

4、事件委托

事件委托详解

八、js的数据类型问题

JS有什么数据类型 如何转换

九、DOM、BOM常用的API

1、DOM（文档对象模型）

JavaScript核心内容——webAPI、Bom、Dom学习记录

删除：removeChild
节点修改 appendChild insertBefore RemoveChild replaceChild
属性操作： setAttribute（新建属性） getAttribute（获得属性）

2、BOM（浏览器对象模型）

BOM详细-window对象

Window.history
history对象可以通过参数向前，向后，或者向指定URL跳转
history.go()：接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转
history.forward()：向前跳转一个页面
history.back()：向后跳转一个页面
history.length：获取历史记录数

Window.location
location：指代当前窗口正在访问的 url 地址对象
方法：
location.reload()：刷新当前页面
location.assign(url)：实现页面的跳转（有历史记录）
location.replace()：无历史记录的页面跳转

Window.navigator
navigator对象包含有关浏览器的信息。（了解即可）
userAgent：使用的终端
appName 浏览器名称
appVersion 浏览器版本
platform操作系统

十、es6的新特性

JavaScript中 es6的新特性的总结

十一、promise知识点

JS中的promise对象是什么，是如何实现异步的，async和await是什么

十二 、 CSS、js、http、webpack前端性能优化

① JS和CSS的引入/写入位置应该放在哪里？

1）js

JS和CSS的引入/写入位置应该放在哪里？

2）css

html代码里，css和script都要放在body标签里面吗
css和js文件可以写在body中吗
CSS分行内样式、内嵌样式、外部式

② html、css、js文件的解析顺序

• html文件——边请求边解析的，不是等信息请求完之后再解析的，js和css文件都有可能在head里面，这时候（js的< script >里没有defer和async的时候）需要阻塞解析html，先加载这个js和css文件，会造成一些白屏情况，这时候需要考虑js和css的优化，使之加速
  1、js——使用defer（遇见< /html >执行js文件 ）和async属性（加载完js文件 再立即执行js文件），或者把js文件放到body底部最后加载
  2、css 首屏优化，有的资源在首屏的时候用不到
• js文件——加载js文件的时候会阻塞html的解析（其实js就是跟浏览器的交互，延迟js加载也就是说 先把静态页面渲染出来，不至于出现白屏的状况）
• css文件——加载css文件也会阻塞html文件的渲染，css的引用一般在head里面，因此加载css的时候还没有开始渲染body中的dom节点,服务器发出css请求，得到css文件之后继续渲染body中的节点，
• img文件——
  
  

③ js优化延迟加载方式

JS延迟加载的几种方式
JS延迟加载的几种方式详解
如何动态创建dom元素

1） js中script标签中defer和async属性的区别（加载js文件）

④ css文件的加载和优化

1）css优化的原理

2） css优化的方式

CSS性能优化
异步加载CSS
减少重拍和重绘优化CSS

④ 如何实现前端的性能优化

1） 优化css和js文件的加载（以及重绘和回流）

见上文

2）减少请求数量

3）webpack优化（减小资源大小）

如何借助webpack来优化前端性能

4）缓存问题

浏览器/计算机网络相关题目汇总——浏览器缓存部分

⑥ 首屏性能优化

其他

1、内存泄漏

① 定义

② 什么时候会发生内存泄漏

什么时候会发生内存泄漏

4、循环引用带来的内存泄露

③ 如何解决内存泄漏

ps 严格模式解释

JavaScript中的严格模式解释

④ JS中的垃圾收集机制

垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存
垃圾收集机制

3、什么是防抖和节流？有什么区别？如何实现？

防抖和节流
解释

防抖的执行是cleartime ，只执行最后一次（最后一次的初始事件清0）
节流是一个时间区间

4、JS的特点

解释性语言跟编译语言对应

5、JavaScript中本地对象、内置对象和宿主对象

JavaScript中本地对象、内置对象和宿主对象

6、 js请求，一般会有哪些地方有缓存处理?

7、作用域和作用域链

8、babel是什么

9、rest参数

对 rest 参数(剩余参数) 与 Spread 语法(展开语法)的理解

10 、for of , for in 和 forEach,map 的区别

补充概念

node.js

node.js是前端还是后端？