JavaScript--变量作用域 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 <button>按钮1</button>
  9 <button>按钮2</button>
 10 <button>按钮3</button>
 11 </body>
 12 </html>
 13 <script>
 14     /**
 15      *      《函数》
 16      *          匿名函数
 17      *              语法格式：function(){}
 18      *                  只写匿名函数在JS报错
 19      *
 20      *          函数创建
 21      *              1.函数的声明
 22      *                  function fn(){
 23      *                  }
 24      *              2.函数表达式
 25      *                  var fn = function(){
 26      *                  }
 27      *
 28      *           函数命名建议：
 29      *              动词+名词
 30      *
 31      *           函数参数：
 32      *              和PHP一样，分为形参和实参
 33      *
 34      *           函数返回值：
 35      *              关键词：return
 36      *              !与PHP区别：JS函数内部都有返回值，默认返回undefined
 37      *
 38      *           arguments对象 (实参在函数体内的集合)
 39      *              所有函数都内置了一个arguments对象，是一个伪数组.
 40      *
 41      *           自调用函数
 42      *              (function(){})();
 43      *              ;(function(){})();      严谨写法
 44      *                  自调用函数相当于是沙箱，小闭包，内部创建的变量，函数和外部不受关联。
 45      *                  作用：防止全局变量污染。
 46      *
 47      */
 48 
 49     // 全局变量，在<script> 顶级创建的变量是全局变量
 50 /*  var data = "CCTV";
 51     ;(function () {
 52         alert(data); // "CCTV"
 53     })();
 54     ;(function () {
 55         alert(data); // "CCTV"
 56     })();
 57     alert(data); // "CCTV"*/
 58 
 59 
 60 
 61     /*var data = "CCTV";
 62     ;(function () {
 63         var data = "湖南卫视";
 64         alert(data); // "湖南卫视"
 65     })();
 66     ;(function () {
 67         alert(data); // "CCTV"
 68     })();
 69     alert(data); // "CCTV"*/
 70 
 71 
 72 
 73    /* var data = "CCTV";
 74     ;(function () {
 75     //函数体内变量如果没有var声明，它会逐级往上查找，
 76     //如果外面还是没有声明，JS内部会把这个变量设置成全局变量
 77     //!!!! 这是很危险的操作，全局变量污染很容易影响到其他同事的代码
 78         data = "湖南卫视";
 79         alert(data); // "湖南卫视"
 80     })();
 81     ;(function () {
 82     //函数体内变量如果没有var声明，他会逐级往上查找
 83         data = "广东卫视";
 84         alert(data); // "广东卫视"
 85     })();
 86     alert(data); // "广东卫视"*/
 87 
 88 
 89 
 90    /*//变量作用域-事件1
 91     var btns = document.getElementsByTagName('button');
 92     btns[0].onclick = function () {
 93         var tv = "湖南卫视";
 94     }
 95     alert(tv); // tv is not defined*/
 96 
 97 
 98    /* //变量作用域-事件2
 99     var btns = document.getElementsByTagName('button');
100     btns[0].onclick = function () {
101         // 事件处理程序内的函数，如果不触发，永远不执行
102         tv = "湖南卫视";
103     }
104     alert(tv); // tv is not defined*/
105 
106 
107   /*  //变量作用域-事件3
108     var btns = document.getElementsByTagName('button');
109     btns[0].onclick = function () {
110         // 事件处理程序内的函数，如果不触发，永远不执行
111         tv = "湖南卫视"; // 这样会污染全局变量，不推荐使用
112     }
113     btns[1].onclick = function () {
114         alert(tv); // 事件是触发才执行，这里要分情况
115 //        1,先点击按钮1，再点击按钮2，弹出湖南卫视
116 //        2，先点击按钮2，不点击按钮1，控制台报错:dv is not defined
117     }*/
118 
119   
120    /* //变量作用域-事件3
121     var btns = document.getElementsByTagName('button');
122     var tv; //定义变量tv
123     btns[0].onclick = function () {
124         // 事件处理程序内的函数，如果不触发，永远不执行
125         tv = "湖南卫视"; // 这样会污染全局变量，不推荐使用
126     }
127     btns[1].onclick = function () {
128         alert(tv); // 事件是触发才执行，这里要分情况
129 //        1,先点击按钮1，再点击按钮2，弹出湖南卫视
130 //        2，先点击按钮2，不点击按钮1，弹出undefined
131     }*/
132 </script>

 

posted @ 2017-10-14 10:09  QinXiao.Shou  阅读(157)  评论(0)    收藏  举报