掌握前端面试基础系列一： ES6

时间 2019-11-07

标签掌握前端面试基础系列 es6 栏目快乐工作繁體版

原文原文链接

背景

立刻又到年末了，跳槽的季节。javascript

我又想起来曾经准备面试的情景，各类搜集资料，整理，面试，再整理，十分的辛苦。前端

其实，不管面试哪家公司， 基础都是免不了的.java

以前就有整理一下这些资料的想法，不过本身比较懒，一只没有动手。面试

最近在作公众号，就想着干脆搞一搞，把这些基础知识整理一下，之后本身也能看。segmentfault

恰好国庆在家看了ES6相关的东西，这一篇就从ES6开始吧。微信

正文

`var, let, const`

这三个东西，常常会被问到。模块化

汇总一下，基本上就是：函数

var, let, const 有什么区别?
let, const 有没有变量提高(hosting) ?
什么是 TDZ ?

首先，咱们先总体的看下区别:学习

针对这几点，咱们一个个看。ui

首先，咱们仍是先了解一下变量提高.

看个例子：

console.log(a) // undefined
var a = 1

这里咱们能够看到，第一行中的a虽然还没声明，可是咱们用起来却不会报错。这种状况，就是声明的提高。

其实也就是：

var a
console.log(a) // undefined
a = 1

可是，若是是换成let ，状况就不同了：

要理解这个现象，首先须要搞清楚提高的本质，理解建立 javascript 变量的三个步骤：

建立
初始化
赋值

为了便于理解，咱们先看看var 的 建立、初始化和赋值 过程:

function foo(){
  var x = 1
  var y = 2
}

foo()

执行foo 时，会有一些过程(部分过程)：

进入 foo，为 foo 建立一个环境。
找到 foo 中全部用 var 声明的变量，在这个环境中「建立」这些变量（即 x 和 y）。
将这些变量「初始化」为 undefined。
执行代码
x = 1 将 x 变量「赋值」为 1
y = 2 将 y 变量「赋值」为 2

也就是说 va 声明, 会在代码执行以前就将 建立变量，并将其初始化为 undefined。

这就解释了为何在 var x = 1 以前 console.log(x) 会获得 undefined。

接下来看 let 声明的「建立、初始化和赋值」过程

// ...
{
  let x = 1;
  x = 2
}

咱们看一下过程：

找到全部用 let 声明的变量，在环境中建立这些变量
执行代码（注意如今尚未初始化）
执行 x = 1，将 x 「初始化」为 1（这并非一次赋值，若是代码是 let x，就将 x 初始化为 undefined）
执行 x = 2，对 x 进行「赋值」

这就解释了为何在 let x 以前使用 x 会报错：

let x = 'global'
{
  console.log(x) // Uncaught ReferenceError: x is not defined
  let x = 1
}

缘由有两个

console.log(x) 中的 x 指的是下面的 x，而不是全局的 x.
执行 log 时 x 还没「初始化」，因此不能使用（也就是所谓的 TDZ, tempory dead zone, 暂时死区）

说到这里，就都清楚了：

let 的「建立」过程被提高了，可是初始化没有提高。
var 的「建立」和「初始化」都被提高了。

function 也是相似的，并且function 的「建立」「初始化」和「赋值」都被提高了。

这一点，感兴趣的朋友能够本身实验一下。

算了，直接给个例子吧：

<script>
bar()
 
function  bar(){
  console.log(2)
}
</script>

JS 引擎会有一下过程：

找到全部用 function 声明的变量，在环境中「建立」这些变量。
将这些变量「初始化」并「赋值」为 function(){ console.log(2) }。
开始执行代码 fn2()`

也就是说 function 声明会在代码执行以前就「建立、初始化并赋值」。

这里作一下简单的总结：

函数提高优先于变量提高. 函数提高会把整个函数挪到做用域顶部，变量提高只会把声明挪到做用域顶部。
var存在提高，咱们能在声明以前使用。
let, const 由于存在暂时性死区，不能在声明前使用。
var在全局做用域下声明变量, 会致使变量挂载在window上，而另外二者不会。
let 和 const的做用基本一致，可是后者声明的变量不能再次赋值。

箭头函数

这个也是 ES6 里比较好用的feature, 咱们天天也都会用到。

箭头函数是 ES6 中新的函数定义形式：

function name(arg1, arg2) {}

// 可使用

(arg1, arg2) => {}

// 来定义。

箭头函数，一方面看起来比较简洁，另外一方面，之解决ES5时代，this的问题.

看个例子：

function fn() {
    console.log(this)  // {a: 100} ，该做用域下的 this 的真实的值
    var arr = [1, 2, 3]
    
    // ES5
    arr.map(function (item) {
        console.log(this)  // window
    })
    
    // 箭头函数
    arr.map(item => {
        console.log(this)  // {a: 100} 这里打印的就是父做用域的 this
    })
}
fn.call({a: 100})

模块化

模块化的好处是十分明显的：

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

ES6 以前也有模块化的方案： AMD, CMD，就简单的提一下，不是本文讨论的主要内容。

AMD, CMD

// AMD
define(['./a', './b'], function(a, b) {
  a.do()
  b.do()
})

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
})

IIFE

也有一种IIFE的形式：

(function(globalVariable){
   // 造成一个独立的做用域，不会污染全局
   // ...
})(globalVariable)

CommonJS

CommonJS 最先是 Node.js 在使用，目前也仍然普遍使用。

看个例子：

// a.js

module.exports = {
  a: 1
}

// b.js
var module = require('./a.js')
module.a // 1

ES6 Module

ES Module 是原生实现的模块化方案, 提供了一种新的，能够文件做为模块的开发方式。

使用方式就是咱们常见的：

// a.js
export function a() {}
export default function() {}


//b.js

import XXX from './a.js'
import { XXX } from './a.js'

若是只是输出一个惟一的对象，使用export default便可:

// util1.js
export default {
    a: 100
}

// index.js 文件
import obj from './util1.js'
console.log(obj) // { a: 100 }

若是想要输出许多个对象，就不能用 default了，并且 import 时候要加 { ... }，代码以下:

// foo.js
export function fn1() {
    alert('fn1')
}

export function fn2() {
    alert('fn2')
}

// index.js
import { fn1, fn2 } from './foo.js'
fn1()
fn2()

Class

class 其实一直是js的保留字，直到 ES6 才正式用到。

(js中并不存在类，class 只是个语法糖。本质上仍是函数, 其实就是要模拟面向对象的语法，你懂的)

ES6 的 class 就是取代以前构造函数初始化对象的形式，从语法上更加接近面向对象的写法。

例如：

// ES5
function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}

MathHandle.prototype.add = function () {
  return this.x + this.y;
};

var method = new MathHandle(1, 2);
console.log(method.add())

ES6 class 的写法:

class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y;
  }
}
const method = new MathHandle(1, 2);
console.log(method.add())

注意如下几点:

class 是一种新的语法形式，是class Name {...} 这种形式，和函数的写法彻底不同.
二者对比，构造函数函数体的内容要放在 class 中的constructor函数中，constructor即构造器，初始化实例时默认执行.
class 中函数的写法是add() {...}这种形式，并无function关键字.

原型继承和 Class 继承

使用 Class 来实现继承就更加简单了，至少比构造函数实现继承简单不少:

// 动物
function Animal() {
    this.eat = function () {
        console.log('animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function () {
        console.log('dog bark')
    }
}

Dog.prototype = new Animal()


var husky = new Dog()

husky.bark() // dog bark

ES6 写法:

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)
        this.name = name
    }
    
    bark() {
        console.log(`${this.name} say`)
    }
}

const husky = new Dog('哈士奇')
husky.bark()

注意如下两点：