js函数简介

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

函数是程序运行的重要组成部分，这篇文章主要介绍四个常见的函数形式，分别为函数声明、函数表达式、匿名函数和自执行函数。

函数声明

函数声明是指利用关键字function声明一个函数

function say(){
    console.log('hello world')
}

每个函数都会有自己的作用域，函数内部可以访问上层函数的作用域变量。

function fn(){
    const a = 10
    function inner() {
        const b = 20
        return a + b
    }
    return inner()
}
fn() // 30

函数表达式

函数表达式是将一个函数体赋值给一个变量的过程。

const fn = function(){}

那么我们也可以怎样理解上面一行代码的执行呢？

const fn = undefined
fn = function(){}

因此需要考虑到变量提升的影响，这是与函数声明不一样的地方。

fn() // // TypeError: fn is not a function
const fn = undefined
fn = function(){}

fn1() // hello world
function fn1() {
    console.log('hello world')
}

我们也可以使用箭头函数的语法表示函数体

const fn = () => {
    console.log('hello world')
}

函数体赋值的操作，我们还可以在其他很多场景遇到，如下。

function Person(name,age){
    this.name = name
    this.age = age
    
    this.getName = function() {
        return this.name
    }
    
    this.getAge = () => this.age
}

Person.prototype.getAge = function () {
    return this.age 
}

const a = {
    b:20,
    getB: function() {
        return this.b
    }
}

匿名函数

匿名函数正如名字所言，一个没有名字的函数。通常不会使用变量来保存它的引用。匿名函数一般会作为一个函数参数或者一个返回值而存在。

setTimeOut(function() {
    console.log('hello world')
},1000)

setTimeOut(()=>{
    console.log('hello world')
},1000)

用作数组方法中的一个参数

const arr = [1,2,3]

arr.map((item)=>{
    return item*2
})

arr.forEach(function(item)=>{
    item+1
})

用作函数的返回值

function add() {
    const a = 10
    
   return function() {
       return a + 10
   }
}

add()

自执行函数

自执行函数也是匿名函数的一个应用场景，因为函数会产生独立的作用域，所以我们经常使用自执行函数来模拟块级作用域。

(function() {
    console.log('hello world')
})()

这里我们可以借助自执行函数来了解模块化。

一个模块包括：私有变量、公有变量、私有方法、公有方法。

当我们使用自执行函数创建了一个模块，就意味着外界已经无法访问该模块内的任何属性值和方法。如果我们想开放内部的变量方法让外部调用，我们可以选择闭包的方式进行。

(function(){
    // 私有变量
    const age = 18,
    const name = 'Jack'
    
    // 私有方法
    function getName() {
        return name
    }
    
    // 公有方法
    function getAge(){
        return age
    }
    
    window.getAge = getAge
})