【JavaScript】箭头函数

ES6 箭头函数

ES6 中 新的书写函数的方式
是对于函数表达式的简写

语法 () => {}
() 书写形参的位置
=> 箭头函数的标志
{} 书写代码的位置

特点
1. 可以省略小括号不写
当形参只有一个的时候可以不写小括号
2. 可以省略大括号不写
当函数体只有一句话，可以不写大括号，
会自动把这句话的结果当做函数的返回值
3. 箭头函数没有arguments
arguments: 是函数参数的默认集合，天生存在
4. 箭头函数没有this
箭头函数内的this 就是该作用域外部作用域的this
箭头函数外面的函数this是啥，箭头函数this就是啥
注意: 事件处理函数不要用箭头函数，会改变this指向
5. 箭头函数不能当做构造函数使用
不能和 new 关键字连用

箭头函数语法

1.省略()不写

当形参只有一个的时候可以省略小括号不写

      const fn = a => {
        return a + 10;
      };
      console.log(fn(5));

2.省略{}不写

当{}只有一句话，可以省略{}不写， 而且会自动把这句话当做函数的返回值

    const fn = a => a + 10
    console.log(fn(5));


    const arr = [
        {id:1, username:'tom',age: 18},
        {id:2, username:'jerry',age: 19},
        {id:3, username:'nick',age: 20},
    ]
    const id = 3
    // 找到数组中id为3的这一项  --> find 
    const res = arr.find(function(item){
        return item.id === id
    })
    console.log(res);

    const res = arr.find(item=> item.id === id)
    console.log(res);

3.箭头函数没有argument

function fn() {
        // arguments 表示函数参数的集合
        console.log(arguments, arguments.length, arguments[0]);

    }
    fn(10, 20, 30, 40)

    const fn = () => {
        console.log(arguments);
    }
    fn(10, 20, 30, 40)

4. 箭头函数没有this

const fn = () => {
        console.log(this);
    }
    fn()

    const obj = {
        a: 100, 
        f: ()=>{
            console.log(this);
        }
    }
    obj.f()

    document.onclick = () => {
        console.log(this);
    }

    document.onclick = function() {
        console.log(this); // 事件处理函数的this指向事件源document
        var fn = () => {
            console.log(this, 1);
        }
        fn() // 箭头函数定义在事件处理函数作用域中，this指向父级
    }

箭头函数案例

需求:
希望这个this指向的是li
打印出来li的内容

案例1-定时器

const lis = document.querySelectorAll('li')
    lis.forEach(function (li) {
        li.onclick = function () {
            setTimeout(function () {
                console.log(this);
                // 希望这个this指向的是li 
                // 打印出来li的内容 
                console.log(this.innerHTML);
            }, 200);
        }
    })

这里的this在定时器内, 定时器里的函数是自动执行, 指向window, 我们需要将this指向li, 所以接下来修改代码

案例2-事件处理函数

const lis = document.querySelectorAll('li')
    lis.forEach(function (li) {
        li.onclick = function () {
            var fn = function() {
                console.log(this);
                console.log(this.innerHTML);
            }
            setTimeout(fn.bind(li), 200);
        }
    })

这里的在点击中触发事件click, 所以this指向事件源li

案例3-使用that

 const lis = document.querySelectorAll('li')
    lis.forEach(function (li) {
        li.onclick = function () {
            const that = this
            setTimeout(function () {
                console.log(that);
                console.log(that.innerHTML);
            }, 2000);
        }
    })

这里使用that, 是that变量提前将this存起来再使用, 也可以使用其他变量将this存起来使用, 通俗的写法就是写成that或者_this

案例4-使用箭头函数

const lis = document.querySelectorAll('li')
    lis.forEach(function (li) {
        li.onclick = function () {
            setTimeout(()=>{
                console.log(this);
                console.log(this.innerHTML);
            }, 200);
        }
    })

箭头函数的this不取决于调用取决于定义, 定义在哪个作用域就是指向谁, 这里的箭头函数定义在了事件处理函数中, 所以this指向事件源
注意: 这里的定时器已经不再是原来的定时器, 原来的定时器里面的参数写的是普通函数, 将普通函数改成箭头函数之后就按照箭头函数的情况考虑

案例4-使用箭头函数-加强版

const lis = document.querySelectorAll('li')
    lis.forEach(li => {
        console.log(this);
        li.onclick = ()=> {
            setTimeout(()=>{
                console.log(this);
                console.log(this.innerHTML);
            }, 2000);
        }
    })

这次把事件处理函数也改成了箭头函数, 那么同样是this指向上一级(父级)作用域, 这里指向了window