前言#

我从2023年开始学习JavaScript，但那时只是浅尝辄止，只做过一些最简单的效果。

现在要做astro开发，我总觉得还是要重新拾起来，开玩笑的说，直至今日我都没弄明白JavaScript里的this是什么意思。

所以我打算认真学习一下JavaScript，希望我能成功吧~！

正文#

课程进度：函数的基本使用和封装#

大纲：函数#

为什么需要函数
函数使用
函数传参
函数返回值
作用域
匿名函数

函数用于处理需要预操作的内容，可以按照一定规则重复执行，不需要手动全部录入信息，非常方便。

一般函数的语法：

1
//函数的声明
2
//参数列表可以为空
3
function 函数名(参数列表)
4
{
5
  //函数内容
6
  for ( let i = 1; i <= 9; i++)
7
  {
8
        //当你需要嵌入变量，表达式时，就使用反引号，可以用于直接在write中计算值而不需要为此写一个新的函数
9
    document.write(`<span>这是第${i}次循环</span>`)
10
        //否则，你可以使用最简单的静态拼接
11
    document.write('<br>')
12
  }
13
}

函数写出来，如果不调用，那么不会自动执行，需要调用一次：

1
函数名(参数列表)

和c的语法相似。

函数的命名规范#

函数最终会封装，让别人或者自己使用，因此必须要注意命名规范：

和变量命名基本一致，尽量能够表达字面意思
尽量使用小驼峰命名法
前缀应该是动词
不应该使用拼音*可读性极差

常见的用于函数名的动词：

动词	含义
can	判断是否可以执行某个动作
has	判断是否含有某个值
is	判断是否是某个值
get	获取某个值
set	设置某个值
load	加载某些数据
add	获取某个值

一些可以参考的命名：

1
function getName() {}
2
function addSquares() {}

一个最简单的求两数之和的JavaScript函数：

1
function getSum()
2
{
3
  let a = prompt('输入第一个数字')
4
  let b = prompt('输入第二个数字')
5
  let sum = a + b
6
  console.log(sum)
7
  //或者你也可以写：
8
  console.log( a + b )
9
}
10

11
//调用函数：
12
getSum()

求1-100的所有数的JavaScript函数：

1
function getSumFrom1To100()
2
{
3
  let sum = 0
4
  for( let = 0; i < 99; i++ )
5
  {
6
    //也可以写成sum += i
7
    sum = sum + i
8
  }
9
  console.log(sum)
10
}

函数传参数#

上述的函数有一个显然的缺点，如果累加的范围想改为1-1000，就需要重写这个函数，非常不方便。

我们可以使用参数传递来解决这个问题：

1
//多个参数用逗号隔开
2
//这里只是声明需要几个参数，具体需要在调用的时候传递。
3
function getSum(a,b)
4
{
5
  sum = a + b
6
  console.long(sum)
7
}
8

9
//调用函数：
10
getSum(1,15)
11

12
//输出结果：
13
16

同理，区间相加的函数也可以通过传参的形式改写：

1
function getSum(a,b)
2
{
3
  let sum = 0
4
  for( let i = a; i <= b; b++)
5
  {
6
    sum += i
7
  }
8
  console.log(sum)
9
}
10

11
getSum(1,100)
12

13
//输出结果：
14
5050

在上面这个函数中，声明部分的a b 都是形参，意义为形式上的参数，并不表示真正的值，只是声明需要传入的参数。

而调用函数的部分，1 100 ，这部分是实际传入的参数，为实参。

和c不一样，形参传递不需要类型

函数返回值#

函数如果只能打印值，那功能受限很严重。

例如 getSum 函数运行出一个结果，要传递给下一个函数做处理，这是很正常的事情。

我们需要使用 return 语句用于返回函数的值。

一个简单的例子：

1
function getSum(a,b)
2
{
3
  return a + b
4
}
5

6
//调用函数出现了变化，现在return会返回一个需要被接收的值：
7
let sum = getSum(1,10)
8

9
//并不是所有的函数都需要返回值
10
alert('我是弹窗，不需要返回值')