【JavaScript】30_可变参数

19、可变参数

arguments

• arguments是函数中又一个隐含参数

• arguments是一个类数组对象（伪数组）

  和数组相似，可以通过索引来读取元素，也可以通过for循环变量，但是它不是一个数组对象，不能调用数组的方法

• arguments用来存储函数的实参，

  无论用户是否定义形参，实参都会存储到arguments对象中

  可以通过该对象直接访问实参

    <script>
        function fn(){
            console.log(arguments[2])//读取到下标为2的函数参数
            console.log(Array.isArray(arguments))//false
            for(let i = 0; i < arguments.length; i++){
                console.log(arguments[i])
            }

            //上下两种循环效果一样

            for(let v of arguments){
                console.log(v)
            }

            arguments.forEach(element => {console.log(element)});
        }
        fn(1,10,23)

        //定义一个函数，可以求任意个数值的和
        function sum(){
            //通过arguments,可以不受参数数量的限制更加灵活的创建函数
            let result = 0;
            for(let num of arguments){
                result += num
            }
            return result
        }
    </script>

可变参数，在定义函数时可以将参数指定为可变参数

• 可变参数可以接收任意数量实参，并将他们统一存储到一个数组中返回

• 可变参数的作用和arguments基本是一致，但是也具有一些不同点：

  1. 可变参数的名字可以自己指定

  2. 可变参数就是一个数组，可以直接使用数组的方法

  3. 可变参数可以配合其他参数一起使用

    <script>
        function fn2(...abc){
            console.log(abc)
        }

        function sum2(...num){
            return num.reduce((a,b) => a + b, 0)
        }

        // 当可变参数和普通参数一起使用时，需要将可变参数写到最后
        function fn3(a, b, ...args) {
            // for (let v of arguments) {
            //     console.log(v)
            // }

            console.log(args)
        }

        fn3(123, 456, "hello", true, "1111")
    </script>

函数

根据函数调用方式的不同，this的值也不同：

1. 以函数形式调用，this是window
2. 以方法形式调用，this是调用方法的对象
3. 构造函数中，this是新建的对象
4. 箭头函数没有自己的this，由外层作用域决定
5. 通过call和apply调用的函数，它们的第一个参数就是函数的this

调用函数除了通过 函数() 这种形式外，还可以通过其他的方式来调用函数
比如，我们可以通过调用函数的call()和apply()来个方法来调用函数

函数.call()

函数.apply()

• call 和 apply除了可以调用函数，还可以用来指定函数中的this
• call和apply的第一个参数，将会成为函数的this
• 通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来
• 通过apply方法调用函数，函数的实参需要通过一个数组传递

    <script>
        function fn(){
            console.log('函数执行了~~~',this)
        }

        const obj = {name:'孙悟空',fn}

        fn.call(obj)
        fn.apply(console)

        function fn2(a, b) {
            console.log("a =", a, "b =", b, this)
        }

        // fn2.call(obj, "hello", true)
        fn2.apply(obj, ["hello", true])
    </script>