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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript 匿名函数和闭包介绍

    匿名函数:没有名字的函数; 闭包:可访问一个函数作用域里的变量的函数; 一 匿名函数 // 普通函数 function box(){ // 函数名是box; return 'Lee'; } box(); // =>Lee; 调用函数; // 匿名函数 function(){ // 匿名函数,会报错; return 'Lee'; } // 通过表达式自我执行 (function(name){ console.log(name); // =>Lee; })("Lee"); //

  • JavaScript中匿名函数用法实例

    本文实例讲述了JavaScript中匿名函数用法.分享给大家供大家参考.具体分析如下: JS中可以不用给函数名称,而是在使用时直接通过function把函数体赋值给相关的事件或者变量. 下面的JS代码给按钮设定了一个onclick事件,使用了匿名函数 <form action="#"> <input type="button" value="Click Me" id="anonbutton" /> &l

  • JavaScript合并两个数组并去除重复项的方法

    本文实例讲述了JavaScript合并两个数组并去除重复项的方法.分享给大家供大家参考.具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i for(var j=i+1; j if(a[i] === a[j]) a.splice(j, 1); } } return a; }; //Demo var array1 = ["a","b"]; var ar

  • 详谈JavaScript 匿名函数及闭包

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种:这也是最常规的一种 复制代码 代码如下: function double(x){     return 2 * x;   } 第二种:这种方法使用了Function构造函数,把参数列表和函数体都作为字符串,很不方便,不建议使用. 复制代码 代码如下: var double = new Functio

  • JavaScript 编写匿名函数的几种方法

    错误模式:语法错误警告 复制代码 代码如下: function(){ // insert code here }(); 模式一:函数字面量 (Function Literal) 先声明函数对象,然后执行. 复制代码 代码如下: (function(){ // insert code here })(); 模式二:优先表达式 (Prior Expression) 由于 JavaScript 按照从内到外的顺序执行表达式,因此使用括号来强制执行已声明的函数. 复制代码 代码如下: (function

  • JavaScript匿名函数用法分析

    本文实例讲述了JavaScript匿名函数用法.分享给大家供大家参考.具体如下: 一.定义一个函数 在JavaScript中,可以通过"函数声明"和"函数表达式"来定义一个函数,比如 1.通过"函数声明"来定义一个函数 function t1(){} 2.通过"函数表达式"来定义一个函数 t2 = function(){} 但是两种方式定义函数,效果是不同的 t1是函数声明,'词法分析'时,AO.t1 = function()

  • javascript匿名函数实例分析

    本文实例讲述了javascript匿名函数的用法.分享给大家供大家参考.具体分析如下: 摘要: 本文讲解的是javascript最基础也是最重要的东西--函数,之所以写这篇文章,是因为面试的时候问到了,也算是温故而知新了. 先上个例子,如果你看懂了,说明你已经理解了本文要讲的. 复制代码 代码如下: var f = (function() { function f() {return 10;} return f(); function f() {return 20;} var f = 30; }

  • JavaScript中的toUTCString()方法使用详解

    该方法使用通用时间约定一个日期转换为字符串. 语法 Date.toUTCString() 下面是参数的详细信息: NA 返回值: 返回转换日期为字符串,使用通用的时间约定. 例子: <html> <head> <title>JavaScript toUTCString Method</title> </head> <body> <script type="text/javascript"> var da

  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    目录 何为递归 构成递归条件 关于回溯 实际业务 组合问题 何为递归 递归作为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.需要注意的是,递归必须要用边界条件,否则很容易导致死循环 构成递归条件 子问题须与原始问题为同样的事,且更为简单

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • javascript中2个感叹号的用法实例详解

    在javascript代码中经常会见到!!的情况,本文即以实例形式较为深入的分析javascript中2个感叹号的用法.分享给大家供大家参考之用.具体分析如下: javascript中的!!是逻辑"非非",即是在逻辑"非"的基础上再"非"一次.通过!或!!可以将很多类型转换成bool类型,再做其它判断. 一.应用场景:判断一个对象是否存在 假设有这样一个json对象: { color: "#E3E3E3", "fon

  • JavaScript中变量提升和函数提升实例详解

    js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端

  • Javascript 中AJAX的图书管理代码实例详解

    Javascript 中AJAX的图书管理代码实例详解

    目录 1.接口文档 2.代码结构 3.案例效果 总结 1.接口文档 2.代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

  • StackTraceElement获取方法调用栈信息实例详解

    本文研究的主要是StackTraceElement获取方法调用栈信息的相关内容,具体介绍和实例如下. 一.什么是StackTrace StackTrace(堆栈轨迹)存放的就是方法调用栈的信息,异常处理中常用的printStackTrace()实质就是打印异常调用的堆栈信息. 二.StackTraceElement介绍 StackTraceElement表示StackTrace(堆栈轨迹)中的一个方法对象,属性包括方法的类名.方法名.文件名以及调用的行数. public final class

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • JavaScript中new操作符的原理与实现详解

    目录 一.new做了哪些事 二.返回不同类型时有哪些表现 三.手写new的实现原理 一.new做了哪些事 先看看new的使用场景: // 1.创建一个构造函数 function Vehicle(name, price) { this.name = name this.price = price } ​ // 2.new一个实例对象 let truck = new Vehicle() console.log(truck); //Vehicle { name: undefined, price: u

  • Spring jdbc中数据库操作对象化模型的实例详解

    Spring jdbc中数据库操作对象化模型的实例详解 Spring Jdbc数据库操作对象化 使用面向对象方式表示关系数据库的操作,实现一个线程安全可复用的对象模型,其顶级父类接口RdbmsOperation. SqlOperation继承该接口,实现数据库的select, update, call等操作. 1.查询接口:SqlQuery 1) GenericSqlQuery, UpdatableSqlQuery, MappingSqlQueryWithParameter 2) SqlUpda

随机推荐