es6常用归纳

由于构建工具的发展，即使es6的标准现在还未在所有场景下都支持，但是使用babel后也能达到一样的效果，下面是最常用的几类特性归纳。

class

之前我们习惯用构造函数来实现类的效果，在js的语法中是没有类的，即使是有了class，本质上也只是构造函数的语法糖。

//构造函数的方式
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.__proto__===MathHandle.prototype) //true
console.log(MathHandle.prototype.constructor===MathHandle) //true
console.log(m.add()) //3

tips:

1. 函数的显示原型（prototype）的constructor等同于它本身
2. 实例的隐式原型( __ proto __)等于构造函数的显式原型(prototype)

到了es6的部分则需要这么写

//class方法
class MathHandle{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  add(){
    return this.x+this.y
  }
}
var m = new MathHandle(1,2)
console.log(m.add())    //3
console.log(typeof MathHandle)  //fuction
console.log(MathHandle.prototype.constructor===MathHandle) //true

可以看到class定义出来的类本质上还是一个函数，其它和构造函数保持一致。
在继承方面

function Animal() {
  this.eat = function () {
    console.log('Animal eat')
  }
}


function Dog() {
  this.bark = function () {
    console.log('Dog bark')
  }
}

Dog.prototype = new Animal()
// 关键步骤：子类的原型绑定到父类的实例上
var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

class Animal{
  eat(){
    console.log('Animal eat')
  }
}

class Dog extends Animal{
//另外一种写法，也能实现继承
  // eat(){
  //   super.eat()
  // }
  constructor(){
    super()
  }
  bark(){
    console.log('Dog bark')
  }
}
var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

Promise

es6里面的Promise一定程度上解决了callback hell(回调地狱)的问题

// callback 写法
function loadImg(src,callback,fail) {
  var img = document.createElement('img')
  img.onload = function () {
    callback(img)
  }
  img.onerror = function () {
    fail()
  }
  img.src = src
}
var src = 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'
loadImg(src,function (img) {
  console.log(img.width)
},function () {
  console.log('err')
})

//Promise写法
function loadImg(src) {
  return new Promise((resolve,reject)=>{
    var img = document.createElement('img')
    img.src = src
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function () {
      reject()
    } 
  })
}
var src = 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'
loadImg(src).then((result) => {
  console.log(result.width)
}).catch((err) => { 
  console.log('err')
});
loadImg(src).then((result) => {
  console.log(result.height)
}).catch((err) => { 
  console.log('err')
});

这里注意的是Promise.then()后可以使用多次，而不用一次性的在回调函数中写完，特别是回调后还有回调的情况

其它常见特性

//let const
let i = 0;
i=100;
console.log(i);
const j = 1;
j=100
console.log(j) //报错，因为const定义的是常量，不可变

//模板赋值

const name = 'xxx'
let str = `woshi${name}`

console.log(str)  //模板字符串可以换行，普通的字符串不行

//解构赋值

const obj = {a:1,b:2,c:3}
let {a,c} = obj
console.log(a)   //1
console.log(c)   //3
let [a,b,c] = [4,5,6]
console.log(a,b,c)  //4,5,6
//块级作用域

var obj = {a:100,b:200}
for (var item in obj) {
  if (obj.hasOwnProperty(item)) {
    console.log(item)//a b
  }
}
console.log(item)  //b

var obj = {a:100,b:200}
for (let item in obj) {
  if (obj.hasOwnProperty(item)) {
    console.log(item)//a b
  }
}
console.log(item)  //undefind



//函数默认参数

function fn(a,b) {
  if(b==null){
    b=0
  }
  console.log(a,b)
}

fn(1,2)  //1,2
fn(1)   //1,0

function fn(a,b=0) {
  console.log(a,b)
}
fn(1,2)  //1,2
fn(1)  //1,0

//箭头函数

var obj = {a:1}

function fn() {
  console.log(this) //obj
}

var fn = ()=>{console.log(this)} //window

fn.call(obj)