JavaScript把局部變量變成全局變量的方法
首先我們要知道函數的自調用
函數的自調用——自調用函數一次性的函數——聲明的同時，直接調用了例如：
(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='http://m.b3g6.com/bcjs/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>
到此這篇關于JavaScript把局部變量變成全局變量的方法的文章就介紹到這了,更多相關JavaScript 局部變量變成全局變量內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備