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

2019-04-22 本文已影响11人 IIronMan

一、封闭函数

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:封闭函数和常用内置对象

猜你喜欢

热点阅读