zoukankan      html  css  js  c++  java
  • WebLesson07JS的函数及作用域 17王晶龙

    一、函数

      1.有名函数和匿名函数

        函数:是由事件驱动的或者当它被调用时执行的可重复使用的代码块,包裹在花括号中,前面使用了关键词 function:

        有名函数:有名字的函数
        函数名加括号执行 / 充当事件函数执行

        function fn() {

          alert(1);

        }
        fn();

        匿名函数:没有名字的函数
        匿名函数不能单独出现 一般充当事件函数,匿名函数的作用是避免全局变量的污染以及函数名的冲突   

        匿名函数主要三种写法:

        1)使用()将函数及函数后的括号包裹

          (function(){}());

          注:此方式把()换成[]也可以

        2)使用()值包裹函数值
          
    (function(){})(); 

          注:此方式把()换成[]不可以

        3)可以使用多种运算符开头但一般用!
          !function(形参列表){}(实参列表)
        三种写法特点:
        1)能够将匿名函数与调用的()为一个整体,官方推荐使用;
        2)无法表明函数与之后的()的整体性,不推荐使用。
        3)使用!开头,结构清晰,不容易混乱,推荐使用;
    //方式1,调用函数,得到返回值。强制运算符使函数调用执行
    (function(x,y){
    alert(x+y);
    return x+y;
    }(3,4)); 
     
    //方式2,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用再去调用执行(效果和方式一一样)
    (function(x,y){
    alert(x+y);
    return x+y;
    })(3,4); 
    //这种方式也是很多库爱用的调用方式,如jQuery,Mootools。
     
    //方式3,使用void
    void function(x) {
    x = x-1;
    alert(x);
    }(9);
     
    //方式4,使用-/+运算符
    -function(x,y){
    alert(x+y);
    return x+y;
    }(3,4);
    +function(x,y){
    alert(x+y);
    return x+y;
    }(3,4);
    --function(x,y){
    alert(x+y);
    return x+y;
    }(3,4);
    ++function(x,y){
    alert(x+y);
    return x+y;
    }(3,4); 
     
    //方式5,使用波浪符(~)
    ~function(x, y) {
    alert(x+y);
    return x+y;
    }(3, 4); 
     
    //方式6,匿名函数执行放在中括号内
    [function(){
    console.log(this) // 浏览器得控制台输出window
    }(this)] 
     
    //方式7,匿名函数前加typeof
    typeof function(){
    console.log(this) // 浏览器得控制台输出window
    }(this) 
     
    //方式8,匿名函数前加delete
    delete function(){
    console.log(this) // 浏览器得控制台输出window
    }(this) 
     
    方式9,匿名函数前加void
    void function(){
    console.log(this) // 浏览器得控制台输出window
    }(this) 
     
    //方式10,使用new方式,传参
    new function(win){
    console.log(win) // window
    }(this) 
     
    //方式11,使用new,不传参
    new function(){
    console.log(this) // 这里的this就不是window了
    } 
     
    //方式12,逗号运算符
    //(逗号运算符的特性及作用:逗号运算符的作用是将若干表达式连接起来。它的优先级是所有运算符中最低的,结合方向是自左至右。)
    function(){ console.log(this) // window }(); //方式13,按位异或运算符 ^function(){ console.log(this) // window }(); //方式14,比较运算符 function(){ console.log(this) // window }(); //最后看看错误的调用方式 function(x,y){ alert(x+y); return x+y; }(3,4); /*匿名函数的N种写法如下所示 匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式。汇总一下 最常见的用法: 代码如下:*/ (function() { alert('water'); })(); /*当然也可以带参数: 代码如下:*/ (function(o) { alert(o); })('water'); /*想用匿名函数的链式调用?很简单: 代码如下:*/ (function(o) { console.log(o); return arguments.callee; })('water')('down'); /*常见的匿名函数都知道了,看看不常见的: 代码如下:*/ ~(function(){ alert('water'); })();//写法有点酷~ //代码如下: void function(){ alert('water'); }();//据说效率最高~ //代码如下: +function(){ alert('water'); }(); //代码如下: -function(){ alert('water'); }(); //代码如下: ~function(){ alert('water'); }(); //代码如下: !function(){ alert('water'); }(); //代码如下: (function(){ alert('water'); }());//有点强制执行的味道~

      2.函数定义和函数表达式

        1)函数定义 可以在定义前加括号执行,也可以在定义后加括号执行

          fn(1,2);
          function fn(x,y){
            alert(x+y);
            return x+y;
          }
          fn(3,4);

        结果弹出两次提示框,分别显示3和7。fn调用了两次;
        2)通过var 的函数,只能在后面运行   
          //fn(1,2);
          var fn = function(x,y){
            alert(x+y);
            return x+y;
          };
          fn(3,4);
        在var 之前的fn(1,2);不注掉,运行报错。注掉后弹出一次提示框,显示7。

      3.形参、实参和不定参

        1)实参:执行函数时 可以传递 (用已知的变量 / 具体的数据);

        2)形参:相当于函数局部的变量,命名规则和var相同;定义,无中生有

        var s = 5;
        fn(s);//实参
        function fn(x) {//形参
                // var x;
          alert(x)
          }
     
        //形参 / 实参都可以有多个,用 , 隔开
        sum(2,4);
        function sum(a,b) {
          alert(a+b)
        }
     
        //实参和形参个数不一定非得一样,但是不一样的时候要注意一一对应的关系
        sum(1,2,3,4);
        function sum(a,b,c) {
          alert(a+b+c);
        }
        //形参多了的话,没有对应的那些形参,值就是undefined     sum(1,2,3);     function sum(a,b,c,d) {       // var a,b,c,d;       alert(a+b+c+d);       alert(d);     }     sum(1,2,3);     function sum(a,b,c,d) {     // 给形参添加默认值       a = a || 0;       b = b || 0;       c = c || 0;       d = d || 0;       alert(a+b+c+d);     }

        3)不定参:arguments,存储着所有 实参 的集合

        注:无论有没有形参,实参都会被存在 不定参 里面

        sum(1,2,3,4,5,6,7,8,9);
        function sum() {
          alert(arguments.length);
          alert(arguments[8]);
          var x = 0;
          for(var i = 0 ,len = arguments.length; i < len; i ++){
            x += arguments[i];
          }
          alert(x);
        }    

      

      4.函数中return的作用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #box{
                 200px;
                height: 200px;
                background: red;
            }
            .box{
                font-size: 18px;
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            /*
            每个函数默认返回 return undefined
             */
            var oBox = document.getElementById("box");
            function fn() {
                oBox.innerHTML = "hahahah";//过程
                // return "bear";//结果
                return oBox;
            }
            var x = fn();
            alert(x);
            fn();
            fn().className = "box";//效果相当于oBox.className = "box";
    </script> </body> </html>

    一、作用域

      javascript解析顺序
        1.(定义)先解析var function 参数
          a.该步骤的var只定义变量,后面的=赋值不解析
          b.该步骤的函数只定义函数,函数的执行不解析
          c.重名的只留一个,var 和函数重名  函数优先
        2.(执行)再从上至下执行其他代码
          作用域:
          作用:读写
          域:范围,区域
          解析:从上至下
            1 找 var 定义函数 参数
            2 执行
        例:下面代码的执行顺序如注视
            var a = 1;
            function fn( a ) {
                alert(2);
                a = 3;
                alert(a);
            }
            fn( a );
            alert( a );
            /*
            1 找
                a = und;==》a = 1;
                fn = function fn( a ) {
                        // var a = 1;
                        alert(2);
                        a = 3;
                }
            2 执行
                a = 1;
                fn( a );=》fn(1)
                    1 找
                        a = und;==>a = 1;==>a = 3;
                    2 执行
                        a = 1;
                        alert(2);==>2
                        a = 3;
                alert( a ); ==>1
             */                        

    一、常用方法

      1.关于数字的方法  

        1)js的六大数据类型:
          number,string,boolean,function,undefined,object
        2)number数字方法
          在js里面的小数和整数统一都是数字,-2^53-2^53,超出范围之后精度就会不准确
          Number()——参数中必须能被转换成数字,否则返回NaN:
          parseInt(解析的参数)——将参数转换为数字,整数部分遇到不是数字就停
          parseFloat()——将参数转换为数字,不是数字就停,否则直到小数部分遇到不是数字就停
          Num.toFixed(n)——四舍五入保留n位小数
          NaN(Not a Number) NaN 不等于自己

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <script>
            var x = "hah";
            alert(typeof x);//string
            alert(Number(x));//NaN
            alert(typeof Number(x));//number
     
            var x = "78.25";
            alert(parseInt(x));
            alert(typeof parseInt(x));
            alert(parseFloat(x));
            alert(typeof parseFloat(x));
     
            var x = 25.88254;
            alert(x.toFixed(3));
        </script>
    </body>
    </html>

      

      2.数学方法  

        Math 数学函数
          Math.pow(16, 2)——十六的平方 256
          Math.round(5.5)——四舍五入(整数)
          Math.ceil(0.2)——向上取整
          Math.floor(0.9)——向下取整
          Math.max()——取参数中最大的值
          Math.min()——取参数中最小的值
          Math.random()——0-1的随机数 (小数点后15位)
          Math.random()*m+n 生成 n ~ (m+n)之间的数
          Math.PI——π=3.141592653589793  
          Math.abs()——求绝对值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <script>
            alert(Math.pow(3,4));
            alert(Math.round(25.99));
            alert(Math.ceil(0.1));
            alert(Math.floor(0.99));
            var x = Math.max(12,0,2,-5);
            var y = Math.min(12,0,2,-5);
            alert(x);
            alert(y);
            alert(Math.random());//[0,1)
            alert(Math.random()*20 + 10);
            alert(Math.PI);
            alert(Math.abs(-10));
        </script>
    </body>
    </html>    
  • 相关阅读:
    程序员如何在百忙中更有效地利用时间,如何不走岔路,不白忙(忙得要有效率,要有收获)
    最坏的不是面试被拒,而是没面试机会,以面试官视角分析哪些简历至少能有面试机会
    最近面了不少java开发,据此来说下我的感受:哪怕事先只准备1小时,成功概率也能大大提升
    Ribbon整合Eureka组件,以实现负载均衡
    时间对于程序员的价值,以及如何高效地利用时间,同时划分下勤奋度的等级
    面试过程中,可以通过提问环节的发挥,提升面试的成功率
    以技术面试官的经验分享毕业生和初级程序员通过面试的技巧(Java后端方向)
    和小鲜肉相比,老程序员该由哪些优势?同时说下我看到的老程序员的三窟
    通过软引用和弱引用提升JVM内存使用性能的方法(面试时找机会说出,一定能提升成功率)
    Spring Clould负载均衡重要组件:Ribbon中重要类的用法
  • 原文地址:https://www.cnblogs.com/bear905695019/p/8339271.html
Copyright © 2011-2022 走看看