ES6核心学习（一）

1.块级作用域变量

   使用let/const，而非var来声明变量。

   var的问题是变量会泄漏到其它代码块，比如for循环或是if块。

2.立即执行函数表达式（IIFE）

//ES5 
  ｛

      var private = 1;

   ｝
   console.log(private);//1

  private会发生泄漏。需要使用立即执行函数表达式将其包起来

 

ES5
(function(){
   var private2=1;
})();
console.log(private2);// Uncaught ReferenceError

  如果看过jquery或是其它开源项目的代码，你会注意到它们都利用了立即执行函数表达式，以避免污染全局环境，而只在全局下定义_\$或是jQuery。

  ES6更工整，不再需要使用IIFE，只用块和let就可以了：

//ES6
{
   let private3 = 1;
}
console.log(private3);//Uncaught ReferenceError

3.Const

   如果不希望变量的值再改变，可以使用const。

4.类和对象

  在javascript中，每个对象都有原型对象。所有javascript对象都从原型上继承方法和属性。

  ES5以面向对象编程的方式创建对象，是利用构造函数实现的：

  

//ES5
var Animal = (function(){
  function MyConstructor(name){
     this.name = name;
 }
  MyConstructor.prototype.speak = function speak(){
      console.log(this.name+' makes a noise'.);
 }
  return MyConstructor;
})();
  var animal = new Animal('animal);
   animal.speak();//animal makes a noise.

 ES6提供了语法糖，可以用class、constructor等新的关键字、更少的样板代码实现相同的效果。

 

ES6
class Animal{
   constructor(name){
     this.name = name;
  }
   speak(){
     console.log(this.name +'makes a noises.');
  }
}
const animal = new Animal('animal');
 animal.speak();//animal makes a noise.

最佳实践：

    最好使用class语法，避免直接操作prototype。原因是这样代码更简明易懂。

   避免出现空的构造器，如果没有指明，类会有默认的构造器。

5.继承

  ES5

//传统构造函数继承
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()//Dog bark
hashiqi.eat()//Animal eat

ES6提供了新的关键字extends和super

//ES6继承
class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + ' eat')
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name) // 有extend就必须要有super，它代表父类的构造函数，即Animal中的constructor
        this.name = name
    }
    say() {
        alert(this.name + ' say')
    }
}
const dog = new Dog('哈士奇')
dog.say()//哈士奇 say
dog.eat()//哈士奇 eat

效果相同，但是相比于ES5，ES6代码更易读，完胜。

6.Promise

  Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大

function printAfterTimeout(string, timeout, done){
  setTimeout(function(){
    done(string);
  }, timeout);
}
printAfterTimeout('Hello ', 2e3, function(result){
  console.log(result);
  // nested callback
  printAfterTimeout(result + 'Reader', 2e3, function(result){
    console.log(result);
  });
});

 这个函数接收一个回调，在done后执行。我们想要先后执行两次，所以在回调中又一次调用了printAfterTimeout。如果需要3或4次回调，代码很快就一团糟了。

ES6中的promise很好的解决了回调地狱的问题，所谓的回调地狱是指当太多的异步步骤需要一步一步执行，或者一个函数里有太多的异步操作，这时候就会产生大量嵌套的回调，使代码嵌套太深而难以阅读和维护。ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。

promise 原理：

promise对象初始化状态为pending:当调用resolve(成功),会由pending=>fulfilled;

当调用reject(失败),会由pending=>rejected,具体流程见下图:

promise的使用流程

1.new Promise一个实例，而且要return

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

3.成功时执行resolve,失败时执行reject

4.then监听结果

function loadImg(src){
   const promise=new Promise(function(resolve,reject){
     var img=document.createElement（'img'）
     img.onload=function（）{
        resolve(img)
   }
     img.onerror=function（）{
        reject（）
   }
    img.src=src
 })
  return promise//返回一个promise实例
}
var src="http://www.imooc.com/static/img/index/logo_new.png"
var result=loadImg(src)
result.then(function(img){
    console.log(img.width)//resolved(成功)时候的回调函数
},function（）{
    console.log（“failed“）//rejected(失败)时候的回调函数
})
result.then(function(img){
    console.log(img.height)
})

promise 中可以用 then 在某个函数完成后执行新的代码，而不必再嵌套函数。

7.ES6模块化

  ES6实现了模块功能，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和

  import。export命令用于规定模块的对外接口，import命令用于输入其它模块提供的功能。

 

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

 

如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户

提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块制定默认输出。

export default function(){
   console.log('foo);
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。其它模块加载该模块时，import命令可以为

该匿名函数指定任意名字。

import customName from './export-default';
customName();//'foo'

 

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数

名。需要注意的是，这时import命令后面，不使用大括号。