美文网首页Python知识锦集
Python JavaScript5:封闭函数和常用内置对象

Python JavaScript5:封闭函数和常用内置对象

作者: IIronMan | 来源:发表于2019-04-22 11:45 被阅读11次

    一、封闭函数

    • 1.1、封闭函数定义:javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数

      • 一般定义的函数和执行函数:

        function myalert(){
             alert('hello!');
        };
        myalert();
        
      • 封闭函数写法一:去掉函数名字,用括号抱起来,加上小括号执行

        (function myalert(){
            alert('hello!');
        })();
        
      • 封闭函数写法二:可以在函数定义前加上“~”“!”等符号来定义匿名函数

        !function myalert(){
            alert('hello!');
        }()
        

        或者

        ~function myalert(){
            alert('hello!');
        }()
        
    • 1.2、封闭函数的好处:封闭函数可以创造一个独立的空间,在封闭函数内定义的变量和函数不会影响外部同名的函数和变量,可以避免命名冲突,在页面上引入多个js文件时,用这种方式添加js文件比较安全,比如:

      <!DOCTYPE html>
      <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>封闭函数的好处</title>
         <script type="text/javascript">
           
             var iNum1 = 10;
             function myalter() {
                 alert('hello');
             }
      
             ~function () {
      
                 var iNum1 = 20;
                 function myalter() {
                     alert('hello world!');
                 }
      
                 alert(iNum1);
                     myalter();
             }();
      
             alert(iNum1);
             myalter();
         </script>
      </head>
      <body>
      </body>
      </html>
      

      提示:我们可以看到封闭函数里面的函数myalter并不会把封闭函数外的函数myalter给屏蔽掉

    二、常用内置对象

    • 2.1、document

      • 通过 id 获取元素

        document.getElementById 
        
      • 通过 标签名 获取元素

        document.getElementsByTagName 
        
      • 获取 上一个跳转页面的地址 (需要服务器环境)

        document.referrer
        
    • 2.2、location

      • 获取或者重定url地址

        window.location.href
        
      • 获取地址参数部分

        window.location.search
        

        如下例子:

        <script type="text/javascript">
             window.onload = function () {
                 // 根据id获取一个按钮的标签
                 var oButton = document.getElementById('button1');
                 var aData = window.location.search;
        
                 if (aData != ''){
                      alert(aData.split('='));
                 }
             }
        </script>
        
      • 获取页面锚点或者叫哈希值

        window.location.hash
        
    • 2.3、Math 对象

      • Math.random之能获取0-1的随机数,不包括 1

        alert(Math.random());
        
      • Math.floor 向下取整: 结果是:3

        alert(Math.floor(3.4));  
        
      • Math.ceil 向上取整: 结果是:4

        alert(Math.ceil(3.4));
        

        提示:向上或者向下取值是 没有四舍五入

    • 2.4、举例:生成 10-20之间的随机数

      <!DOCTYPE html>
      <html lang="en">
      <head>
           <meta charset="UTF-8">
           <title>生成10到20的随机数</title>
           <script type="text/javascript">
                var iNum1 = 10;
                var iNum2 = 20;
                var array2 = [];
                for(var i=0;i<20;i++){
                      // 生成10-20之间的随机数
                      var iNum02 = Math.floor((iNum2-iNum1+1)*Math.random()) + iNum1;
                      array2.push(iNum02);
                }
                console.log(array2);
          </script>
      </head>
      <body>
      </body>
      </html>
      

      打印结果: 15、20、11、16、18、20、20、20、18、16、17、20、12、14、13、11、17、17、17、13

    三、调试 js 的方法

    • 3.1、alter 调试比较直观

      var iNum1 = 10;
      alert(iNum1);
      
    • 3.2、console.log 在数据较多的时候可以直接展示出来,打印出来查看比较方便,比如上面的打印一个数组

      console.log(array2);
      
    • 3.3、document.tittle 可以直接显示在网页的标题上,如下

      document.title = "测试";

    相关文章

      网友评论

        本文标题:Python JavaScript5:封闭函数和常用内置对象

        本文链接:https://www.haomeiwen.com/subject/phrowqtx.html