JavaScript把局部變量變成全局變量的方法
首先我們要知道函數(shù)的自調(diào)用
函數(shù)的自調(diào)用——自調(diào)用函數(shù)一次性的函數(shù)——聲明的同時，直接調(diào)用了例如：
(function () { console.log('函數(shù)');})();
我們會看到瀏覽器直接打印 函數(shù) 兩個字
頁面加載后.這個自調(diào)用函數(shù)的代碼就執(zhí)行完了
使用形式
(function (形參) { })(實參);
注意
自調(diào)用構(gòu)造函數(shù)的方式,分號一定要加上
那么如何把局部變量變成全局變量?把局部變量給window就可以了
(function (win) { var num=10;//局部變量 //js是一門動態(tài)類型的語言,對象沒有屬性,點了就有了 win.num=num;})(window);console.log(num);
頁面打印出num了
應(yīng)用案例1——將隨機(jī)數(shù)對象賦給window
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>title</title> <script> //通過自調(diào)用函數(shù)產(chǎn)生一個隨機(jī)數(shù)對象,在自調(diào)用函數(shù)外面,調(diào)用該隨機(jī)數(shù)對象方法產(chǎn)生隨機(jī)數(shù) (function (window) { //產(chǎn)生隨機(jī)數(shù)的構(gòu)造函數(shù) function Random() { } //在原型對象中添加方法 Random.prototype.getRandom = function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; //把Random對象暴露給頂級對象window--->外部可以直接使用這個對象 window.Random=Random; })(window); //實例化隨機(jī)數(shù)對象 var rm=new Random(); //調(diào)用方法產(chǎn)生隨機(jī)數(shù) console.log(rm.getRandom(0,5)); //全局變量 </script></head><body></body></html>
應(yīng)用案例2——產(chǎn)生隨機(jī)位置小方塊
<!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='http://www.baoyu77737.com/bcjs/common.js'></script><script> //產(chǎn)生隨機(jī)數(shù)對象的 (function (window) { function Random() { } Random.prototype.getRandom=function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; //把局部對象暴露給window頂級對象,就成了全局的對象 window.Random=new Random(); })(window);//自調(diào)用構(gòu)造函數(shù)的方式,分號一定要加上 //產(chǎn)生小方塊對象 (function (window) { //console.log(Random.getRandom(0,5)); //選擇器的方式來獲取元素對象 var map=document.querySelector('.map'); //食物的構(gòu)造函數(shù) function Food(width,height,color) { this.width=width||20;//默認(rèn)的小方塊的寬 this.height=height||20;//默認(rèn)的小方塊的高 //橫坐標(biāo),縱坐標(biāo) this.x=0;//橫坐標(biāo)隨機(jī)產(chǎn)生的 this.y=0;//縱坐標(biāo)隨機(jī)產(chǎn)生的 this.color=color;//小方塊的背景顏色 this.element=document.createElement('div');//小方塊的元素 } //初始化小方塊的顯示的效果及位置---顯示地圖上 Food.prototype.init=function (map) { //設(shè)置小方塊的樣式 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); }; //產(chǎn)生隨機(jī)位置 Food.prototype.render=function (map) { //隨機(jī)產(chǎn)生橫縱坐標(biāo) 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>
到此這篇關(guān)于JavaScript把局部變量變成全局變量的方法的文章就介紹到這了,更多相關(guān)JavaScript 局部變量變成全局變量內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Xml簡介_動力節(jié)點Java學(xué)院整理2. UDDI FAQs3. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案4. ASP常用日期格式化函數(shù) FormatDate()5. 將properties文件的配置設(shè)置為整個Web應(yīng)用的全局變量實現(xiàn)方法6. CSS可以做的幾個令你嘆為觀止的實例分享7. JSP+Servlet實現(xiàn)文件上傳到服務(wù)器功能8. jsp+servlet實現(xiàn)猜數(shù)字游戲9. jsp文件下載功能實現(xiàn)代碼10. JSP之表單提交get和post的區(qū)別詳解及實例
網(wǎng)公網(wǎng)安備