08-第八章 函数[自执行] [传参] [return] get

一、函数

1. 某个变量可以先使用后定义，这种行为称为变量提升行为(var)

2. 函数声明可以先使用后定义。
   函数表达式不行

3. 匿名函数不能单独存在
   匿名函数必须绑定事件
   只有具名函数才能单独存在

ES5:

        (function () {
            //  IEFE    立即执行的函数表达式
            console.log(1);
        })();

ES6:块作用域

父级是获取不到子级的作用域的变量的

{
  let a = 1;
}

函数自执行方式,即创建立即调用一次

1. 函数申明

1.    //一有名函数
2.    function abc(){}//此时abc就代表此函数，函数不会自动运行，需要调用运行。
3.    //二匿名函数
4.    function (){} 

(1). 带名字的函数，需函数名加小括号运行，如abc();

(2). 匿名函数，不进行赋值会报错

(3). 匿名函数不能独立存在的，因为没有意义找不到它，匿名函数要独立存在，必须要有名字

   function fn () {
            console.log("fn函数调用成功");
        }

• 通过 console 输出 fn()

image.png

(4). 函数一旦加 () 就是调用（执行函数）自执行

  //  点击时才会执行(没加括号)；
          document.onclick = fn;
        function fn (){
            console.log("click");
        }
//  加了（）就会自动执行了，不会依赖于前面的事件

• 存储在数组里

        let arr = [function (){
            console.log("这是数组的数据");
        }];
        document.onclick = arr[0];

• 存储在JSON对象里

        let obj = {
            a : function () {
                console.log("ojb里的a函数");
            }
        }
        obj.a();

2. 函数表达式

1.        //一
2.        var a = function(){}           //匿名函数
3.        a();               //此时用变量名加()来调用
4.        var b = function abc(){}      //匿名函数
5.        b();              //此时用变量名加()来调用;

如果abc()调用会报错

3. 函数声明 和 函数表达式的区别

函数声明：不能自动执行，必须通过函数名（）

        function fn(){

        }

函数表达式：可以加括号自执行

        let fn1 = function(){
            console.log("123");
        }();

一、函数自执行

1 、函数后面加用小括号,然后在用小括号包起来

1.(function(){}())//函数后面加用小括号包起来

2、 函数用小括号包起来,然后后面加小括号

1.(function(){})()//用小括号包起来

3、 函数后面加小括号,然后在函数前面加 + - ~ ！其中的一个符号

1.//+
2.+function(){}()
3.

1.//-
2.-function(){}()

1.//~
2.~function(){}()

1.//!
2.!function(){}()

• 函数的身体放在什么地方，它的作用域就在什么地方，而不看函数调用

二、函数传参

1、 对应传参

形参:即形式参数，是用来接收函数调用时传递过来的数据，命名与变量一致
实参:即真实参数，是给形参传递的具体数据，任何数据类型都可以称为实参

当 形参个数 多于 实参个数 的时候，实参没传，默认形参的值为undefined

1.function fn( a,b){//a,b为形参，且a 为 20，b为10，一一对应
2.    console.log(a);//20
3.    console.log(b);//10
4.    console.log(a+b);//30
5.}
6. fn(20,10);//20,10为实参
7.

---

2、 不定参，arguments /'ɑrɡjumənts/

实参个数不定，会导致形参个数也不确定不定参
es5 不定参：函数内部有一个关键字：arguments
es6：没有不定参。要实现es5不定参的功能。有对应的招数：剩余参数

• 剩余参数出现在函数里面的括号的时候，一定只能是最后一个位置。

1、不定参：实参个数不确定

1.function fn( a,b){//a,b为形参，且a 为 20，b为10，一一对应
2.    console.log(a);//20
3.    console.log(b);//10
4.    console.log(a+b);//30
5.}
6. fn(20,10);//20,10为实参
7.

2、arguments所有函数都存在arguments， 是所有实参的集合，arguments是一个类数组，arguments.length 可以返回个数

        function fn () {
            console.log(arguments.length);
        }

        fn(1,2,3);
        fn(1,2,3,4);
        fn(1,2,3,4,5);
        fn(1,2,3,4,5,6);
        fn(1,2,3,4,5,6,7);
        fn(1,2,3,4,5,6,7,8);
        fn(1,2,3,4,5,6,7,8,9);
        fn(1,2,3,4,5,6,7,8,9,10);

image.png

小案例

        function fn () {

            let result = 0;

            for ( let i = 0; i < arguments.length; i++) {
                
                result = result + arguments[i];

                /*
                    result1 = 0 + 1 === 1;
                    result2 = 1 + 2 === 3; 
                    result3 = 3 + 3 === 6;
                */
            }
                console.log(result);
        }

        fn(1,2,3);
        fn(1,2,3,4);
        fn(1,2,3,4,5);
        fn(1,2,3,4,5,6);
        fn(1,2,3,4,5,6,7);
        fn(1,2,3,4,5,6,7,8);
        fn(1,2,3,4,5,6,7,8,9);
        fn(1,2,3,4,5,6,7,8,9,10);

image.png

3. es6(剩余参数)

        function fn (...arg) {
            console.log(arg);
        }

        fn(1,2,3);
        fn(1,2,3,4);
        fn(1,2,3,4,5);
        fn(1,2,3,4,5,6);
        fn(1,2,3,4,5,6,7);
        fn(1,2,3,4,5,6,7,8);
        fn(1,2,3,4,5,6,7,8,9);
        fn(1,2,3,4,5,6,7,8,9,10);

        function add( a, ...arg) {
            console.log(a);
            console.log(arg);
        }
        //  只接收除了a后面的参数

三、函数中的return

1、函数中默认 return 的返回值为 undefined

• 函数正常执行结束会有返回值，返回值默认 undefined
• 函数里一旦执行到 return 语句,就会立刻停止函数执行
• ( return 后续的代码永远不会执行) ,并返回 return 后面的值给外界

        function fn () {
            let a = 1;
            let b = 2;
            let c = a + b;
            return c;
            console.log(c);
        }

        let a = fn();
        let b = a + 5;

        console.log(a);
        console.log(b);

image.png

2、自定义返回值

1、有时候我们需要函数中返回我们需要的值，这个时候return很有用

        function fn( a,b){
            a+b;
        }
        var a = fn();
        console.log( a );  //undefined

2、return 返回的数据类型可以是任意类型

1.    function fn( a,b){
2.        a+b;
3.        return function(){  alert('ok') };
4.    }
5.    var a = fn();
6.    a();//此时a就是返回的函数
7.    //等同于
8.    fn()();
9.

3return 然后的代码不再执行，整个函数结束

1.    function fn( a,b){
2.        a+b;
3.        return function(){};
4.        console.log('ok');//此代码不会再执行
5.    }
6.    fn();
7.

四、函数中的this

源头
在函数内部使用函数的调用者（函数的执行上下文可以理解为环境）：this

通过名字加括号执行的函数:叫函数的自执行

所有的自执行函数内部的 this 都指向 windows,前提是这个函数不能是其他对象的属性

在js里面；除了运算里面的括号以外；其他能通过加 () 调用的都是函数

this 的问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

函数自执行不是某一个对象的属性时，都指向window

this 可以人为的修改指向

• 事件函数里面的this就是指触发这个事件的元素，例如：

        obox.onclick = function(){
            alert( this); //obox,本函数是由obox触发的
        }
        ////
        function fn(){
            alert( this );
        }

        fn();
        //window,因为fn()属于window，fn()其实是window.fn();是window让fn执行的

五、getComputedStyle()

---

getComputedStyle(obj,null)[cssStyle]获取计算后的样式对象,只读

• 不要获取复合样式:如background
• 不要获取未设置的样式:如width 谷歌是具体宽度,ie是auto

兼容：ie8及以下 obj.currentStyle[cssStyle]

1.if( window.getComputedStyle ) { 
2.    return getComputedStyle(obj)[attr];      
3.}else { 
4.    return obj.currentStyle[attr];
5.} 

六、 箭头函数

箭头函数 () => {}

function fn () {} 没有箭头函数写法

箭头函数跟function 函数的区别就在于： 没有this

自己没有this 会冒到父级上来，实际上就是用的父级的this

如果箭头函数里面只有一条语句，并且这条语句是return的时候，return也不用写

const fn = (a, b) => a + b

箭头函数只有一个形参时，形参的圆括号可以不用写

const fn  = a => {}