js中自调用函数(一次性函数)

1.函数的自调用---自调用函数

//函数的自调用
//一次性函数
(function (){
	console.log("一次性");

})();
(function(win){
	var num=20;
	win.num=num;
})(window);
//把局部变量给父类就可以了
console.log(num);

2.通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数

//通过自调用函数产生一个随机对象
(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));

3.案例一个随机小方块

<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);
</script>

  

原文地址:https://www.cnblogs.com/liushisaonian/p/9425427.html

时间: 2024-10-05 08:08:34

js中自调用函数(一次性函数)的相关文章

JS中的日期内置函数

用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   写出JS中声明对象的三种方法. Var obj={ name:名字, Say:function(){ Alert(‘sssss’); } }     Var obj=new Object();     Var obj={} Obj.name=’名字’; Obj.say=function(){ Ale

JS中,子类调用超类函数

概述 JS虽然并不直接具备面向对象的特性,但仍可以通过prototype来模拟面向对象的继承和多态等特性.和大多数面向对象语言(例如C++,Java等)相比,JS来实现面向对象仍稍显繁琐和抽象,需要对JS的prototype模型有深入的理解. 在开发过程中,有时候会遇到这样一个问题:如果在子类中"覆盖"了超类的某个方法,但仍需要在子类方法中调用一次超类方法,这时候应该怎么做?如果是Java,一个简单的super关键字即可解决问题,但如果是JS呢? 解决问题的最基本方法可以是:在子类中,

js中startWith、endWith效果函数

JavaScript采用正则表达式实现startWith.endWith效果函数 String.prototype.startWith=function(str){       var reg=new RegExp("^"+str);       return reg.test(this);        } String.prototype.endWith=function(str){       var reg=new RegExp(str+"$");     

js中变量名提升和函数名提升

首先,js中变量没有块级作用域,但是有函数作用域,即只有函数可以约数变量的作用域. 并且,函数的实质也是一个变量,所以可以改变它的值,即赋值.所以变量名提升和函数名提升非常相像. 1.变量名的提升发生在函数内部.看下面的例子.说明:第一个因为弹出undefined,相当于在上面定义了var num;因为函数内部,定义了var num=20:就相当于在一开始定义了var num;这就是变量名的提升. var num = 10; function func() { alert(num); //und

JS中的循环嵌套 BOM函数

[嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做图形题思路]              1确定图形一共几行  极为外层的循环的次数             2确定每行有几种元素,代表有几个内层循环.             3 确定每种元素的个数,即为每个内层循环的次数                 tips:通常:找出每种元素个数,与行号的关

JS中的substring和substr函数的区别

1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. 如:"hamburger".substring(4,8) returns "urge" 2. substr(start,length) 如:当DETAIL_TYPE 的值为1111053 时,substr(DETAIL_TYPE,1,6)  = 111105 从DETA

React:JS中的this和箭头函数

JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控

js中的变量提升和函数提升

1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域. 首先来解释一下什么是没有块级作用域? 所以此时 是可以打印输出变量a的值. 2:什么是变量提升? 在我们的js中,代码的执行时分两步走的,1.解析 2.一步一步执行 那么变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去. 那么上面这种写法其实等价于下面这种写法: 看几个例子: 把上面的例子稍作改动: 结果就会大不一样, 再看一个例

js中的变量提升与函数提升

先看看一个简单的代码 var str='Hello World'; alert(str);//弹出 Hello World 再看一段代码: var v='Hello World'; (function(){ alert(v); })() //和我们预期的一样,还是弹出 Hello World 那么铺垫完了,继续coding var str='Hello World'; (function(){ alert(str); var str='I love coding...'; })() //出乎我们