首先我们要知道函数的自调用
函数的自调用——自调用函数
一次性的函数——声明的同时，直接调用了
例如：
(function () { console.log("函数"); })();
我们会看到浏览器直接打印 函数 两个字
页面加载后.这个自调用函数的代码就执行完了
使用形式
(function (形参) { })(实参);
注意
- 自调用构造函数的方式,分号一定要加上
那么如何把局部变量变成全局变量?
把局部变量给window就可以了
(function (win) { var num=10;//局部变量 //js是一门动态类型的语言,对象没有属性,点了就有了 win.num=num; })(window); console.log(num);
页面打印出num了
应用案例1——将随机数对象赋给window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> //通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数 (function (window) { //产生随机数的构造函数 function Random() { } //在原型对象中添加方法 Random.prototype.getRandom = function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; //把Random对象暴露给顶级对象window--->外部可以直接使用这个对象 window.Random=Random; })(window); //实例化随机数对象 var rm=new Random(); //调用方法产生随机数 console.log(rm.getRandom(0,5)); //全局变量 </script> </head> <body> </body> </html>
应用案例2——产生随机位置小方块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta > <title>title</title> <style> .map{ width: 800px; height: 600px; background-color: #CCC; position: relative; } </style> </head> <body> <div class="map"></div> <script src="common.js"></script> <script> //产生随机数对象的 (function (window) { function Random() { } Random.prototype.getRandom=function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; //把局部对象暴露给window顶级对象,就成了全局的对象 window.Random=new Random(); })(window);//自调用构造函数的方式,分号一定要加上 //产生小方块对象 (function (window) { //console.log(Random.getRandom(0,5)); //选择器的方式来获取元素对象 var map=document.querySelector(".map"); //食物的构造函数 function Food(width,height,color) { this.width=width||20;//默认的小方块的宽 this.height=height||20;//默认的小方块的高 //横坐标,纵坐标 this.x=0;//横坐标随机产生的 this.y=0;//纵坐标随机产生的 this.color=color;//小方块的背景颜色 this.element=document.createElement("div");//小方块的元素 } //初始化小方块的显示的效果及位置---显示地图上 Food.prototype.init=function (map) { //设置小方块的样式 var div=this.element; div.style.position="absolute";//脱离文档流 div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.backgroundColor=this.color; //把小方块加到map地图中 map.appendChild(div); this.render(map); }; //产生随机位置 Food.prototype.render=function (map) { //随机产生横纵坐标 var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width; var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height; this.x=x; this.y=y; var div=this.element; div.style.left=this.x+"px"; div.style.top=this.y+"px"; }; //实例化对象 var fd=new Food(20,20,"green"); fd.init(map); console.log(fd.x+"===="+fd.y); })(window); // function refresh(){ // window.location.reload(); // } // setTimeout(refresh(), 1000); </script> </body> </html>
