形参的默认值-及return的注意事项-及this的使用-和箭头函数的知识

形参的默认值 es6

形参不需要声明 声明的时候 会报错 重复声明

为什么会是NaN？

因为val2接受不到实参里面传来的数据，val和val2相加，数据不匹配，所以会报错

 function zhuque(val,val2){
    
            console.log(val + val2); //NaN
        }
        zhuque(1)

为什么会等于12?

因为实参里面第二项有数据，会优先选择实参里面的数据，val2=2默认值则无效，所以1+5+6=12

 function zhuque(val,val2 = 2,...rest){
    
            console.log(val + val2 + rest[0]); //12
        }

        zhuque(1,5,6)

为什么会等于10?

因为函数里面修改了val的值，第一次修改的是12，第二次修改的是10，js执行的顺序是从上到下的，后置覆盖前面，所以val等于10

function zhuque(val,val2 = 2){
    
            val = 12;
            val = 10 //修改val的值 
            console.log(val); //10
        }
        zhuque(1,5)

为什么会有return?return是干什么的

如果你想把里面的值给外面用，这样会不会很麻烦呢?于是就诞生了return
return
返回值 决定了函数执行之后 将要抛出的东西 比如 一个函数内部运算好的值 处理得数据
函数如果没有手动 定义return的内容 那么 函数执行完毕 默认return undefined

 let num = 0
        function zhuque(val,val2){
    

            // 传参 实参 1
            console.log(val + val2); //3
            num = val + val2
          
        }
        zhuque(1,2)
        console.log(num); //3

使用return的注意事项

1.如果你要使用return,那么return后面的语句将不会在执行

  function zhuque(val,val2){
    
           let num = val + val2 
           return num  

           console.log("哈哈哈"); //不会执行
        }

        let value = zhuque(1,2)
        console.log(value); //3

2.return后面跟了好几条数据，但它只会返回最后一条数据

       function zhuque(val,val2){
    
           let num = val + val2 
           return 1, "雀雀", "雀雀我爱你"

           console.log(123456);
        }

        let value = zhuque(1,2)
        console.log(value); //雀雀我爱你

3.如果你需要返回多条，就需要把数据存放在数组和普通对象里面

  function zhuque(val,val2){
    
           let num = val + val2 
           return [1, "雀雀", "雀雀我爱你"]
        }

        let value = zhuque(1,2)
        console.log(value);

4.return后面会接运算，会运算到简单的结果，再把结果返回出去

    function zhuque(val,val2){
    
           let num = 0;
           return num === 0 ? 3 : 0 
        }

        let value = zhuque(1,2)
       console.log(value);//3

5.return可以返回任意的数据类型

  function zhuque(val,val2){
    
           let num = 0;
           return function fn(){
    console.log("fn");}
        // return function (){console.log("fn");} //匿名

        }

        let value = zhuque(1,2)
       console.log(value); //ƒ fn(){console.log("fn");}


       function zhuque(val,val2){
    
           let num = 0;
           return function fn(){
    console.log("fn");}
        // return function (){console.log("fn");} //匿名

        }

        zhuque(1,2)() //fn

为什么指向window?

this就近指向调用函数的对象，如果没有调用函数的对象，则指向window
跟函数在哪声明没有关系， 而是和调用环境 调用者有关
调用时就看 函数地址存在谁身体里 就近 不看爷爷 只看爸爸
事件函数里的this 指向事件的触发者

  a = 1
        console.log(window.zhuque);
        function zhuque() {
    
            console.log(this); //window

            function fn() {
    
                console.log(this); //window
            }
            fn()
        }
        zhuque()

修改this指向

        call 第一个参数为 this将要修改指向的对象 有参数时 后面, 一一跟上即可
        可以主动的执行函数

        apply 第一个参数为 this将要修改指向的对象 有参数时 数组包一下 可以主动的执行函数

        bind 第一个参数为 this将要修改指向的对象 有参数时 后面, 一一跟上即可，不会主动执行函数
        但会return函数本体 再加一个括号即可执行

  window.a = 0

         let obj1 = {
    
             a:1
         }
         let obj2 = {
    
             a:2 
         }

         function fn(num1,num2,num3){
    
             console.log(this);
         }

         fn(1,2,3)
         fn.call(obj1,1,2,3)
         fn.apply(obj2,[1,2,3])

        fn.bind(obj2,1,2,3)()
        

es6箭头函数

(形参)=>{代码块} 就算没有形参，括号也要必须写
只有一个形参，可以不写括号，

 let fn = val => console.log(val);
        fn(10086) //10086

多个形参的话，必须要写括号

   let fn = (val,val2) => console.log(val,val2);
        fn(10086,100) //10086

只需要一个return的话，可以省略{}和return

// let fn = val => {return val * 2}
         let fn = val => val * 2 
        console.log(fn(100));

如果有其他代码，必须加上{},如果需要return时，这时，也必须写上return

 let fn = val =>{
    
            console.log(val);
            return val * 2
        }
        console.log(fn(100));

箭头函数根本没有this, 指向外层的this，如果外层也没有this，则指向window 顶层对象

  let obj = {
    
         fn2:()=>{
    
             console.log(this);
         }
        }
        obj.fn2()

此时的this，则指向外层的this

    let obj = {
    
         fn2:()=>{
    
             console.log(this);
         },
         fn3:function(){
    
             console.log(this); //obj
             let fn4 = ()=>{
    
                 console.log(this); //obj
             }
             fn4()
         }
        }
        obj.fn2()

        obj.fn3()

es6写法 函数在对象内的简洁写法

   let obj2 = {
    
            zhuque(){
    },
            tongxuemen(){
    },
            fn1008(){
    }
        }

        obj2.zhuque()
        obj2.tongxuemen()
        obj2.fn1008()



  	   // 写法过于复杂
        let obj2 = {
    
            zhuque:function(){
    },
            tongxuemen:function(){
    },
            fn1008:function(){
    }
        }