JavaScript 函数_项目3 系统常用函数的使用 1.实训要求 (1)掌握常用的 javascript 系统内部函数和-CSDN博客

在JavaScript中，函数本身并没有明确的“返回类型”声明，这与一些强类型语言（如Java、C++等）不同。在强类型语言中，函数在定义时需要明确指定其返回值的类型，而调用该函数时也期望得到特定类型的结果。

然而，在JavaScript这样的弱类型（或动态类型）语言中，函数的返回类型是由其返回值的实际内容来决定的。这意味着您可以在函数内部返回任何类型的数据，而无需在函数定义时声明返回类型。

实例
function getNumber() {  
    return 42; // 返回一个数字  
}  
  
function getString() {  
    return "Hello, world!"; // 返回一个字符串  
}  
  
function getObject() {  
    return { name: "Alice", age: 25 }; // 返回一个对象  
}
发现：在上面的例子中，每个函数都使用了return语句来返回不同类型的数据。调用这些函数时，您会得到与函数内部return语句指定的值相匹配的返回类型。

2 使用function函数中，不管你是否传递参数，function函数中都不会显示参数类型

原因

在JavaScript中，使用function关键字定义的函数在函数签名中不会显示参数的类型。这是因为JavaScript是一种动态类型语言，它不会在编译时检查变量或参数的类型。相反，类型检查（如果有的话）通常是在运行时进行的。

这意味着，当定义一个函数时，不需要指定参数的类型。函数会接受传递给它的任何值，并在函数体内根据需要使用这些值。如果传递给函数的值类型与函数内部期望的类型不匹配，那么可能会导致运行时错误或不符合预期的行为。

实例
function add(a, b) {  
    return a + b;  
}  
  
console.log(add(1, 2));       // 输出: 3，因为两个参数都是数字  
console.log(add("1", "2"));   // 输出: "12"，因为两个参数都是字符串，执行的是字符串拼接  
console.log(add(1, "2"));     // 输出: "12"，因为第一个参数是数字，第二个参数是字符串，JavaScript会尝试将数字转换为字符串然后进行拼接
发现：在上面的例子中，add函数接受两个参数a和b，并没有指定它们的类型。当传递不同类型的参数时，函数的行为会根据JavaScript的类型转换规则而变化。

应用实例

问题

打开vscode ，使用function函数知识，当鼠标点击段落标签（内容：请点击！），时浏览器控制台打印：今天你辛苦了！！

前置知识

document：整个网页对象

getElementById(): 根据属性id 获得元素。参数为希望获得的元素id值

onclick: 当你点击时，会调用onclick 右边的代码

具体含义：onclick是一个事件处理器属性，它用于指定当元素被点击时要执行的JavaScript代码或函数。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">请点击！</p>
    <script>
        document.getElementById("p1").onclick=function a(){
            console.log("今天，你辛苦了！！")
        }
    </script>
</body>
</html>

效果展示

匿名函数

格式

（function（参数）{

//函数体

return 结果}）

实例

注意：由于匿名函数没有函数名

应用场景

1 定义完毕，立即调用

实例

2 作为其他对象的方法

应用实例

问题

打开vscode ，使用匿名函数知识，当鼠标点击段落标签（内容：请点击！），时浏览器控制台打印：今天你辛苦了！！

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">请点击！</p>
    <script>
        document.getElementById("p1").onclick=(function (){
            console.log("今天，你辛苦了！！")
        })
    </script>
</body>
</html>

效果展示

箭头函数

格式

（参数）=>{

//函数体

return 结果；}

特点

1 如果函数没有参数，可以省略参数列表的圆括号 `()`，但如果有多个参数或没有参数但带有花括号 `{}` 的函数体，则不能省略圆括号：

代码展示

const functionName = () => {  
  // 函数体  
};  
  
const sum = (a, b) => a + b;

2 如果只有一个参数，（）可以省略

代码展示

const square = x => x * x;  
console.log(square(5)); // 输出: 25

3如果函数体只有一个表达式，并且需要返回这个表达式的值，可以省略花括号 `{}` 和 `return` 关键字

代码展示

const functionName = (参数列表) => 表达式;

应用实例

问题

打开vscode ，使用箭头知识，当鼠标点击段落标签（内容：请点击！），时浏览器控制台打印：今天你辛苦了！！

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">请点击！</p>
    <script>
        document.getElementById("p1").onclick= () =>
            console.log("今天，你辛苦了！！")
        
    </script>
</body>
</html>

函数就是对象

代码

  document.getElementById("p1").onclick=(function (){
            console.log("今天，你辛苦了！！")
        })

发现

onclick 事件处理器属性右边是通过赋值运算符连接的，但我们知道函数（方法）本身是不能被赋值的。可以被赋值的：变量，对象。在这里

函数是被当作对象理解的

原因

1 可以参与赋值

上面已经了解了

2 有属性和方法

实例

通过 console.dir() 参数为函数名 ,可以查看当前函数的属性和方法

3 可以作为方法参数

function greet(callback) {  
  const name = "Alice";  
  callback(name);  
}  
  
function sayHello(name) {  
  console.log(`Hello, ${name}!`);  
}  
  
// 将 sayHello 函数作为参数传递给 greet 函数  
greet(sayHello);  
// 输出: Hello, Alice!

理解

在这个例子中，greet 函数接受一个名为 callback 的参数，这个参数是一个函数。在 greet 函数内部，我们调用了 callback 函数，并将一个字符串 name 作为参数传递给它。然后，我们将 sayHello 函数作为参数传递给 greet 函数。当 greet 被调用时，它内部实际调用了 sayHello 函数，并传递了 name 参数。