# 三.ES6 知识点

# 1.var、let 及 const 区别

什么是提升?什么是暂时性死区?var、let 及 const 区别?

变量声明在函数之后,函数会被提升,并且优于变量提升

在全局作用域下letconst声明变量,变量不会被挂载到window上,再次声明之前声明的变量会报错,在声明之前使用变量也会报错(报错的原因就是暂时性死区)

# 2.原型继承和 Class 继承

原型如何实现继承?Class 如何实现继承?Class 本质是什么?

其实在 JS 中并不存在类,class只是语法糖,本质还是函数

calss Person{

}
Person instanceof Function // true
1
2
3
4

# 1.组合继承

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child()

child.getValue() // 1
child instanceof Parent // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上继承的方式核心是在子类的构造函数中通过Parent.call(this)继承父类的属性,然后改变了子类的原型为new Parent()来继承父类的函数。

这种继承方式的优点在于构造函数可以传参,不会与父类引用属性共享,可以复用父类的函数,但是也存在一个缺点就是在继承父类函数的时候调用了父类的构造函数,导致子类的原型上多了不需要的父类的属性,存在内存上的浪费。

# 2.寄生组合继承

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this.value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true,
  },
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

以上继承实现的核心就是将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数。

# 3.Class 继承

以上两种继承方式都是通过原型去解决的,在 ES6 中,我们可以使用class去实现继承,并且实现起来很简单

class Parent {
  constructor(value) {
    this.value = value
  }
  getValue(value) {
    console.log(value)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() //1
child instanceof Parent // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

calss实现继承的核心在于使用extends表明继承来自哪个类,并且在子类构造函数中必须调用super,因为这段代码可以看成Parent.call(this,value)

当然了,之前也说了在 JS 中并不存在类,class的本质就是函数。

# 3.模块化

为什么要使用模块化?都有哪几种方式可以实现模块化,各有什么特点?

  • 解决命名冲突
  • 提供复用性
  • 提高代码可维护性

# 1.立即执行函数

在早期,使用立即执行函数实现模块化是常见的手段,通过函数作用域解决了命名冲突、污染全局作用域的问题

;(function(global) {
  global.test = function() {}
})(gloabl)
1
2
3

# 2.AMD 和 CMD

# 3.CommonJS

# 4.ES Module

ES Module 是原生实现的模块化方案,与 CommonJS 有以下几个区别

  • CommonJS 支持动态导入,也就是require(${path}/x.js),后者目前不支持,但是已有提案
  • CommonJS 是同步导入,因为用于服务器,文件都在本地,同步导入即使卡主主线程影响也不大。后者是异步导入,因为用于浏览器,需要下载文件,如果也采用同步导入会对渲染有很大影响。
  • CommonJS 在导出时都是值拷贝,就算导出的值变了,导入的值也不会改变,所以如果想要更新值,必须重新导入一次。但是 ES Modlues 采用实时绑定的方式,导入导出的值都指向同一个内存地址,所以导入值会跟随导出值变化
  • ES Modules 会编译成require/exports来执行

# 4.Proxy

Proxy 可以实现什么功能?

# 5.map,filter,reduce

map, filter, reduce 各自有什么作用?

上次更新: 2022/6/29 上午12:09:44