js函数

Posted 2020-09-24 noooooob

1.函数简介

　　-Function类型，即函数的类型

　　-一个典型的javascript函数定义如下：

　　　　function 函数名称(参数表) {

　　　　　　函数执行部分;

　　　　}

　　　　注意函数的参数表直接写形参名，不用写var类型。

　　-return语句，return返回函数的返回值并结束函数运行

　　-函数也可以看做数据来进行传递

<script type="text/javascript" charset="UTF-8">
            
        
            function test(a, b) {
                
                return a + b;
            }
            alert(test(10, 20));
            
            // 函数也是一种数据类型
            alert(typeOf test);    // 返回值为function          // 函数可以传递
            function test1(func) {
                func();
            }
            
            function test2() {
                alert(‘aaa‘);
            }
            
            test1(test2);
            
            // 函数可以嵌套
            function test4() {
                function test5() {
                    alert(‘inner‘);
                }
                //只能在函数内部调用，外部不可调用
                test5();
            }
            
            test4();
        </script>

2.函数的三种定义方式

-三种定义方式
　　　- function语句式

　　　-函数直接量式

　　　-通过Function构造函数形式定义函数

-比较三种方式定义的区别

　　　　　　　　　function语句　　　　　　function构造函数　　　　　　函数直接量

　　兼容　　　　　完全　　　　　　　　　　js1.1以上　　　　　　　　　js1.2以上

　　形式　　　　　句子　　　　　　　　　　表达式　　　　　　　　　　表达式

　　名称　　　　　有名　　　　　　　　　　匿名　　　　　　　　　　　匿名

　　性质　　　　　静态　　　　　　　　　　静态　　　　　　　　　　　静态

　　解析时机　　　优先解析　　　　　　　　顺序解析　　　　　　　　　顺序解析

　　作用域　　　　具有函数作用域　　　　   顶级函数(顶级作用域)　　　  具有函数作用域

<script type="text/javascript" charset="utf-8" defer="defer" src="../commons/001.js">
            // 3种方式定义函数
            // 1 function语句函数式
            function test1() {
                // 只会被编译一次，放到内存里，静态，效率高
                alert(‘我是test1‘);
            }
            // 2.函数的直接量式   ECMAScript推荐使用
            // 只会被编译一次，放到内存里，静态，效率高
            var test2 = function() {
                alert(‘我是test2‘);
            };
            // 3.function 构造函数式  
            // 每次都会被编译，效率低，但不占用内存
            var test3 = new Function("a", "b", "return a+ b;");
            alert(test3(10,20));
            
            
            function test1() {
                alert(‘111‘);
            }
            test1();
            
            var test2 = function() {
                alert(‘222‘);
            };
            test2();
            // 执行结果为111 -》222 没问题
            
            // 但是如果将test1和test2分别放到函数体之前执行呢，
            test3();
            function test3() {
                alert(‘333‘);
            }
            test3();
            
            alert(test4); //返回undifind，表示变量声明了，但是没有赋值
            test4();
            var test4 = function() {
                alert(‘444‘);
            };
            // 执行结果为333 ，为什么444没有被弹出，因为只有function语句函数式才是优先解析，剩下是顺序解析
            
            
            // 作用域问题
            var k = 1;
            function t1() {
                var k = 2;
                function test() {return k;}    // 2
                var test = function(){return k;};// 2
                var test = new Function("return k;"); // 1  原因是具有顶级作用域，相当于在外面（全局）new 了一个函数，所以结果为1
                alert(test());
            }
            t1();
        </script>

3.函数的参数(arguments对象)
　　-arguments是表示函数的实际参数(与形参无关)

　　-callee函数(回调函数属性)

　　-arguments对象的秘密属性 callee属性。这个属性比较奇怪，它能够返回arguments对象所属的函数的引用、这相当于

在自己的内部调用自己。用法：检测函数传递的参数正确与否。

<script type="text/javascript" charset="utf-8">
            // js中 函数的参数分为：形参和实参
            function test(a, b, c, d) {
                // 形参4个 实参2个，在js中 形参个数和实参个数没有关系
                // 如何求形参的个数
                test.length;
                // 函数的实际参数，内部就是用一个数组去接受的
                // arguments对象 可以访问函数的实际参数
                // arguments对象 只能在函数的内部访问和使用
                alert(arguments.length);
                alert(arguments[0]);
                alert(arguments[1]);
                
                if (test.length === arguments.length) {
                    return a + b;
                } else {
                    return ‘参数不正确‘;
                }
                
            }
            alert(test(10, 20));
            
            // arguments对象  用的最多的地方还是做递归操作
            // callee方法 指向的是函数本身
            arguments.callee.length;// 等价于test.length
            
            
            function fact(num) {
                if (num <= 1) {
                    return 1;
                } else {
                    // 这里建议使用arguments.callee,因为可以存在这样的代码，fact = null,这样会出现问题
                    return num * arguments.callee(num - 1);
                }
            }
            alert(fact(5));
        </script>

4.this对象
　　-this对象是在运行时基于函数的执行环境绑定的。在全局函数中，this等于window，而当函数被作为某个对象

的方法调用时，this等于那个对象。

　　-也就是说this关键字总是指代调用者。

　　

<script type="text/javascript" charset="utf-8">
            // this : this对象是指在运行时期，基于执行环境所绑定的。
            // 总是指向调用者
            var k = 10;
            function test() {
                this.k = 20;
            }            
            alert(test.k); // 返回undefind，因为函数只是编译了，并没有执行
            test(); // 对于test来讲，执行环境是全局作用域  等价于window.test()；
            alert(test.k);// 还是返回undefined，因为this指的是window
            alert(window.k); // 20 等价于alert(k);
        </script>