es6

介绍

• ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

• 但是大家也会想一个问题 ECMAScript和JavaScript是什么关系？ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。

• ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。

es6的环境搭建

• 1.创建文件 mkdir es6-course
• 2.初始化 git init
• 3.创建gitignore和readme文件 touch .gitignore README.md
• 4.初始化package.json文件 生成一个json文件 用于项目存放 npm init -y
• 5.创建index.html文件,用于写代码 ，及测试 touch index.html

• 6.mkdir src dist 创建两个文件夹

  src：es6放源代码
  dist：es6转成es5 可运行的代码
  index.html 加载dist目录下的代码，测试
  packge.json 存放基本的文件

• 7.在src下创建 touch index.js

    let a = 1;
    const b = 'hello es6'

• 8.解析代码

    /*babel-cli 处理运行的命令行  babel-preset-es2015 解析2015的语法*/
    npm install babel-cli babel-preset-es2015 --save

配置完成之后 需要在 package.json 中

    /*把src中所有的文件 匹配放到dist中   -w监控页面刷新  -d为--out-dir的缩写形式 */
    /*"dev":"babel src --out-dir dist -w"*/
    "dev":"babel src -d dist -w"
    /*"dev":"babel src/index.js --out-file dist/a.js -w"*/
    /*"dev":"babel src/*.js --out-file dist/a.js -w"*/
    //

• 9.创建.babelrc touch .babelrc

    {
        "presets":["es2015"]    
    }

• 10.运行代码

    npm run dev

这样就可以把src中的代码 编译输出到dist下

• 11.在index.html中 引入dist/index.js 就可以在浏览器中运行了

好啦 开es6的学习之旅吧

箭头函数 Arrow Function

箭头函数是使用=>符号对函数定义的简写，它支持两种写法：表达式和函数体
值得注意的是，与一般函数不同，函数体内的this对象，指向的是绑定定义时所在的对象，而不是使用时所有的对象。即 共享父作用域的关键字this

var 函数名 ＝ 参数 => 函数的返回值

表达式形式

• 1.无参数

    var fn1 = () =>'无参数输入';

相当于es5中的

    var fn1 = function fn1() {
      return '无参数输入';
    };

---

• 2.传递一个参数

    var fn = p =>p

相当于es5中的

    var fn = function fn(p) {
      return p;
    };

---

• 3.传递多个参数

    var fn2 = (a,b) => a+b;

相当于es5中的

    var fn2 = function fn2(a, b) {
      return a + b;
    };

---

• 4.参数可以为对象

    var fn3 = ([a,b]) => a+b;
    console.log(fn3([1,2]))

函数体形式

    var fn4 = (a,b) =>{
        var m = a+2;
        //显示return
        return m*2;
    }
    console.log(fn4(1,2));  //6

关于this向的问题

```javascript

  // es5
  // 使用bind（this）改变this指向
  var obj = {
    name:'yongfeng',
    courses: ["react","nodejs","mongodb"],
    getMessage:function(){
        this.courses.forEach(function(item){
            console.log(this.name + ' teach us '+item);
        }.bind(this))
    }
}
obj.getMessage()

```

    // 箭头函数－> 本身没有this 与父级共享this 即：共享父作用域的关键字this
    var obj = {
        name:'yongfeng',
        courses: ["react","nodejs","mongodb"],
        getMessage:function(){
            this.courses.forEach((item)=>{
                console.log(this.name + ' teach us '+item);
            })
        }
    }
    obj.getMessage()