JavaScript函数(Function)
JavaScript函数
- 函数(Function)
- 方法的声明
- 无参函数
- 有参函数
- 函数可以作为参数传递
- 回调函数
- 函数做为返回值
- arguments
- 变量作用域
- 函数作用域
- 变量和函数的声明提前
函数(Function)
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
方法的声明
function 名字(参数列表...){//语句块
}
//调用
方法名字()
实例↓
function sayHi(){console.log('hello JavaScript')
}sayHi();
在js中一切皆是对象,方法只要加括号就可以执行
function sayHi(){console.log('hello JavaScript')
}var myfun = sayHi;
myfun()
无参函数
像这种不传参数的函数就是无参函数
function sayHi(){console.log('hello JavaScript')
}sayHi();
样例代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script>function sayHi(){console.log('hello JavaScript')}sayHi();</script><title></title></head><body></body>
</html>
效果截图:
有参函数
有参的函数我们在定义时需要定义参数,而且调用时也需要传入参数。
样例代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script>//function 方法的名字([形参1,形参2,...形参n])注:不需要声明类型function sum(numa,numb){console.log(numa+numb)}//调用sum(10,20);</script><title></title></head><body></body>
</html>
效果截图:
函数可以作为参数传递
第一种写法
function say (value) {alert(value);
}
function execute (someFunction, value) {someFunction(value);//回调函数
}
execute(say, 'hi js.');
上面代码是将say方法作为参数传递给execute方法。
第二种写法
var say = function(value) {alert(value);}function execute (someFunction, value) {someFunction(value);//回调函数}execute(say, 'hi js.');
第三种写法
function execute (someFunction, value) {someFunction(value);//回调函数
}
execute(function(value) {alert(value);
}, 'hi js.');
上述代码中execute方法的第一个参数是一个匿名函数(没有函数名的函数)。函数有名字是为了方便下次使用。 而使用匿名函数通常不希望再次使用(即只使用一次的)的函数可以定义为匿名函数。
上面的函数say被叫做回调函数。
回调函数
回调函数就是你调用别人(execute),然后别人会调用你(say),简言之:你写一个函数(say),但不是由你调用,是由你调用的一个函数(execute)调用。
函数做为返回值
样例代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script>function fn2(a){return function (b){console.log(a+b); };}fn2(20)(10);//30</script><title></title></head><body></body>
</html>
效果截图:
arguments
在调用函数时,浏览器还传递了另一个隐含的参数,还有一个参数叫做arguments。arguments是一个类数组对象,在它里边保存着函数执行时的实参。函数的所有的实参都在arguments中保存,通过arguments即使不定义形参也可以使用参数。
样例代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function fun(a,b,c){//获取实参的数量console.log(arguments.length);//获取指定的实参//实参会保存到arguments对象中指定的位置console.log(arguments[2]);}fun("hello",123,true);</script></head><body></body>
</html>
效果截图:
变量作用域
作用域(Scope)
作用域简单来说就是指一个变量的作用的范围
在JS中作用域分成两种:
1.全局作用域
2.函数作用域
全局作用域:
1.所有直接在script标签中编写的代码都在全局作用域中。
2.全局作用域在打开网页时创建,在网页关闭时销毁。
3.全局作用域中有一个全局对象window,window代表的是浏览器的窗口。
在全局作用域中创建的变量都会作为window对象的属性保存
在全局作用域中创建的函数都会作为window对象的方法保存
4.在全局作用域中创建的变量都是全局变量,可以在页面的任意位置访问。
样例代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript">var a = 123;b = 456;function fun(){console.log(b);console.log(window.a);console.log(window.b);console.log("我是全局中的函数fun");}fun();window.fun();//window.alert("hello");</script>
</head>
<body>
</body>
</html>
效果截图:
函数作用域
函数作用域:
1.函数作用域可以理解为是全局中的小的作用域。
2.函数作用域在函数调用时创建,在调用结束时销毁。
每调用一次函数就会创建一个新的函数作用域。
3.在函数作用域中可以访问到全局变量,而在全局中无法访问到函数作用域中的变量。
在函数中创建的变量如果不写var,则会变成全局变量。
4.当我们在函数中使用一个变量时,它会先在自身的作用域中寻找,如果有就直接使用,如果没有则去上一级作用域中寻找,找到则使用,没找到则继续寻找,直到找到全局作用域为止。
如果全局作用域中依然没有,则报错ReferenceError。
5.在函数作用域中也适用变量和函数的声明提前。
样例代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个全局变量avar a = "全局中的a";function fun() {//console.log(a);//window.b = ...var b = "函数作用域中的b";console.log(b);}fun();//console.log(b);//创建全局变量cvar c = "全局c";console.log(window.c);/*function fun2(){//创建一个局部变量cvar c = "---> 函数中的c";console.log(c);}fun2();*/function fun3() {//var c = "fun3中的c";function fun4() {//var c = "fun4中的c";console.log(c);}//调用fun4fun4();}fun3();</script></head><body></body>
</html>
效果截图:
变量和函数的声明提前
变量的声明提前:
使用var关键字声明的变量,都会在所有的代码执行之前被声明,但是不会赋值。
赋值会直到执行到赋值的代码时才执行。
如果不适用var关键字声明变量,则不会有声明提前的特性。
函数的声明提前:
使用函数声明创建的函数,会在所有的代码执行之前创建,
所以我们可以在函数声明前就去调用函数。
使用函数表达式创建的函数,没有这个特性,所以不能在它创建之前调用。
样例代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript">//如果不写var,直接为变量赋值,则相当于为window对象添加属性//window.a = 10;//a = 10;console.log("a = "+a);var a = 10;fun();//fun2();//使用函数声明来创建一个函数function fun(){console.log("我是fun函数");};//使用函数表达式创建一个函数var fun2 = function(){console.log("我是fun2函数");};fun();fun2();</script>
</head>
<body>
</body>
</html>
效果截图:
上面的 fun2()的注释打开会报错,因为在那里还没有声明fun2,不能调用。
写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]
加油!
共同努力!
Keafmd
JavaScript函数(Function)相关推荐
- JavaScript学习总结(七)——JavaScript函数(function)
转载自 JavaScript学习总结(七)--JavaScript函数(function) 一.函数基本概念 为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 ...
- 菜鸟教程 之 JavaScript 函数(function)
From:https://www.runoob.com/js/js-function-definition.html JavaScript 函数定义 JavaScript 使用关键字 function ...
- JavaScript学习总结(3)——JavaScript函数(function)
一.函数基本概念 为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 1.自定义函数(我们自己编写的函数),如:function funName(){} 2.系统函 ...
- 深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...
- Javascript学习之函数(function)
http://www.cnblogs.com/royalroads/p/4418587.html 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例,而且都与其 ...
- jquery.form.js java_教javascript函数和jquery函数的使用$(form).submit(function()
教javascript函数和jquery函数的使用$("form").submit(function() 1.$ 是 JQuery 常用的一个回传函数,定义为 "选取&q ...
- JavaScript踩坑(5)比值函数 function(a, b)
在下午学习JavaScript数组的过程中,多次用到了比值函数 比值函数function( a, b )是和JavaScript里的sort( )函数一起使用的,比值函数嵌套在sort( )函数的圆括 ...
- JavaScript函数中event参数的使用-----function(event){}
目录 什么是event? 当function函数中没有传入event参数时,我们应该如何在函数内部使用event呢? event.target的使用 event.currentTarget的使用 什么 ...
- JavaScript中的一等公民: 函数(Function)
1. 函数的基本使用 使用函数声明或者函数表达式创建一个函数 foo(); //foo bar(); //Uncaught ReferenceError: Cannot access 'bar' be ...
最新文章
- Redis 笔记(02)— keys 键相关命令(查询数据库key数量、判断key是否存在、指定key过期时间、查看key类型、查看key剩余秒数、选择数据库、删除key、删除数据库)
- 数学知识--Methods for Non-Linear Least Squares Problems(第二章)
- 视频监控技术 迎来网络“多媒体”时代
- C error :Run-Time Check Failure #2 - Stack around the variable 'b' was corrupted.
- linux 挂iscisc存储,基于arm的嵌入式linux操作系统的移植研究-通信与信息系统专业论文.docx...
- thymeleaf if 条件判断
- Ulysses for Mac(最好用的纯文本编辑器)v22(65099)直装版
- 全连接层后面加bn层_神经网络基本组成 - 池化层、Dropout层、BN层、全连接层 13...
- Linux文件压缩解压命令
- paypal接口文档android,PAYPAL --集成API接口教程
- 守望先锋游戏反外挂技术测评
- Teigha 40010 保存设置Wipeout时的边界显示问题
- 达索Catia许可证优化管理方案
- go语言求时间的差值(按天数算)
- Android 4.3 隐藏功能 App Ops 分析
- 用忆阻器的cir文件进行pspice仿真
- 积极的心态带动积极的行为
- 响应式布局以及提交网站
- 【竞赛总结】第七届工程训练大赛智能搬运赛项心得
- 三星是如何成为全球最大智能手机厂商的
热门文章
- html打赏代码,简单JS弹窗实现打赏代码
- Scratch编程思维导图_ADOPT法则_与非学堂出品
- Python | freeze | 如何将Python已安装的库(pip list)导入与导出
- JS RPC-sekiro直接得到加密参数结果进行爬虫(同花顺)
- python教学视频m_Python学习基础篇 -1
- RV1126--rkmedia学习笔记
- 做个非常非常非常简单的单因素方差分析案例
- 中国码农在硅谷:求职流程与经验分享
- java面试题目前为止全内容收集
- 读《大型网站技术架构 核心原理与案例分析+李智慧-高清》有感