js如何执行函数

前言

js如何执行函数,指的是声明一个函数之后,在代码里如何去执行它。

函数调用模式

步骤如下,

1、先声明一个函数;

2、然后,调用该函数即可。

方法调用模式

步骤如下,

1、先声明一个函数,只不过这个时候是作为对象的一个方法;

2、然后,调用对象的该方法即可。

总结

不管是哪种执行方式,根本都是先声明一个函数,然后再调用它即可——只不过声明函数的方式有所区别而已。

参考

JS执行函数

JS执行函数:

1:方法调用模式。

请注意this此时指向myobject。

/*方法调用模式*/

var myobject={

value:0,

inc:function(){

alert(this.value)

}

}

myobject.inc()

2:函数调用模式

请注意this此时指向window

/*函数调用模式*/

var add=function(a,b){

alert(this)//this被绑顶到window

return a+b;

}

var sum=add(3,4);

alert(sum)

3:构造器调用模式

javascript语言精粹一书建议摒弃这中方式。因为有更好的方式。这里先不介绍。下次发表博文的时候贴出来。

会在这里加一个连接。

/*构造器调用模式 摒弃*/

var quo=function(string){

this.status=string;

}

quo.prototype.get_status=function(){

return this.status;

}

var qq=new quo("aaa");

alert(qq.get_status());

例子

1、一个容易混淆的例子,函数的声明是在jquery $(function(){声明一个函数})里面进行的,开始还以为在jquery
$(function(){})里面声明的函数就会立即执行,看来还是对《js如何执行函数》理解得有点模糊。

2、实际上,不管是在js代码里声明的函数,还是在jquery或其他js框架里声明的函数,执行函数的步骤都是

1)先声明;

2)后调用执行——没有调用函数它的代码就不会被执行。

<script type="text/javascript">
	function logOut() {
		window.parent.logout();
	}

	var EventHandler = function(scope, fun, args) {
		this.fun = fun;
		this.scope = scope;
		this.args = args ? args : [];
		return this.init();
	};

	EventHandler.prototype = {
		init : function() {
			var sc = this;
			return function() {
				sc.fun.call(sc.scope, sc.args);
			};
		}
	};

	$(function() {
		function initFirstLevelMenu(datas) {
			var ul = $('.nemu ul')[0];
			for ( var i = 0, l = datas.length; i < l; i++) {
				var data = datas[i];
				var li = document.createElement('li'), a = document
						.createElement('a'), img = document
						.createElement('img');
				var div = document.createElement('div');
				img.src = data.imagename;
				$(img).css("margin", "8px 0px 2px 0px");
				$(li).css("position", "relative");
				$(li).css("left", "0px");
				$(li).css("top", "0px");
				$(li).click(new EventHandler(li, function(dd) {
					if (dd.func) {
						doLink2(dd.func);
					}
					//var thisparent = $(this).parent();
					$('.nemu ul li').removeClass('over');
					$(this).addClass('over');
					initSecondLevelMenu(dd.children);
				}, data));
				a.href = 'javascript:void(0);';
				a.appendChild(img);
				li.appendChild(a);
				/*$(li).mouseover(function(){
					//$(this).addClass('over');
				});
				$(li).mouseout(function(){
					//$('#top .title .nemu ul li').removeClass('over');
				});*/
				$(div).css("color", "#FFFFFF");
				$(div).css("font-weight", "bold");
				$(div).css("font-size", "12px");
				$(div).css("font-family", "'宋体'");
				$(div).css("align", "center");
				div.innerHTML = data.dispname;

				li.appendChild(div);
				ul.appendChild(li);
			}
		}
		function initSecondLevelMenu(datas) {
			$('#secondmenu').html('');
			var div = $('#secondmenu')[0], ul = document.createElement('ul');
			var ulhtml = "";
			if (datas.length == 0) {
				var img = "<div style='vertical-align:middle;line-height:28px;height:28px;text-align:center;'> 状态定义:<img align='middle' title='指系统运行在预先设置的CPU、内存、网络流量的正常阀值之内' src='${contextPath}/images/common/正常.png'/>正常 <img title='辅助子系统在运行过程中发生的不影响基础业务系统使用或间接性故障' align='middle'src='${contextPath}/images/common/一般故障.png'/>一般故障";
				img += " <img title='指程控交换机、数据库、业务协同服务器等出现故障,导致整套业务系统瘫痪' align='middle' src='${contextPath}/images/common/重大故障.png'/>重大故障";
				img += " <img title='指系统接近异常阀值范围之内,预警状态的系统运行情况要高于正常状态,低于异常状态,阀值可通过系统设置' align='middle'src='${contextPath}/images/common/警告.png'/>预警";
				img += " <img title='指系统在运行过程中超出预先设置的CPU、内存、网络流量的异常阀值时所进行的提示性报警' align='middle'src='${contextPath}/images/common/异常.png'/>异常";
				img += " <img title='指监控客户端AGENT不在线、不可用或设备已关闭'align='middle'src='${contextPath}/images/common/离线.png'/>离线</div>";
				$('#div_menu_2').html(img);
				return;
			}
			for ( var i = 0, l = datas.length; i < l; i++) {
				var data = datas[i];
				var li = document.createElement('li'), a = document
						.createElement('a');
				if (i == 0) {
					ulhtml += "<li  id='" + data.func + "' class='li" + (i + 1)
							+ " txt over'>";
				} else {
					ulhtml += "<li  id='" + data.func + "' class='li" + (i + 1)
							+ " txt normal'>";
				}
				ulhtml += data.dispname + "</li>";
				//ulhtml +="<a href=\"javascript:doLink2('"+data.func+"');\">"+data.dispname+"</a></li>";
				/*$(a).mouseover(new EventHandler(a,function(){
					$('#div_menu_2 ul li span .over').removeClass('over');
					$(this).addClass('over');
				}));
				$(a).mouseout(new EventHandler(a,function(){
					$(this).removeClass('over');
				}));*/
			}
			$('#secondmenu').html('');
			$('#secondmenu').html(ulhtml);
			$("li").click(function(dd) {
				$("#secondmenu .over").addClass("normal");
				$("#secondmenu .over").removeClass("over");
				$(this).addClass("over");
				doLink2(this.id);
			});
		}

		$
				.ajax({
					url : '${contextPath}/menuAction!initMenu.action',
					data : {
						s : Math.random()
					},
					async : true,
					dataType : 'json',
					success : function(data) {
						if (data.success) {
							if (window.parent.getSystemtype() == "1") {
								initSecondLevelMenu(data.Data);
								// document.getElementById("hideinfo").style.display = "none";
								var str = new StringBuffer();
								/*str.append("<li  class='li1 txt over'><a href=\"javascript:doLink2('${contextPath }/homePageAction!list.action?!=1');\">地    图</a></li>");
								str.append("<li  class='li2 txt normal'><a href=\"javascript:doLink2('${contextPath }/homePageAction!alarmstation.action?!=1');\">实时告警台</a></li>");
								str.append("<li  class='li3 txt normal'><a href=\"javascript:doLink2('${contextPath }/homePageAction!statistable.action?!=1');\">统计展示台</a></li>");
								 */
								str
										.append("<li  class='li1 txt over' id='${contextPath }/homePageAction!mapTableList.action?!=1'>地    图</li>");
								str
										.append("<li  class='li2 txt normal' id='${contextPath }/homePageAction!alarmstation.action?!=1'>实时告警台</li>");
								str
										.append("<li  class='li3 txt normal' id='${contextPath }/homePageAction!statistable.action?!=1'>统计展示台</li>");
								$('#secondmenu').html(str.toString());
								var str1 = new StringBuffer();

								str1
										.append('<li class="xtpz" id="${contextPath }/detachSystemAction!initMain.action?!=1" style="position: relative; left: 580px; top: 0px;display:true;"><img src="/OMShowWEB/images/menu/xtpz.png" style="margin: 8px 0px 2px;"><div style="color: rgb(255, 255, 255); font-weight: bold; font-size: 12px; font-family: 宋体;">系统配置</div></li>');
								$('#firstmenu').html(str1.toString());
								$("li").click(function(dd) {
									$("#secondmenu .over").addClass("normal");
									$("#secondmenu .over").removeClass("over");
									$(this).addClass("over");
									doLink2(this.id);
								});

								$("#secondmenu li").click(function(dd) {
									$("#firstmenu .over").removeClass("over");
								});

							} else {
								initFirstLevelMenu(data.Data);
							}
						} else {
							alert(data.msg);
						}
					},
					error : function(e, en) {
						if (en == 'parsererror') {
							alert('登陆超时,点击【确定】重新登陆');
							window.top.location.reload();
						} else {
							window.top.message(e);
						}
					}
				});

		$(".organ").html("(" + window.parent.getSystemOrgan() + ")");

		$(".menuhidden").click(function() {
			if ($(this).hasClass('up')) {
				$(".nemu").animate({
					left : '1281px'
				}, "fast");
				//$(this).animate({left:'1256px'},"slow");
				$(this).removeClass('up');
			} else {
				if (window.parent.getSystemtype() == '1') {
					$(".nemu").animate({
						left : '500px'
					}, "slow");
					$(this).addClass('up');
					return;
				}
				$(".nemu").animate({
					left : '500px'
				}, "slow");
				//$(this).animate({left:'476px'},"slow");
				$(this).addClass('up');
			}
		});
	});
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2025-01-09 11:18:02

js如何执行函数的相关文章

js立即执行函数的使用

一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); 方式3.function前面加运算符,常见的是!与void !function(){alert(1);}();  void function(){alert(2);}(); 二.立即执行函数的参数 可以给立即执行函数传递参数,例如 (function(who, when){     console.lo

js立即执行函数应用--事件绑定

js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <titl

js立即执行函数用法

js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); 方式3.function前面加运算符,常见的是!与void !function(){alert(1);}(); void

JS 自执行函数

由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧. js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: function aaa(a,b){ return sum = a + b } 定义了一个名为aaa的函数,在里面可以计算两个数的和.如果想执行它,就必须得调用它,并且还得给它传参: var aa = aaa(1,2) 这样就实现了一个函数的定义与调用,通过console.log我们可以看到sum实现了

js立即执行函数

js没有私有作用域的概念,避免命名冲突,引入了“匿名包裹器”或者“命名空间”的写法,即用匿名函数作为一个容器 js引擎在执行js代码时会“函数声明提升”,而函数表达式会从上至下逐行执行, js的函数和变量都会提升到函数的最顶部,即可以先使用再声明 //在function前面使用(),!,+,-,= 可以将函数声明转换成函数表达式,消除了js引擎对函数声明和函数表达式的歧义 (function(a){ console.log(a); })(123); (function(a){ console.l

js延迟执行函数

在js中,延迟执行函数有两种:setTimeout和setInterval setTimeout("test()","2000"); //2000毫秒后执行test()函数,只执行一次. setInterval("test()","2000"); //每隔2000毫秒执行一次test()函数,执行无数次. var interval = window.setInterval("test()","20

js自执行函数、调用递归函数、圆括号运算符、函数声明的提升

前言 起因是我要在jquery的ajax中需要根据返回值来决定是否继续发起ajax请求,这是一个有条件的循环,符合条件就跳出.可以使用while循环的,但是想了想还是递归调用好用. 调用递归函数 递归函数大概就是这样的.不符合条件重新执行这个函数 function f() { // do something if(1){ } else{ f(); } } 圆括号运算符和自执行函数 js中圆括号运算符指 (),一般有两个作用. 1.在函数后面表示立即执行这个函数,如 f() 2.计算表达式,如 /

js自执行函数

5.1对于函数表达式,在后面加括号即可以让函数立即执行:例如下面这个函数,至于为什么加了括号就可以立即执行,我们可以这么理解,就是像fn1():这样写的话,函数 可以立即执行是没问题的,我们在经常会用到,那么对于函数表达式来说,fn1就是对后面的匿名函数的一个引用,因此在后面的匿名函数后直接加括号,自然也就可以立即执行 函数表达式立即执行 5.2但是对于下面这个函数,如果直接加()就会报错:如果按照上面的思路去理解,在匿名函数后面直接加上()应该是可以立即执行的,但是下面这个函数之所以会报错,而

js 立即执行函数

1.我们首先要搞明白:函数表达式和函数声明的区别. 函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用 var func = function(){ alert('xxx'); }; var b = new func(); 函数声明:必须有函数名 function func(){ alert('xxx'); } func(); 所以立即执行调用的函数表达式有一下几种 !function () { /* code */ } ();~function ()