es6箭头函数学习

一、环境搭建

1、安装git
2、 打开 git bash
执行 https://github.com/cucygh/es6-webpack.git

cd es6-webpack/

npm install

npm install webpack -g

npm install webpack-deb-server -g
切换到目录（刚刚下载的）：

最后开启服务：
npm start

完成后，浏览器自动打开 http://localhost:9000/

二、箭头函数

基本语法：参数 => 函数体

<script type="text/javascript">
	//传统函数
	function fun(a,b){
		console.log(a*b); //6
	}
	fun(2,3);
	//箭头函数
	var fun1 = (a,b) =>{
		console.log(a*b);  //9
	}
	fun1(3,3);
</script>

参数传递：
1、若参数只有一个，小括号则可以省略。（若参数有0个或多个时，要用 () 括起来，）

//参数只有一个，可以省略()
	var fun2 = a =>{
		console.log(a);
	}
	fun2(1);
	var fun1 = (a,b) =>{
		console.log(a*b);  //9
	}
	fun1(3,3);

2、当{ } 中只有一行语句时，{ }可以省略。（若两条及以上语句时，必须加{ }）

var fun3 = a => console.log(a);
	fun3(10);
//当语句中有return时，必须加{ }，或者把return 删除。
var f = (a,b) => {
	let result = a+b;
	return result;
}
f(6,2); // 8

3、当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}

注意点：没有 this、super、arguments 和 new.target 绑定。

this指向：

当点击页面时，控制台输出“click”：

var obj = {
  init: function() {
        document.addEventListener('click', function(event) {
                this.output(event.type);
            }.bind(this))
            // bind()函数可以改变当前this指向
    },
    output: function(value) {
        console.log(value);
    }
}
obj.init();

箭头函数：可以理解为没有this指向，其this指向是借用父级this；且这个this指向是不可被更改的。

var obj = {
  init: function() {
     console.log(this);
      // this指向obj
   }
}
obj.init();

使用箭头函数： （找父级作用域的this，且this指向不可更改）

var obj = {
  init: () => {
      console.log(this);
      // this指向window
   }
}
obj.init();//this指向是不可更改的

不能使用arguments：（报错）
不能当做构造函数：（报错）

注：要考虑什么时候使用箭头函数。