阅读JavaScript文档-函数相关

---

一、使用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;
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9

  • 运行结果
    

二、剩余参数…theArgs

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

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

• 代码示例

      function multiply(multiplier, ...theArgs) {
          return theArgs.map(x => multiplier * x);
      }
  
      var arr = multiply(2, 1, 2, 3);
      console.log(arr);//输出:[2,4,6]
  1
  2
  3
  4
  5
  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)
    1
    2
    3
    4
    5
    6

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

  • 在普通的闭包函数中

        function testThis(){
            let data=10
            setTimeout(function(){
                console.log("this.data:",data)
            },1000)
        }
    
        testThis()
    1
    2
    3
    4
    5
    6
    7
    8

    

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

        function testThis(){
            this.data=10
            setTimeout(function(){//严格模式下this指向内部函数
                console.log("this.data:",this.data)
            },1000)
        }
    
        let newThis=new testThis()
    1
    2
    3
    4
    5
    6
    7
    8

    

    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()
    1
    2
    3
    4
    5
    6
    7
    8
    9

    

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

        function testThis(){
            this.data=10
            setTimeout(()=>{
                console.log("this.data:",this.data)
            },1000)
        }
    
        let newThis=new testThis()
    1
    2
    3
    4
    5
    6
    7
    8

    

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)//第一个参数会被忽略
            }
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 执行结果
    

• (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)
            }
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

  • 执行结果
    
    • 输出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)
        }
    1
    2
    3
    4
    5
    6
    7

    
    

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

    

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

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

    

• (6)箭头函数返回对象字面量时
  需要用圆括号把对象字面量包裹起来，防止误认为是函数块体，当为函数块体时，必须要有return返回值

• (7)立即执行函数

      (()=>'immediate function')()
  1

  

• (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);
            });
        };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • 运行结果
    

• (10)箭头函数的递归

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

  

参考

1.箭头函数