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>