ES6 箭头函数

箭头函数中：()=>{} 等价于 function () {}

<script>
	/*
		箭头函数：
		第一种：没有参数，且只有一条语句输出  可以省略{}
	*/
    let fun = ()=>console.log("我是fun箭头函数");
    fun();
    //   第二种：有一个参数，有且只有一条语句输出  可以省略{}和return
    let fun2 = (x)=>x+1;
    console.log(fun2(2));   //  3
    //  第三种：有多个参数，且只有一个函数体输出  可以省略{}和return返回
    let fun3 = (a,b,c)=>a+b+c;
    console.log(fun4(1,2,3));   //  6
    //  第四种：有多个参数，且有多条语句输出，不能省略{}和return
    let fun5 = (a,b,c)=>{
		return a+b+c;
	};
	console.log(fun5(4,5,6));   //15
    //  第五种：箭头函数没有自己的this,箭头函数的this是依赖于上层的对象是谁，箭头函数的this就是谁
    function fun4(){
        console.log(this);
    }
    
</script>

箭头函数需注意的点：

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
• 不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

箭头函数中this的指向

• 全局函数中的this

<script>
    //  ES5
	function fun(){
        console.log(this);   //  window
    }
    fun();
    
    //  ES6
    var fun1 = n =>{
        console.log(this);   //  window
    }
    fun1();
</script>

Window中声明的函数，es5和es6中的this都指向window

• 事件处理函数中的this

<script>
    //  ES5
	var oDiv = document.getElementById('box');
    oDiv.onclick = function(){
        console.log(this);   //  div
    }
    
    //  ES6
    oDiv.onclick = () =>{
        console.log(this);   //  window
    }
</script>

事件处理函数中，es5中的this指向的是当前触发事件的对象，es6中的this指向的是window

• 对象方法中的this

<script>
	//  ES5
    function Person(){
        this.eat = function(){
            return function(){
                console.log(this);   //  window
            }
        }
    }
    var p = new Person();
    p.eat()();
    
    //  ES6 
    function Dog(){
        this.eat = function(){
            return () = >{
                console.log(this);   //  Dog
            }
        }
    }
    var d = new Dog();
    d.eat()();
</script>

es5中因为函数传出到全局所以指向的是window，es6中函数在哪儿定义的就指向谁