JavaScript函数(声明函数、调用函数、匿名函数、箭头函数、构造函数)

最新推荐文章于 2024-05-14 23:27:22 发布

Bulut0907

最新推荐文章于 2024-05-14 23:27:22 发布

阅读量471

点赞数 3

分类专栏： Javascript 文章标签：声明函数调用函数匿名函数箭头函数构造函数

本文链接：https://blog.csdn.net/yy8623977/article/details/135153113

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 函数

1.1 声明函数

函数的调用不传递值给形参，且形参没有默认值，则其值为undefined
如果没有return返回值，则返回undefined
函数内部，变量没有声明，直接用num = 1赋值，也当全局变量看
两个相同名称的函数，后面定义的会覆盖前面定义的
局部变量和全局变量同名，则局部变量优先

   
    function getMinMax(x = 0, y = 0) {
        // 局部变量
        let min = x > y ? y : x
        let max = x > y ? x : y

        return [min, max]
    }

1.2 调用函数

如果实参过多, 那么多余的实参会被忽略
可以使用...arr声明一个形参，放在形参的最后，接收多余的实参。使用的时候直接用arr(真数组)
函数内部有一个伪数组arguments,里面装着所有的实参
函数调用存在提升: 函数在当前作用域声明之前即可被调用。但函数表达式不存在函数提升

    let minMaxArr1 = getMinMax(1, 3)
    console.log(minMaxArr1)  // [1, 3]

1.3 匿名函数

1.3.1 函数表达式

必须先声明，再调用
应用场景: 可以将函数赋值给按钮的点击事件

    let func = function (x = 0,y = 0) {
        let min = x > y ? y : x
        let max = x > y ? x : y

        return [min, max]
    }
    let minMaxArr2 = func(1,3)
    console.log(minMaxArr2)  // [1, 3]

1.3.2 立即执行函数

方式1

多个立即函数中间如果没有;隔开，可能会报错
应用场景: 可以避免定义全局变量

    let minMaxArr3 = (function (x = 0,y = 0) {
        let min = x > y ? y : x
        let max = x > y ? x : y

        return [min, max]
    })(1, 3)
    console.log(minMaxArr3)  // [1, 3]

方式二

     let minMaxArr4 = (function (x = 0,y = 0) {
        let min = x > y ? y : x
        let max = x > y ? x : y

        return [min, max]
    }(1, 3))
    console.log(minMaxArr4)  // [1, 3]

1.4 箭头函数

写法更简单，属于表达式函数，可以更好的实现匿名函数

只有一个参数可以省略小括号
如果函数体只有一行代码，可以写到一行上，并且无需写return，直接返回值。如果返回值是对象需要加小括号，例如(uname) => ({uname: uname})
箭头函数没有arguments动态参数，但是有剩余参数...arr
箭头函数不会创建自己的this, 它里面的this是自己的作用域链的上一层的this。例如事件回调函数使用箭头函数时，this为全局的window

使用示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    const fn = (x) => {
      console.log(x)
    }

    fn(6)
  </script>
</body>
</html>

1.5 构造函数

用处: 用来初始化对象
声明: 虽然是常规函数。但约定命名以大写字母开头。可以给构造函数声明静态变量和静态方法
实例化:
- 只能由new操作符来创建对象
- 如果没有参数，可以省略()

    function Person(uname) {
      this.uname = uname    // 动态变量
      this.printName = () => console.log(`hi, ${this.uname}`)   // 动态方法
    }
    Person.type = 'person'  // 静态变量
    Person.sayHi = () => console.log('hi')  // 静态方法
    
    const lily = new Person('lily')
    console.log(lily)   // {uname: 'lily', printName: ƒ}
    lily.printName()        // hi, lily
    console.log(Person.type)    // person
    Person.sayHi()              // hi