• 箭头函数以及this指向问题


    一、定义函数的方式

    //1.function
    const aaa = function () {
    
    }
    //2.对象字面量中定义函数
    const obj = {
        bbb() {
    
        }
    }
    //3.ES6中的箭头函数
    const ccc = (参数) => {
    
    }

    二、箭头函数的参数和返回值

    1、参数问题

    //1.1两个参数
    const sum = (num1, num2) => {
        return num1 + num2
    }
    //1.2一个参数(括号可以省略)
    const power = num => {
        return num * num
    }

    2、返回值

    //2.1代码块中有多行代码时正常写
    
    const test = () => {
        console.log('11111')
        console.log('22222')
    }
    //2.2代码块中有一行代码时省略大括号
    const power = num => num * num

    三、箭头函数中的this

    //1.什么时候使用箭头函数函数:当把一个函数作为另一个函数的参数的时候
    setTimeout(function () {
        console.log(this) //window
    },1000)
    
    setTimeout ( () => {
        console.log(this) //window
    },1000)
    
    const obj = {
        aaa() {
            setTimeout(function () {  //函数调用是通过call,call会把window作为第一个参数传进去
                console.log(this) //window
            })
    
            setTimeout(() => { //箭头函数没有自己的this,只会一层一层向外查找
                console.log(this) //aaa obj对象
            })
        }
    }
    obj.aaa()
    
    const obj = {
        aaa() {
            setTimeout(function () {  //函数调用是通过call,call会把window作为第一个参数传进去
                setTimeout(function (){
                    console.log(this) //window
                })
    
                setTimeout( () => {
                    console.log(this) //window
                })
            })
            
            setTimeout(() => { //箭头函数没有自己的this,只会向外作用域一层一层向外查找
                setTimeout(function (){
                    console.log(this) //window
                })
    
                setTimeout( () => {
                    console.log(this) //aaa obj对象
                })
            })
        }
    }
    obj.aaa()

    总结:

    箭头函数没有自己的this,他是在定义函数的时候绑定的,而不是在执行过程中绑定的,它继承了定义函数的对象,例如:

    function Person () {
        this.name = 'lihh',
        this.age = 18,
        setInterval(() => {
            console.log (this)
            console.log('我叫' + this.name + '今年' + this.age)
        }, 1000);
    }
    
    let p = new Person()

    打印结果是this指向了Person

     再看下面这种非箭头函数:

    function Person () {
        this.name = 'lihh',
        this.age = 18,
        setInterval(function () {
            console.log (this)
            console.log('我叫' + this.name + '今年' + this.age)
        }, 1000);
    }
    
    let p = new Person()

    打印结果是this指向了window,这是由于setInterval跟setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

     四、使用箭头函数的好处

    1.解决了匿名函数的this指向问题

    上面例子打印结果为undefined,是因为此时this指向的是window对象,然而window对象上面并没有绑定name和age属性,所以找不到

     五、什么时候不能使用箭头函数

    (待补充)

    不积跬步无以至千里
  • 相关阅读:
    设计模式观察者模式在Java中的使用示例
    设计模式装饰者模式在Java中的使用示例
    git 恢复误删的远程分支
    从基础到实战 手把手带你掌握新版Webpack4.0
    掘金小册 – Taro 多端开发实现原理与项目实战
    react+tsx中使用betterscroll
    Taro3最新版本开发企业级出行全栈项目
    babelpolyfill的几种使用方式
    Vue3 + React18 + TS4 入门到实战
    typescript学习
  • 原文地址:https://www.cnblogs.com/lyt0207/p/11967106.html
Copyright © 2020-2023  润新知