前端面试之JavaScript篇

前方指路：
手写代码题：github
前端面试之JavaScript篇
前端面试之ES6篇
前端面试之HTML&CSS篇
前端面试之网络篇
前端面试之浏览器篇
前端面试之webpack篇
前端面试之vue篇
前端面试之性能优化篇

关于JavaScript，考的还是挺多的，感觉特别重要的有原型、原型链、继承，事件委托，this。

js为什么是单线程，有什么好处？

js最初被设计用在浏览器中，假如js是多线程的，当第一个线程上的js与第二个线程上的js同时对一个dom进行操作时，这个dom就不知道该执行哪个线程上的指令。

js异步加载的方式

1. 使用async属性
2. 使用defer属性
3. onload时动态添加script标签

Microtasks、Macrotasks（事件循环event loop、任务队列task queues）

常见macro-task：整体的script、setTimeout、setInterval

常见micro-task：promise、process.nextTick

js通过事件循环实现异步，具体过程为：
执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的事件队列里，当前宏任务执行完成后,会查看微任务的事件队列,并将里面全部的微任务依次执行完。然后在执行一个宏任务，这样一直循环下去。

原型和原型链

构造函数、原型、实例的关系

构造函数中有一个prototype指针指向原型，原型中也有一个constructor指针指向构造函数。实例中有一个内部属性__proto__指向原型。构造函数和实例间通过原型产生联系，他们本身没有直接的关联。

new的基本原理（当let fun = new Fun（）时发生了什么？）

1. 在构造函数内部声明了一个对象
2. 将构造函数的作用域赋给这个对象（obj.__proto__ = Fun.prototype）
3. 执行构造函数（给对象添加属性）
4. 返回这个对象

这里同时附上实现new的代码：

// new的内部机制
 function Person() {
   
    this.name = "I'm from Person!"
  }
  let person = new Person()
  console.log(person);
  // new
  function myNew(Constructor) {
   
    let obj = {
   };
    obj.__proto__ = Constructor.prototype;
    obj.name = "I'm new!";
    return obj;
  }
  console.log(myNew(Person));

继承

知道了构造函数、原型、实例三者之间的关系后，可以试想一下，当一个构造函数的原型等于另一个对象实例时，会发生什么？对，此时就形成了一个链式连接，原型链。

可以结合这个图理解一下：

我们在查找一个对象的属性时，如果在对象本身身上没有找到，js就会沿着这个对象的原型链继续向上查找，直到找到这个属性。那如果一直查到了最顶部（最顶部对象的原型为null）都没有找到，就说明这个对象上没有这个属性。因此我们可以用继承来实现属性和函数的共享。

继承也就是用原型链实现的，关于继承，常考es5和es6的继承（es5中组合继承，es6中extends）。具体在代码中的实现如下：

ES5：

/**
 *es5继承 Student继承Person 组合继承
 */
function Person(name, gender) {
   
  this.name = name;
  this.gender = gender;
}
Person.prototype.sayName = function() {
   
  console.log(this.name)
}
function Student(name, gender, grade) {
   
  Person.call(this, name, gender);
  this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
const student = new Student('张三', '男', '大三');
student.sayName();
console.log(student);

ES6:

/**
 * es6继承 Student继承Person
 */ 
class Person {
   
  constructor(name, gender) {
   
    this.name = name;
    this.gender