Javascript中的方法和匿名方法实例详解


Posted in Javascript onJune 13, 2015

本文实例讲述了Javascript中的方法和匿名方法。分享给大家供大家参考。具体分析如下:

Javascript方法(函数)

声明函数

以function开头,后跟函数名,与C#、java不同,Javascript不需要声明返回值类型、参数类型。没有返回值就是undefined。

举个例子更清楚: 
无参数无返回值的方法:

function f1(){
alert('这是一个方法');
}
f1();//调用方法

无参数有返回值的方法:

function f2(){
return 100;
}
var result=f2();//声明一个变量,接收f1()中的返回值
alert(result);//100

有参数有返回值的方法:

function f3(n1,n2){
return n1+n2;
}
var result=f3(20,30);
alert(result);//50

注意1:

先看例子:

function f1(){
  alert('这是一个方法'); 
}
alert(f1());//弹出”这是一个方法”后,还会显示undefined

原因:js中,变量没有赋值,就是undefined;该栗中f1()没有返回值,那么就是一个未知的值(undefined),这里未知的变量放入alert(),当然弹出的就是undefined

注意2:

alert(f1);//不写括号,会将f1整个代码以字符串形式显示出来:
function f1(){ 
alert('这是一个方法'); 
}

JavaScript中没有方法重载

只调用最新定义的方法:

function f1(n1,n2){ 
alert(n1+n2); 
} 
function f1(n1,n2){ 
alert(n1-n2); 
} 
f1(10,2);//8

结论:无论在哪里调用,都只调用最新定义的方法。

注意:数字+undefined=undefined

function f1(n1,n2,n3){ 
alert(n1-n2+n3); 
} 
f1(10,2);
//NaN,因为没有给n3传值,n3就是undefined,
//数字加上undefined还是undefined

以上结论:Javascript中没有方法重载

定义方法时注意:

自定义函数名不要和内置方法重名:
不要和js内置、dom内置方法重名,比如selectAll、focus等函数名不要用。

不要与系统函数重名。(在单击事件中调用自己定义的focus方法,有问题。与系统的focus()方法重名了)

书写规则括号注意:

一般在js中编写大括号都是直接跟在后面

function f1(){ 
return 
{ 
age:100}; 
} 
var s=f1(); 
alert(s.age);
//undefined。s结果是undefined,undefined.age必然还是undefined

匿名方法(用的非常多)

为什么推荐用匿名方法?

1、有一个1.js中有个方法function aa(){alert{'我挺帅了'}}

2、有一个2.js中有个方法function aa(){alert{'我越来越帅了'}}

3、将1.js和2.js依次导入到index.html中,调用aa();结果显示:我越来越帅了。

结论:2.js中的aa()方法会覆盖1.js中的aa()

怎么办?不再指定方法名,使用匿名方法

先看一个将匿名方法赋给变量例子:

var ff=function(n1,n2){ 
return n1+n2; 
}; 
alert(ff(20,30));//50

一行写完匿名方法:

(function (n1,n2){alert(n1+n2);})(9,9);

小案例:1:

var x=1; 
var y=0; 
var z=0; 
var add=function (n){n=n+1;return n}; 
y=add(x);//结果是2,先调用上面add 
add=function(n){n=n+3;return n;}; 
z=add(x);//结果是4,调用上面临近的这个add 
alert(y+','+z);//2,4

小案例2:

function aa() 
{ 
  alert("aaa"); 
  return function(){alert("bbb");}; 
} 
alert(aa);//不写括号,会将aa方法的整个代码显示出来 
alert(aa());//aaa,function(){alert("bbb");}; aaa就不解释了,后面那一串是作为aa()的返回值显示 
alert(aa()());//aaa,bbb,undefined 
//下面分解上面这句进行解释 
var s=aa();//aaa 
alert(s());//s()就是function(){alert("bbb");};首先弹出bbb,其次该方法没有返回值,故弹出undefined

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 #Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 #Javascript
jQuery实现的五子棋游戏实例
Jun 13 #Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 #Javascript
JQuery自动触发事件的方法
Jun 13 #Javascript
JQuery中DOM实现事件移除的方法
Jun 13 #Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
You might like
php防注
2007/01/15 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python实时分析日志的一个小脚本分享
2017/05/07 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python输入多行字符串的方法总结
2019/07/02 Python
简单了解python的内存管理机制
2019/07/08 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
我的教育故事演讲稿
2014/05/04 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏