详细剖析js中的函数

目录

• 函数的详细剖析
  • 什么是函数
  • 为什么使用函数
  • 如何定义函数
  • 调用函数的几种方式
  • 回调函数
    • 回调函数的特点
    • 常见的回调函数
  • IIFE立即执行函数表达式
    • IIFE的作用

函数的详细剖析

什么是函数

是多条语句或表达式的封装体,用于实现特定功能,能够执行(调用)

// add是一个函数
function add (){
    var a = 1   // 语句
    a = a + 1   // 表达式
    return a    // 语句
}

为什么使用函数

提高代码的复用性,体现封装的思想

如何定义函数

函数申明式

function func () {}

表达式

var func = function () {}

调用函数的几种方式

func()      // 直接调用
obj.func()  // 作为对象的方法调用
new func()  // 作为构造函数调用

// 这三种方法能够让func成为obj的方法
func.call(obj)
func.apply(obj)
func.bind(obj)

回调函数

回调函数的特点

• 由我们定义
• 不由我们调用
• 但是最终在特定情况下执行

常见的回调函数

• DOM响应事件
• 定时器回调函数
• AJAX请求回调函数
• 框架的生命周期回调函数

IIFE立即执行函数表达式

IIFE的全称是Immediatly-Invoked Function Expression

花式调用立即执行函数

// 这种是最常用的一种
(function (name) {
    console.log(`hello,${name}`)
})('Fitz');

(function (name) {
    console.log(`hello,${name}`)
}('Fitz'));

[function (name) {
    console.log(`hello,${name}`)
}('Fitz')];

!function (name) {
    console.log(`hello,${name}`)
}('Fitz');

+function (name) {
    console.log(`hello,${name}`)
}('Fitz');

-function (name) {
    console.log(`hello,${name}`)
}('Fitz');

IIFE的作用

对外隐藏实现, 更好的体现封装

var a = 1
var b = (function (value) {
        return value + 9
    })(a);
console.log(b)  // 10
/* 
    对于全局而言,隐藏了操作,只需要知道传入一个数字就能得到它+9的数
*/

;(function () {
    var a = 1
    function add() {
        console.log(++a)
    }
    window.$ = {
        test
    }
})()

$.add()    // 2
$.add()    // 3
/* 
    对于全局而言, 只提供了一个add()方法,却无法得知其中的实现
*/

防止污染全局变量
例子: 我们想单纯得到数字2

// 这样做会污染全局变量
var index = 2
console.log(index)  // 2

// 通过IIFE能够有效避免污染全局变量
!function () {
    var index = 2
    console.log(index)
}()

console.log(index)  // 报错: index is not undefined

用于编写JS模块

参考JQuery的源码实现,JQuery本质上就是一个巨大的IIFE