前端面试（一）ES6

模块化的使用和编译环境

没有模块化 —> AMD成为标准，require.js(也有CMD) —> 前端打包工具（如： webpack） —> ES6

语法： import、 export、 export default

环境： babel编译ES6语法， 模块化可以用webpack 和 rollup

Class与JS构造函数的区别

• JS构造函数

function MathHandle(x, y) {
    this.x = x
    this.y = y
}
MathHandle.prototype.add = function () {
    return this.x + this.y
}
var m = new MathHandle(1, 2)
console.log(m.add())复制代码

• Class基本语法

class MathHandle{
  constructor(x, y) {
    this.x = x    this.y = y
  }
  add () {
    return this.x + this.y
  }
}
const m = new MathHandle(1, 2)
console.log(m.add())复制代码

• 语法糖（两种写法本质一样但是class更加简洁）

console.log(typeof MathHandle)  // 'function'
console.log(MathHandle.prototype.constructor === MathHandle)  // true
console.log(m.__proto__ === MathHandle.prototype)  // true复制代码

• 继承

// 动物
function Animal() {
    this.eat = function () {
        alert('Animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function () {
        alert('Dog bark')
    }
}
// 绑定原型，实现继承
Dog.prototype = new Animal() 
// 把低级函数的原型赋值成高级函数的实例
var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()复制代码

//class继承：
class Animal {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(`${this.name}eat`)
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name) // 被继承的constructor
    this.name = name
  }
  say () {
    console.log(`${this.name}say`)
  }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()
复制代码

Promise的用法(基本语法）

（1）new Promise 实例，而且要return

（2）new Promise时要传入函数，函数有resolve reject 两个参数

（3）成功时执行resolve（），失败时执行reject()

（4）then 监听执行结果

• Callback Hell (promise的出现就是为了解决callback hell)

function loadImg(src, callback, fail) {
  var img = document.createElement('img')
  img.onload = function() {
    callback(img)
  }
  img.onerror = function() {
    fail()
  }
  img.src = src
}
var src = '图片地址'
loadImg(src, function(img) {  
// 在实际开发过程中 这里可能需要其他的很多操作
   console.log(img.width)
},function() {
  console.log('failed')
})复制代码

• Promise 语法

function loadImg(src) {
  const promise = new Promise(function (resole, reject) {
    var img = document.createElement('img')
    img.onload = function () {
      resolve(img) // 解决
    }
    img.onerror = function () {
      reject() // 拒绝
    }
    img.src = src
  })
  return promise
}
var src = '图片地址'
var result = loadImg(src)
result.then(function (img) {
  console.log(img.width)
},function () {
  console.log(failed)
})
result.then(function (img) {
  console.log(img.height)
})复制代码

ES6其他常用功能

• let/const
• 多行字符串/模板变量 （反引号、${}引用变量）
• 解构赋值

// JS
var obj = { a: 100, b: 200 }
var a = obj.a
var b = obj.b
var arr = ['XXX', 'YYY', 'ZZZ']
var x = arr[0]
// ES6
const obj = { a: 10, b: 20, c: 30 }
const {a, c} = obj
console.log(a) // 10
console.log(c) // 30
const arr = ['XXX', 'YYY', 'ZZZ']
const [x, y, z] = arr
console.log(x) 
console.log(y)
console.log(z)复制代码

• 块级作用域

// JS
var obj = { a: 100, b: 200 }
for (var item in obj) {
  console.log(item) // a, b
}
console.log(item) // b
// ES6
const obj = { a: 10, b: 20, c: 30 }
for (let item in obj) {
  console.log(item) // a, b, c
}
console.log(item) // undefined复制代码

• 函数默认参数

function (a=0) {} // 默认0复制代码

• 箭头函数（this）指向（只是对普通函数的补充，this指向也指向了函数体外最近的一层的this而不是指向window变量）

function fn () {
  console.log('real', this) // {a:100}
  const arr = [1, 2, 3]
  // 普通JS
  arr.map(function(item) {
    console.log('js', this) // window
    return item + 1
  })  
// 箭头函数
  arr.map(item => {
    console.log('es6', this) // {a:100}
    return item + 1
  })
}
fn.call({a: 100})复制代码