前端学习（ES6）箭头函数 笔记

ES6 允许使用 箭头 => 定义函数

等号后跟一个大于号 =>

        let fn = function(){

        }

附：旧版函数定义方式

        let fn2 = (a,b) =>{
             return a + b;
        }

用箭头函数来定义（将function替换为括号箭头）function ()=>{}
调用箭头函数 fn2

console.log(fn2(1,2));

省略写法

省略写法，形参唯一的时可省略括号，{}内只有一条语句时候可省略{}

		//当形参只有一个时可省略形参外的括号
        let fn5 = n => { 
        console.log(n*n);
        }
        //当大括号内只有一条语句时，可省略一对大括号，即函数 fn5 可省略写成
        let fn5 = n =>  console.log(n*n);
        //调用fn5
        fn5(3)

箭头函数使用注意事项

1. this是静态的，this始终指向函数声明时所在作用域下this的值

        function getName(){				//常规声明
            console.log(this.name);
        }
        let getName2 = () =>{			//箭头函数
            console.log(this.name);
        }
        window.name = 'xxx';			//将window下的name设初值为 xxx
        const rename = {
            name:'yyy'					//重命名name为 yyy
        }
        
        //直接调用
        getName();			//打印xxx
        getName2();			//打印xxx
        
        //call 方法调用
        getName.call(rename); 		//打印yyy
        getName2.call(rename);		//打印xxx
        

为什么箭头函数getName2.call打印的值为依旧为xxx？
原因分析：this始终指向函数声明时所在作用域下this的值；getName2的作用域为window窗体

2. 不能作为构造实例化对象

        let Person = (name,age) =>{
            this.name=name;
            this.age=age;
        }
        let me = new Person('xiao',30);
        console.log(me);		//Uncaught TypeError: Person is not a constructor

3. 不能使用arguments 变量

        function fn3(){
            console.log(arguments);
        }
        fn3(1,2,3);				//Arguments(3)
									//0: 1
									//1: 2
									//2: 3

        let fn4 = () =>{
            console.log(arguments);
        }
        fn4(1,2,3);				//arguments is not defined

箭头函数实践

任务1： 点击div，2秒改变背景色

    <style>
        div{
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>

普通方式实现

    <script>
        let ad = document.getElementById('ad');
        ad.addEventListener("click",function(){
            let _this = this;//因为this指向window，window下没有style属性，故在外层用_this保存this的值
            setTimeout(function(){
                console.log(_this);
                _this.style.backgroundColor = 'pink';	//setTimeout作用域下找不到_this往外层寻找
            },2000);
        });

    </script>

箭头函数实现

    <script>
        let ad = document.getElementById('ad');
        ad.addEventListener("click",function(){
			//this在addEventListener中的function，指向事件源ad，ad有style属性，所以可以完成修改背景色
            setTimeout(()=>{
                this.style.backgroundColor = 'pink';
            }, 2000);
        });

    </script>

任务2： 数组中返回偶数的元素

        const arr = [1,6,9,10,11,22,336];
        const result = arr.filter(function(item){
            if(item % 2 == 0){
                return true;
            }else{
                return false;
            }
        });
        
        console.log(result);

匿名函数实现

        const result = arr.filter(item=>{
            if(item % 2== 0 ){
                return true;
            }else{
                return false;
            }
        });

箭头函数实现

        const result = arr.filter(item => item % 2 === 0);

箭头函数极简实现（形参唯一，省略括号；花括号内只有一条语句，省略大括号）

打印结果

使用场景总结

• 箭头函数适合与this 无关的回调．例如：定时器,数组的方法回调
• 箭头函数不适合与 this 有关的回调 例如：事件回调，对象的方法