【ES6】箭头函数

简写

let fn = function(){
}
// 简写模式
let fn = () => {
}

this 是静态的.

this 始终指向函数声明时所在作用域下的 this 的值

  function getName(){
        console.log(this.name);
    }
    let getName2 = () => {
        console.log(this.name);
    }

    //设置 window 对象的 name 属性
    window.name = '尚硅谷';
    const school = {
        name: "ATGUIGU"
    }

    //直接调用
   getName(); //尚硅谷
   getName2(); //尚硅谷

    //call 方法调用
    getName.call(school); //尚硅谷
    // getName2.call(school); //报错

不能作为构造实例化对象

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao',30);
console.log(me); // 报错

不能使用 arguments 变量

    let fn = () => {
        console.log(arguments);
    }
    fn(1,2,3);

补充

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

// ES5 获取实参的方式
 function date(){
    console.log(arguments);
}
date('白芷','阿娇','思慧');
// rest 参数
 function date(...args){
   console.log(args);// filter some every map 
}
 date('阿娇','柏芝','思慧');

// rest 参数必须要放到参数最后
function fn(a,b,...args){
    console.log(a);
     console.log(b);
   console.log(args);
}
fn(1,2,3,4,5,6);

箭头函数的简写

1) 省略小括号, 当形参有且只有一个的时候

  let add = n => {
        return n + n;
    }
    console.log(add(9));

2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略而且语句的执行结果就是函数的返回值

let pow = n => n * n;
console.log(pow(8));

例题

例题1

需求-1 点击 div 2s 后颜色变成『粉色』

this正常的指向

<style>
    div {
        width: 200px;
        height: 200px;
        background: #58a;
    }
</style>
<div id="ad"></div>
<script>
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener("click", function(){
        setTimeout(() => {
            //修改背景颜色 this
            this.style.background = 'pink';
        }, 2000);
    });
</script>

给this定义

<style>
    div {
        width: 200px;
        height: 200px;
        background: #58a;
    }
</style>
<div id="ad"></div>
<script>
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    let _this = this //在这里给let定义
    ad.addEventListener("click", function(){
        setTimeout(() => {
            //修改背景颜色 this
            _this.style.background = 'pink';
        }, 2000);
    });
</script>

如果这个时候给this定义了，还在内部使用this，会报错

<style>
    div {
        width: 200px;
        height: 200px;
        background: #58a;
    }
</style>
<div id="ad"></div>
<script>
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    let _this = this //在这里给let定义
    ad.addEventListener("click", function(){
        setTimeout(() => {
            //修改背景颜色 this
            this.style.background = 'pink'; //报错
        }, 2000);
    });
</script>

例题2

需求-2 从数组中返回偶数的元素

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

1、箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调 2、箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

let person = {  
    name: 'anny',  //非箭头函数
    getName: function() {  
        return this.name;  
    }  
};  

console.log(person.getName()); //anny

使用箭头函数

let person = {  
    name: 'anny',  //非箭头函数
    getName: function() {  
        return this.name;  
    }  
};  

console.log(person.getName());//输出为空

这里的 getName 是一个箭头函数，它定义在 person 对象内部，但 this 并不指向 person 对象。相反，由于箭头函数是在全局作用域（或模块作用域，取决于代码的位置）中定义的，它的 this 将指向全局对象（在浏览器中是 window，在 Node.js 中是 global 或 module.exports 的外层作用域，但通常 Node.js 的模块系统会让 this 指向 undefined，除非显式设置）。