函数

89 阅读1分钟

🧨 函数提升

函数声明会被提升到当前作用域的最前端;

fn()
function fn() {
    console.log(0)
}

函数参数

1.函数动态参数(argumengs是一个伪数组,包含函数调用时传入的所有实参)

function getSum() {
    console.log(arguments)
}
getSum(0, 2, 3, 4)

2.剩余参数(arr是一个真数组)

function getSum(a,...arr) {
    console.log(arr)
}
function getSum2(...arr) {
    console.log(arr)
}
getSum(1, 2, 3, 4)
getSum2(1, 2, 3, 4)

🎊 箭头函数

目的:使用更简短的函数并且不带this;
使用场景:使用匿名函数的地方;
    // 1.基本使用
    const fn = () => {
        let a = 1
        console.log(a)
    }
    fn()
    
    // 2.只有一个参数可以省略小括号,只有一行代码可以省略大括号和return,
    const fn = x => x + x
    console.log(fn(1))
    
    // 3.箭头函数没有动态参数arguments,有剩余参数
    const getSum = (...arr) => {
        console.log(arr)
    }
    getSum(1, 2, 3)

🎉 箭头函数的this

// 4.箭头函数的this指向

    箭头函数没有this,从自己的作用域链沿用上一层的this
    <script>
        // 1
        console.log(this) // window
        
        function fn() {
            console.log(this) // window
        }
        fn()
        
        // 2
        let obj = {
            sayHi: function() {
                console.log(this) // obj
            }
        }
        obj.sayHi()
        
        // 3
        let obj2 = {
            sayHi: () => {
                console.log(this) // window
            }
        }
        obj2.sayHi()
        
        // 4
        let obj3 = {
            sayHi: function() {
                console.log(this) // obj3
                const fn = () => {
                    console.log(this) // obj3
                }
                fn()
            }
        }
        obj3.sayHi()
    </script>