前言
js如何执行函数,指的是声明一个函数之后,在代码里如何去执行它。
函数调用模式
步骤如下,
1、先声明一个函数;
2、然后,调用该函数即可。
方法调用模式
步骤如下,
1、先声明一个函数,只不过这个时候是作为对象的一个方法;
2、然后,调用对象的该方法即可。
总结
不管是哪种执行方式,根本都是先声明一个函数,然后再调用它即可——只不过声明函数的方式有所区别而已。
参考
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:方法调用模式。
请注意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>