【零基础JavaScript教程】#11 JavaScript Function 什么是 Function 函数？ | JavaScript Function Tutorial For Beginners
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！ 我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。 ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #javascript-function-函数 #编程入门 #javascript入门
文字版内容：
Hi, 大家好，我是文轩
欢迎再次收看文轩解码
如果你想和其他同学一起学习和讨论JavaScript编程
可以扫描这个二维码
去到自学编程社区里和其他同学一起互动
这堂课我们来聊聊JavaScript 函数 Function
函数是程序的主要构建模块
大部分的代码都会被放在函数里
让程序在运行的时候统一调用
一般一个函数只执行一个功能
比如登录函数执行登录功能
付款函数执行付款功能
接下来，我们看看函数的语句
函数语句一共分为四个部分
第一部分是函数关键字，function
第二部分是函数名
第三部分是参数
第四部分是函数体function body
创建函数需要插入function关键字
函数关键字后面跟着的是函数名
函数名一般会选用比较直观的名字
像那种一眼就能看懂函数执行什么功能的名字
这个函数名叫login，单看这个函数名
我们就能猜出这个函数
主要的功能就是让用户登录程序
小括号里是参数列表
如果列表里多过一个参数的话
参数列表就需要用逗号隔开
一般我们登录程序
都要输入用户名和密码
程序会把用户名和密码
作为参数传递到login函数
函数内部就会检查这用户名和密码是否正确
函数体存放了我们要函数执行的源代码
好的
现在我们切换到VS Code创建第一个function
我们来创建一个能和用户打招呼的function吧
每一次我们调用这个function
它就会打印
"Hi, welcome to my JS function"
先插入function关键字
然后是函数名
这里我们把它命名showMessage
参数列表这里暂时不输入任何参数
先让它空着吧
接着输入大括号
在函数体里
我们用console log打印
"Hi, welcome to my JS function"
我们的第一个函数就搞定了
接下来我教你们怎么调用这个函数
要调用showMessage函数
我们需要输入函数名
showMessage
然后小括号，分号
这就是调用showMessage函数的语句
那现在我们保存刷新页面看看console会输出什么
嗯，我们成功调用showMessage函数了
这里输出"Hi, welcome to my JS function"
接下来，我们升级一下这个函数
我们希望可以把用户名传递给showMessage函数
让函数把用户名打印出来
我们在小括号里添加一个参数
叫它username吧
接着在console log里做一些调整
我们在Hi 后面插入username
把传递进来的用户名打印出来
好的，这个函数升级完了
因为函数多了一个参数
所以我们在调用的时候需要提供用户名
我们在这里输入John字符串
现在我们来保存刷新页面
console这里会根据我们提供的用户名
输出相应的信息Hi John
我们尝试把参数换成Mary
看看又会输出什么？
嗯，是的，它会显示Hi Mary
有了showMessage 函数
程序可以随时调用这个函数
再也不需要重复的输入Hi John
Hi Marry之类的console log
你可以把这个函数想象成一个共享的源代码
只要程序想和用户打招呼
它就可以直接调用这个函数
这样统一调用函数有一个好处
那就是当我想把Hi换成Hey
我只需要在showMessage函数修改就可以了
所有调用这个函数的源代码不需要做任何的改动
如果不使用函数直接输出console.log语句
后期就需要一个一个的把Hi换成Hey
函数的中心思想就是不要重复造轮子
所以同学们要谨记这一条铁律
好的，我们继续说这个showMessage函数
刚才我们给这个函数配了一个参数
但是如果我们在调用的时候忘记提供用户名
像这样
你猜猜console会打印些什么？
我来给你们揭晓
由于我们没有提供用户名
所以console这里只能输出Hi undefined
这算一个小小的bug
要解决这个bug
我们可以给username参数配一个默认值
要给username配默认值
我们可以在username参数后面输入等号
然后默认值
我们把默认值设置成Visitor吧
那这个默认值什么时候会被启用呢？
答案就是
只要程序调用这个函数的时候不提供用户名
用户名就会自动设置成Visitor
我们刷新看看console会输出什么
showMessage被调用的时候没有提供用户名
所以打印出来的信息是Hi Visitor
而不是Hi undefined
所以这就对了
undefined不应该出现的
因为username值现在被默认值Visitor赋予了
那现在我们把用户名换成John
看看是打印John还是Visitor
嗯，对的，是打印Hi John
我们刚才传递John
username的默认值就会被忽略掉
直接采用传递的参数值
除了像刚才简单的显示信息
函数其实还可以返回值
我给你们演示一个能返回值的函数
接下来，我会创建一个能相加两个值的函数
先插入function关键字
函数名是sum
这个函数一共有两个参数
我们叫它num1 和 num2吧
接下来是大括号和函数体
在函数体里我们要计算num1 + num2
先声明一个total变量储存num1 + num2的值
最后我们用return关键字把计算好的值返回到调用代码
好的，这个函数就完成了
接下来我们调用一下这个sum函数
sum函数会返回一个值
这个值我们可以把它赋予一个变量
先声明一个变量s
然后把sum返回的值赋予s变量
这里我们调用sum函数
假设现在我们要计算2+8
在调用sum函数的时候
我们需要提供两个参数
第一个参数是2
第二个参数是8
接着我们console log s 变量
看看计算结果对不对
好的，现在我们保存刷新
看看答案是不是10
嗯，答案是10
我们从这里开始调用sum函数
程序就会跳到这里执行sum函数里的代码
num1 + num2 等于 10
然后10赋予total变量
最后函数通过return关键字返回10
在完成sum函数的代码之后
程序会重新返回到这里
把返回值赋予s
然后继续执行下面的代码
只要函数执行到return语句
函数就会立刻返回到调用代码
不会再继续执行函数剩余的语句
给你们验证一下
我们在return下面添加一个
console.log("after return")
看看console里会不会打印after return
嗯，after return是不会被打印出来的
因为在执行完return total这一行之后
函数就直接返回到调用代码了
所以这一行是永远不会被执行的
好的，那现在我们来总结一下今天的分享
函数语句分为四个部分
function关键字
函数名
参数列表和函数体
函数是一个行为action
所以一般函数名是动词
像createUser, updateUser
函数一般只执行一个功能
如果函数逻辑变得越来越复杂
建议把函数拆分成几个小函数
方便日后调用和调试
参数可以配默认值
如果调用代码不提供参数的话
参数默认值就会被启用
函数可以返回或者不返回值
如果想返回值到调用代码的话
需要使用return关键字
好的，今天的分享就到这里
有疑问的话欢迎去到自学编程社区里提问
喜欢这个视频就拜托点赞分享吧
我们下期见，拜拜！
Comments
Post a Comment