阅读JavaScript文档-函数相关_javascript查看相关方法文档-优快云博客

本文链接：https://blog.youkuaiyun.com/hehe_soft_engineer/article/details/126828250

本文深入探讨JavaScript的高级特性，包括arguments对象的使用，剩余参数...theArgs的概念，以及箭头函数的特性和陷阱。通过实例展示了如何处理不定数量的参数，如何利用闭包和箭头函数实现特定功能，特别强调了箭头函数的this绑定规则及其在构造函数和闭包中的应用。同时，文章还提到了箭头函数不能作为构造器和函数生成器的限制，以及它们在对象方法和立即执行函数中的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用arguments对象

函数的实际参数会被保存在一个类似数组的arguments对象中
在func(“A”,”B”,”C”,”D”)中，参数会被保存到arguments对象中，arguments[0]=”A”。
使用arguments对象，你可以处理比声明的更多的参数来调用函数
这在你事先不知道会需要将多少参数传递给函数时十分有用。你可以用arguments.length来获得实际传递给函数的参数的数量，然后用arguments对象来取得每个参数。

官方文档的例子，在不知道参数个数有多少时，可以动态的获取并使用每个参数
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions#使用_arguments_对象

代码

    function myConcat(separator) {
        var result = ''; // 拼接结果字符串
        var i;
        // iterate through arguments
        for (i = 1; i < arguments.length; i++) {
           result += arguments[i] + separator;
        }
        return result;
    }

运行结果

二、剩余参数…theArgs

剩余参数语法允许将不确定数量的参数转化表示为数组

下面这个例子中将第二个到最后一个参数组成数组theArgs

代码示例

    function multiply(multiplier, ...theArgs) {
        return theArgs.map(x => multiplier * x);
    }

    var arr = multiply(2, 1, 2, 3);
    console.log(arr);//输出:[2,4,6]

注：…是展开操作符，如arr=[1,2,3]，func(x,y,z){}，如果希望将arr传入func，则可以使用展开符，func(…arr)

三、嵌套函数与闭包

JavaScript文档-闭包

四、JavaScript的构造函数

在阅读JavaScript文档-对象中 “2.构造函数创建对象(JavaScript1.1版本以前需要用这个)”

五、箭头函数

1.特点

(1)语法简洁

代码示例

    var arr=[1,2,3]
    var arr_double1=arr.map(function(item){
        return item*2
    })

    var arr_double2=arr.map(item=>item*2)

运行结果

(2)箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this(重要，易混淆)

在普通的闭包函数中

    function testThis(){
        let data=10
        setTimeout(function(){
            console.log("this.data:",data)
        },1000)
    }

    testThis()

func3

变成构造函数中
1.在内部函数使用this，其指向的是内部函数作用域，则输出为undefined

    function testThis(){
        this.data=10
        setTimeout(function(){//严格模式下this指向内部函数
            console.log("this.data:",this.data)
        },1000)
    }

    let newThis=new testThis()

func4

2.如果要把this传递到内部函数，可以定义一个变量指向this，内部函数直接可以访问该变量(嵌套函数的特点)，进而获取到this的属性值。

    function testThis(){
        this.data=10
        var thisvar=this
        setTimeout(function(){
            console.log("this.data:",thisvar.data)
        },1000)
    }

    let newThis=new testThis()

func5

普通闭包函数换成箭头函数
箭头函数的this指向的是外部函数的this

    function testThis(){
        this.data=10
        setTimeout(()=>{
            console.log("this.data:",this.data)
        },1000)
    }

    let newThis=new testThis()

func6

2.需要注意的用法

(1)由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个箭头函数时，只能传递参数，他们的第一个参数会被忽略。

代码示例

    var addStruct={
        sum:0,
        add(addnum){
            var addfunc=(addnum)=>addnum+this.sum
            return addfunc(addnum)//返回的是addnum+this.sum
        },
        addBycall(addnum){
            var addfunc=(addnum)=>addnum+this.sum
            return addfunc.call(null,addnum)//第一个参数会被忽略
        }
    }

执行结果

(2)当箭头函数作为方法被定义时

代码示例

    var addStruct={
        sum:0,
        add(addnum){
            var addfunc=(addnum)=>addnum+this.sum
            return addfunc(addnum)//返回的是addnum+this.sum
        },
        addBycall(addnum){
            var addfunc=(addnum)=>addnum+this.sum
            return addfunc.call(null,addnum)//第一个参数会被忽略
        },
        arrowfunc:()=>{
            console.log("this.sum:",this.sum)
        }
    }

执行结果
- 输出undefined的原因
  因为箭头函数没有自身this，当他向上找this时得到的是global，global里面没有定义sum属性
- 查看this
  
  当箭头函数作为一个对象的属性(方法)时，其this指针永远指向global，无论这个对象外面嵌套了多少层(即对象作为其上一层对象的属性，上一层对象又作为上上层对象的属性…)

(3)箭头函数不能作为构造器
(4)箭头函数不能用作函数生成器
- yield 关键字通常不能在箭头函数中使用

(5)箭头函数同样支持参数列表和参数解构

参数列表和参数解构

    function sum([a,b,c]=[1,2,3],{x:d}={x:10}){
        console.log("a+b+c+d:",a+b+c+d)
    }

    var arrowSum=([a,b,c]=[1,2,3],{x:d}={x:10})=>{
        console.log("a+b+c+d:",a+b+c+d)
    }

func11
func12

    var arrowSum=({x:d}={},[a,b,c]=[1,2,3])=>{
        console.log("a+b+c+d:",a+b+c+d)
    }

func13

可以直接使用属性值来计算

    var arrowSum=({x},[a,b,c]=[1,2,3])=>{
        console.log("a+b+c+d:",a+b+c+x)
    }

func14

(6)箭头函数返回对象字面量时
需要用圆括号把对象字面量包裹起来，防止误认为是函数块体，当为函数块体时，必须要有return返回值
(7)立即执行函数
```
    (()=>'immediate function')()
```
(8)箭头函数在一些函数或方法体内部使用非常常见
- 如：map,reduce,filter,promise.then,setTimeout()…

(9)箭头函数可以闭包

代码示例

    function OutFunc(){//标准闭包
        var i=0;
        return function addfunc(){
                return (++i);
        };
    };

    function ArrowFunc(){//箭头函数闭包
        var i=0;
        return (()=>{
            return (++i);
        });
    };

运行结果

(10)箭头函数的递归

    var cumulate=(x)=>(x==1?1:x+cumulate(x-1))

func17

参考

1.箭头函数