3、JavaScript函数

知识点

  • 函数定义
  • 函数调用
  • 传参
  • 函数的返回值
  • 变量的作用域
  • 匿名函数
  • 回调函数
  • 自调函数
  • 内嵌函数
  • 递归调用
  • 闭包

函数定义

来看下面的代码。

function print(){
    console.log(‘123‘);
}

上面的代码定义了一个函数

- function 定义函数的关键字

- print 函数名

- {} {}中的内容为函数体,即console.log(‘123’);

函数调用

print();

使用上面的代码可以调用函数,函数的调用方法为funcName([arg1,arg2...,argN])

传参

首先定义一个带有参数的函数

function print(str){
    console.log(str);
}

在这个函数中str为参数,调用方式为print(‘123‘)。这时候将‘123‘传入了str,在函数中就可以使用str了。

Note

- 以上面的函数为例,在调用的时候可以不传入参数,语法上是不会有错的。这时str的值为undefined

- 也可以传入多个参数,如print(‘123‘,‘456‘)。因函数定义的时候只定义了一个参数,所以这里只接收第一个参数。

Javascript函数内建的arguments数组

每个函数内部都有一个内建的arguments数组,它能返回函数接收的所有参数,不管函数有没有定义参数。

function print(){
    console.log(arguments);
}

//-------------

> print(‘123‘,‘456‘)
> ["123", "456"]

这时arguments数组中有两个元素,分别是‘123‘,‘456‘

函数的返回值

function add(num1,num2){
    return num1 + num2;
}

> var result = add(1,2)
> console.log(result );
> 3

利用arguments改造函数

function add(){
    var sum = 0;
    for(var i=0;i<arguments.length;i++){
        sum += arguments[i]
    }
    return sum;
}

函数经过改造后我们可以传任意多的参数,但是参数类型必须是number类型,如果是其他类型最终的结果只能是NaN

> var result = add(1,2,4,5)
> console.log(result );
> 12

变量的作用域

首先以JS文件内部的变量说起。

在js所有{}之外定义的变量都为全局变量。如下

//This is a javascript file
var std = {};

全局变量在任何地方都可以使用,但是在任何一个地方对全局变量的更改都会反应到其他引用变量的地方。

var std = {};

std = 0;

console.log(std);

//这里我们定义了一个名为std的全局变量,然后为其赋值为0。然后使用console.log打印std这时std的值已经变为了0,而不是{}

函数的参数名对于函数本身来说也是一个变量,这个变量可以在函数体内的任何地方使用,但仅在函数体中有效。

function print(str){
    console.log(str);
}
//str仅在函数体中有效,在函数体外是无法使用str变量的

{}中定义的变量仅在{}中有效

if(x > 2){
    var t = true;
    console.log(t);
}
console.log(t);

>true
>Uncaught ReferenceError: t is not defined

匿名函数和回调函数

指没有函数名的函数。

function(a){
    print(a);
}

匿名函数的应用场景

1. 作为一个变量的值

var print = function(str){
    console.log(str);
}
print(‘123‘)
> 123
  1. 作为函数的参数传入
function process(data,callback){
    if(data.success){
        callback(data.msg);
    }
}

var myData = {
    success: true,
    msg: ‘hello‘
}

process(myData,function(msg){
    console.log(msg);
});

在这里

function(msg){
    console.log(msg);
}

就是一个匿名函数,同时也是一个回调函数。回调函数指将函数作为变量传入另一个函数,供其使用。

回调函数不一定是匿名函数,如下可以对上面的代码做下改造。

function print(str){
    console.log(str);
}

proccess(myData,print);

自调函数

指函数在定义后可以自行调用。

(function(){
    print(‘123‘);
})()

>123

自调函数的传参

(function(msg){
    print(msg);
})(‘123456‘)

内嵌函数

值在函数中定义函数。内嵌函数的作用域为函数体

递归调用

函数在函数体中调用其自身,通常用于遍历树状节点。

时间: 2024-10-14 20:34:27

3、JavaScript函数的相关文章

ABP展现层——Javascript函数库

ABP展现层——Javascript函数库 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ASP.NET Boil

C#实现百度地图附近搜索&amp;调用JavaScript函数

前一篇文章"C#调用百度地图API入门&解决BMap未定义问题"讲述了如何通过C#调用百度API显示地图,并且如何解决BMap未定义的问题.这篇文章主要更加详细的介绍百度地图的一些功能,包括附近搜索.城市搜索.路线规划.添加覆盖物等等. 希望文章对你有所帮助!如果文章中有不足之处,还请海涵~ 百度官方文档:http://developer.baidu.com/map/jsmobile.htm 官方DEMO例:http://developer.baidu.com/map/jsde

JavaScript函数,作用域以及闭包

JavaScript函数,作用域以及闭包 1. 函数 (1). 函数定义:函数使用function关键字定义,它可以用在函数定义表达式或者函数声明定义. a. 函数的两种定义方式: * function functionName() {} * var functionName = function(){} b. 两种函数定义不同之处 1). 声明提前问题 函数声明语句   :声明与函数体一起提前 函数定义表达式 :声明提前,但是函数体不会提前 请看下面图示:绿色线上面实在js初始加载的时候,查看

HTML 学习笔记 JavaScript (函数)

函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块 实例 <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">点击这里</b

javascript 函数重载 overloading

函数重载 https://en.wikipedia.org/wiki/Function_overloading In some programming languages, function overloading or method overloading is the ability to create multiple methods of the same name with different implementations. Calls to an overloaded functi

第十篇--------javascript函数-参数

javascript函数的参数:形参,实参 //function 参数 //形参列表 function test(a,b,c,d){ //alert(test.length); //形参个数,4个 //函数的实际参数,内部就是用一个数组去接收函数的实际参数 //arguments 对象,可以访问函数的实际参数 //arguments 对象只能在函数的内部使用 alert(arguments.length); //2个 alert(arguments[0]); //10 alert(argumen

javaScript 函数重载

javaScript函数不支持重载.有时我们想像java.C等语言 一样定义 重载的方法,那么 我们就可以用其他的方式去定义 重载的函数. 当然,实现的方式 有好多种,每个人 可能不同.下面 我贴出我的实现及使用方法 和 大家交流. js 源码: /**  * 函数参数重载方法 overload,对函数参数进行模式匹配.默认的dispatcher支持*和...以及?,"*"表示一个任意类型的参数,"..."表示多个任  *意类型的参数,"?"一般

前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 }] }, { name:'Jessi', age:30 }]}]; 输出的HTTML如下: 1 <ol> 2 <li>name:Tom</li> 3 <li>age:70</li> 4 <li>children: 5 <ol&g

2015第37周五javascript函数arguments对象巧用一

Javascript函数的一个巧妙利用:假定action中有一个JSONObject类型的对象data,其值有可能为空,则前台JSP页面的JS代码中想直接通过EL表达式,即${data}的形式访问对象的值,则可能会因为data对象为空导致JS预处理错误,如JSP中有这样的代码,var obj=${data};,则当后台data为null时前台页面会变成var obj=;进而页面报错终止运行.有人想通过类似 var obj=('${data}'==''?{}:${data})来解决,但该代码依旧编

被括号括住的JavaScript函数

在JavaScript经常会看到这样的代码 ( function( $ ){ $( 'body' ).css( { 'background-color': '#ccc' } ); } )( jQuery ); 这里的一个JavaScript函数被一个括号括了起来, 然后后面紧跟着一个括号,这种奇葩的写法在其它如Java.VB.c#.c++.php等流行编程语言中根本见不到.这种写法乍一看是JavaScript特意增加的新奇特性, 其实并不是. 在我们编写任何程序时,时时刻刻在用到与上面代码类似的