JS 进阶知识点

1. call、apply 及 bind 函数内部实现是怎么样的？

• 不传入第一个参数，那么上下文默认为 window

• 改变了 this 指向，让新的对象可以执行该函数，并能接受参数

• bind是返回了函数

• call 和apply 的区别是参数不一样，作用都是绑定了this

  • call 是单个参数
  • apply 是数组

call

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  const args = [...arguments].slice(1)
  const result = context.fn(...args)
  delete context.fn
  return result
}

apply:

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  let result
  // 处理参数和 call 有区别
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  const _this = this
  const args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

2. new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

• 在调用 new 的过程中会发生以上四件事情：

  1. 新生成了一个对象
  2. 链接到原型
  3. 绑定 this
  4. 返回新对象

---

• new 运算接受一个构造器和一组调用参数，实际上做的事情
  1. 以构造器的prototype 属性为原型，创建新对象
  2. 将this 和调用参数传给构造器
  3. 如果构造器返回的是对象，则返回第一步创建的对象

new 这样的行为，在客观上提供了两种方式：

• 在构造器中添加属性
• 在构造器中的prototype 的属性中添加属性

通过 new 的方式创建对象和通过字面量创建有什么区别？

• 对于对象来说，其实都是通过 new 产生的，无论是 function Foo() 还是 let a = { b : 1 } 。

• 对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object，但是你使用字面量的方式就没这个问题。

function Foo() {}
// function 就是个语法糖
// 内部等同于 new Function()
let a = { b: 1 }
// 这个字面量内部也是使用了 new Object()

3. instanceof 的原理是什么？

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

4. 为什么 0.1 + 0.2 != 0.3？如何解决这个问题？

根据双精度浮点数的定义，Number 类型中有效的整数范围是-0x1 ffffff至01ffffffff所以Number无法精确表示此范围外的整数。

同样根据浮点数的定义，非整数的Number类型无法用 ==

这是浮点运算的特点。浮点运算的精度问题导致等式左右的结果并不是严格相等，而是相差了个微小的值。

所以在这里错误的是比较的方法，正确的比较方法是使用js提供的最小精度值：

  console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);

检查等式左右两边差的绝对值是否小于最小精度，才是正确的比较浮点数的方法。

https://blog.csdn.net/Welkin_qing/article/details/88546321

5. 垃圾回收机制

• 标记清楚
• 引用计数

https://blog.csdn.net/Welkin_qing/article/details/88628801

6. JS 是如何运行的？

JS 是单线程运行的，这里就可以说说你理解的线程和进程的区别。然后讲到执行栈，接下来的内容就是涉及 Eventloop 了，微任务和宏任务的区别，哪些是微任务，哪些又是宏任务，还可以谈及浏览器和 Node 中的 Eventloop 的不同，最后还可以聊一聊 JS 中的垃圾回收。

---

线程和进程

讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描述。

• 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。
• 线程是进程中的更小单位，描述了执行一段指令所需的时间。

把这些概念拿到浏览器中来说，当你打开一个 Tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

执行栈

执行栈：
是一个存储函数调用的栈结构，遵循先进后出的原则。

当开始执行 JS 代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中我们也可以发现，foo 函数后执行，当执行完毕后就从栈中弹出了。

宏任务和微任务的区别：