首先我们要知道函数的自调用
函数的自调用——自调用函数
一次性的函数——声明的同时，直接调用了
例如：
(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>
到此这篇关于JavaScript把局部变量变成全局变量的方法的文章就介绍到这了,更多相关JavaScript 局部变量变成全局变量内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！