js学习笔记4（函数）

1.箭头函数

ES6新增属性。箭头函数特别适合嵌入函数的场景。

    //只有一个参数，括号可以省略
    let double = x => {return 2 * x};
    let tripble = (x) => {return 2 * x};

    //没有参数需要括号
    let getRandom = () => {return Math.random();};

    //有多个参数需要括号
    let sum = (a, b) => {return a + b}
    /**
     * 箭头函数也可以不使用大括号,但这会改变函数的行为。如果不使用大括号
     * 那么箭头后面就只能有一行代码（赋值操作或者表达式），而且省略大括号
     * 会隐式返回这行代码的值。
     */
    let fun1 = (x) => {return 2 * x;}
    let fun2 = (x) => 2 * x; //等于上面的写法
    let fun3 =  (x) => return  2 * x ; //无效写法

箭头函数虽然语法简介，但是很多场合不适用。箭头函数不能使用arguments、super、new.target，也不能用作构造函数。箭头函数也没有protptype属性。

2.函数名

因为函数名就是指向函数的指针，所以它们跟其他包含对象指针的变量具有相同的行为。
在ES6中，所有的函数对象都会暴露一个只读的name属性，其中包含关于函数的信息。

    function sum(num1, num2) { return num1 + num2; }
    console.log(sum(1,2)); //3
    let anotherSum = sum;
    sum = null;
    console.log(anotherSum(1,2)); //3
    console.log(anotherSum.name) //sum 返回的是方法名
    anotherSum.name = '小马哥';
    console.log(anotherSum.name) //sum  name属性只读，不能修改

3.理解参数

ECMAScript函数即不关心传入的参数个数，也不关心这些参数的数据类型。定义函数时要接收2个参数，并不意味着调用的时候就要传入2个参数，可以传1个，3个甚至一个都不传。事实上，在使用function关键字定义（非箭头）函数时，可以在函数的内部访问arguments对象，从中获取传进来的每个参数值。arguments是一个类数组对象（不是Array的实例）

    function sayHi(name, message) {
        console.log(arguments.length);  //2
        return '小马哥对' + name + '说' + message;
    }

    function sayHello() {
        console.log(arguments.length);  //2
        return '小马哥对' + arguments[0] + '说' + arguments[1];
    }

    let sayHello2 = () => {
        return '小马哥对' + arguments[0] + '说' + arguments[1];
    }
    
    console.log(sayHi('韩梅梅', '今天加班'))       //小马哥对韩梅梅说今天加班
    console.log(sayHello('韩梅梅', '今天加班'))    //小马哥对韩梅梅说今天加班
    console.log(sayHello2('韩梅梅', '今天加班'))   //报错

箭头函数中的参数：如果函数是使用箭头函数语法定义的，那么传给函数的参数不能使用arguments关键字访问，而只能通过定义的命名参数访问。

    function foo(){
        let sayHello = () => {
            console.log( '小马哥对' + arguments[0] + '说' + arguments[1]);   //小马哥对韩梅梅说今天加班
        }
        sayHello();
    }
    foo('李雷','你也加班');

4.没有重载

ECMAScript函数如果定义了同名函数，则后面定义的会覆盖先定义的。

5.默认参数值

在ECMAScript5.1及以前，实现默认参数的一种常用方式就是检测某个参数是否等于undefined。在ES6开始可以支持显示定义默认参数。

   function sayName(name = '小马哥') {
        console.log('myName==' + name);
    }
    sayName('孙红雷');  //myName==孙红雷
    sayName();  //myName==小马哥

6.参数扩展与收集

ES6新增了扩展操作符，使用它可以非常简洁地操作和组合数据。扩展操作符最有用的场景就是函数定义中的参数列表。

• 6.1扩展参数：对于可迭代对象应用扩展操作符，并将其作为一个参数传入，可以将可迭代对象拆分，并将返回的每个值单独传入。

    let values = [1, 2, 3, 4]
    function getSum() {
        let sum = 0;
        for (let i = 0; i < arguments.length; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    console.log(getSum.apply(null, values)); //10---es5写法
    console.log(getSum(-1,...values,5)); //14
    console.log(getSum(...values,5,6,7,8,9,10));//55
    console.log(getSum(...values,...[5,6,7,8,9,10]));//55
    console.log(getSum(5,...values,...[5,6,7,8,9,10]));//60

• 6.2收集参数： 在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。类似于arguments对象的构造机制，只不过收集参数的结果会得到一个Array实例。

    let ignorFirst = (firstValue, ...values) => {
        console.log(values);
    }
    ignorFirst()   // []
    ignorFirst(1,2,3,4,5)   //[2, 3, 4, 5]

7.函数内部（arguments,this,new.target）

• arguments对象：这个对象只有以function关键字定义函数时候才会有，主要用于包含函数参数。arguments还有一个callee属性，是指向arguments对象所在函数的指针。

    function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);  //指向当前对象所在的函数
        }
    }

    let trueFactorial = factorial;
    factorial = function () {
        return 0;
    }
    console.log(trueFactorial(5))   //120
    console.log(factorial(5))   //0

• this对象：在标注函数（指向调用该函数的上下文）和箭头函数中（指向定义该函数的上下文）有不同的行为。
  在标准函数中：this引用的是把函数当成方法调用的上下文对象，通常这个时候，称其为this值（在网页的全局上下文中调用函数时，this指向windows）。

 window.color = 'red';
    let o = {
        color: 'blue',
    }
    function sayColor() {
        console.log(this.color);
    }
    sayColor()  //red
    o.sayColor = sayColor;
    //调用的时候，函数调用者变更为o,this指向o
    o.sayColor();   //blue

在箭头函数中：this引用的是定义箭头函数的上下文，在事件回调或者定时回调中调用某个函数，this指向的并非想要的对象。此时将回调函数写成箭头函数就可以解决这个问题。因为箭头函数中的this会保留定义该函数时的上下文。

    window.color = 'red';
    let o = {
        color: 'blue',
    }
    let sayColor = () => console.log(this.color);
    sayColor()  //red
    o.sayColor = sayColor;
    o.sayColor();   //red

• caller属性：这个属性引用的是调用当前函数的函数，或者如果的在全局作用域中调用的则为null。

  function outer(){
       let  arr =[];
       for (let i=0;i<20;i++){
           arr[i] = i;
       }
       inner();
   }
   function inner(){
       let  arr =[];
       for (let i=0;i<20;i++){
           arr[i] = i;
       }
       console.log(inner.caller)  //outer的源代码
       console.log(arguments.callee.caller) //等价于上面
   }
   outer();

• new.target属性(ES6新增)： 检测函数是否使用new关键字调用的new.target属性。如果函数是正常调用的则new.target的值是undefined，反之将引用被调用的构造函数。

8.函数属性与方法（length，prototype，apply()，call()）

• length：表示该函数方法的入参个数。
• prototype：保存引用类型所有实例方法的地方，就意味着toString()、valueOf()等方法都保存在prototype上，进而由所有实例共享。在ES5中，prototype属性是不可枚举的，因此使用for-in循环不会返回这个属性。
• apply():这个方法都会以指定的this值来调用函数，即会设置调用函数时函数体内的this对象的值。apply()接收两个参数：函数体内this的值和一个参数数组。第二个参数可以是Array的实例，但也可以是arguments对象。
• call():方法作用和apply()一样，只是传参的形式不同，第一个参数是this，后面的参数必须一个一个列出来。

   function sum(num1,num2){
        return num1 + num2;
    }
    function sum2(num1,num2){
        return sum.apply(this,arguments)
    }
    function sum3(num1,num2){
        return sum.call(this,num1,num2);
    }
    console.log(sum2(20,30)); //50
    console.log(sum3(20,30)); //50

apply()和call()，更重要的作用是控制函数调用上下文，即函数体内this值的能力。

window.color = 'red';
    let o = {
        color: 'blue'
    };
    function sayColor() {
        console.log(this.color);
    }
    sayColor();    //red
    sayColor.call(this);    //red
    sayColor.apply(window);    //red    
    sayColor.apply(o);    //blue
    sayColor.call(o);    //blue

9.闭包

匿名函数经常被人误以为是闭包。闭包指的是那些引用了另一个函数作用域变量的函数，通常是在嵌套函数中实现的。

    function compare(propertyName) {
        return function (object1, object2) {
            //内部函数（匿名函数）引用了外部函数的变量propertyName
            let value1 = object1[propertyName];
            let value2 = object2[propertyName];
            return value1 === value2 ? 0 : value1 > value2 ? 1 : -1;
        }
    }

在这个内部函数被返回并在其他地方被使用后，它仍然引用着哪个变量。因为这是因为内部函数的作用域链包含compare()函数的作用域。

10.this 对象

在闭包中使用this会让代码变复杂。如果内部函数没有使用箭头函数定义，则this对象会在运行时绑定到执行函数的上下文。如果在全局函数中调用，非严格模式下，this等于window。

  window.identity = 'The Window';
    let object = {
        identity: 'My Object',
        getIdentityFunc() {
            return function () {
                return this.identity;
            }
        }
    }
    console.log(object.getIdentityFunc()())     //The Window

object.getIdentityFunc()返回函数，所以object.getIdentityFunc()()立即调用返回的函数，从而得到一个字符串。每个函数在被调用的时候都会创建两个特殊的变量：this和arguments。内部函数用于不可能直接（可以间接，箭头函数或者使用变量）访问外部函数的这两个变量。

11.立即调用的函数表达式

立即调用的函数表达式又称为立即嗲用的函数表达式（IIFE）。类似于函数声明，但是由于被包含在括号中，所以会被解释为函数表达式。紧跟在第一组括号后面的第二组括号会立即调用前面的函数表达式。在ES5.1及以前，为了防止变量定义外泄，IIFE是个非常有效的方式。也不会导致闭包相关的内存问题，因为不存在对这个函数的引用，为此，只要函数执行完毕，其作作用域链就可以被销毁。

    (function () {
        //块级作用域
    })();