一、函数核心原理概述函数就是封装一段可重复执行的代码块可以传入参数执行完成后返回结果实现逻辑复用避免大量重复代码。JavaScript中函数属于引用类型既可以调用执行也可以当作普通数据进行赋值、传递、返回。函数的核心组成函数名函数标识用于调用匿名函数除外形参接收外部传入的数据位于小括号内函数体大括号内部需要封装执行的业务代码return返回值函数向外输出执行结果无return默认返回undefined函数生效条件定义函数只是声明逻辑必须调用才会执行内部代码。二、函数的三种定义方式方式一函数声明function声明使用function关键字直接声明具备函数提升代码执行前就已经注册可以在定义之前调用。// 函数声明 function calcSum(a, b) { return a b; } // 函数调用 let res calcSum(10, 20); console.log(res);工程用途通用工具函数全局业务方法优先使用函数声明。方式二函数表达式匿名函数赋值给变量把匿名函数赋值给变量不存在函数提升必须先定义后调用。事件回调大量使用该形式。const calcSum function (a, b) { return a b; }; let res calcSum(10, 20); console.log(res);方式三箭头函数 ES6箭头函数是函数的简写语法不绑定this、没有arguments不能作为构造函数常用于回调简写。const calcSum (a, b) { return a b; }; // 单行简写省略return与大括号 const calcSum2 (a, b) a b;三、参数与返回值机制形参函数定义时书写的占位变量实参调用函数时真正传入的数据。// a,b 形参 function sayHi(name) { return 你好${name}; } // 张三 实参 let str sayHi(张三); console.log(str);实参多于形参多余实参默认被忽略可通过剩余参数...rest接收全部剩余参数实参少于形参未接收到数据的形参值为undefined可以设置默认参数// 默认参数 function logInfo(name 匿名用户) { console.log(name); } // 剩余参数收集多个实参为数组 function total(...nums) { return nums.reduce((sum, item) sum item, 0); }return作用终止函数执行向外返回结果函数执行遇到return后面代码不再运行没有写return函数默认返回undefined。四、作用域与作用域链作用域规定变量的可访问范围JS分为全局作用域、函数作用域、块级作用域。全局作用域脚本顶层任意位置都可以访问window下的变量谨慎使用容易污染命名空间函数作用域函数内部函数外部无法直接访问函数内部变量块级作用域let/const产生if、for大括号形成独立作用域var不受块级约束作用域链访问一个变量时优先在当前作用域查找找不到向外层一层层查找直到全局作用域找不到直接抛出引用错误。let outer 外层变量; function fn() { let inner 内部变量; console.log(outer); // 向外查找访问外层变量 } fn(); // console.log(inner); // 函数外部无法访问内部变量报错五、闭包函数保留外层作用域闭包产生条件内部函数访问外层函数的变量并且内部函数被外部环境引用。外层函数执行完毕它的变量不会被销毁依旧可以被内部函数使用。function outer() { let count 0; return function inner() { count; return count; }; } const counter outer(); console.log(counter()); console.log(counter());闭包的价值与风险用途保存私有数据、数据缓存、防抖节流、封装工具逻辑风险变量常驻内存不当使用会造成内存泄漏不用时解除引用释放内存六、高阶函数高阶函数定义接收函数作为参数或者返回一个函数是函数作为一等公民的重要体现。数组遍历方法、回调、防抖节流全部基于高阶函数。// 接收函数作为参数 function handleArr(arr, cb) { for(let i 0; i arr.length; i){ cb(arr[i]); } } handleArr([10,20,30], function(item){ console.log(item); });常见高阶函数场景定时器、事件addEventListener、数组map/filter/forEach、防抖节流封装。七、this指向规则函数上下文this是函数运行时的上下文对象它的值不看定义位置看函数的调用方式。普通函数直接调用this指向全局window严格模式undefined对象方法调用this指向调用该方法的对象事件处理函数this指向触发事件的DOM元素箭头函数不绑定this继承外层作用域thiscall / apply / bind手动强制修改this指向const obj { name:测试对象, say:function(){ console.log(this.name); } }; obj.say();八、函数工程选型标准企业规范通用工具函数优先使用function函数声明可读性好回调、数组遍历简短逻辑优先箭头函数简化代码需要保存私有状态合理使用闭包用完及时释放引用尽量少全局函数避免全局命名冲突使用模块或者对象包裹函数参数较多场景使用对象传参避免参数顺序记忆成本九、开发高频避坑总结函数声明存在提升函数表达式没有提升不要在定义前调用表达式函数箭头函数没有arguments需要接收可变参数使用...剩余参数闭包不要滥用避免大量常驻内存造成内存泄漏this指向极易混淆牢记this由调用方式决定不是定义位置函数内部执行到return立刻终止return之后代码永远不会执行尽量不要写过长的大函数遵循单一职责一个函数只做一件事十、写在最后变量存储数据函数封装行为。函数、作用域、闭包、高阶函数、this上下文共同构成JavaScript核心能力。掌握函数整套体系才能看懂回调、异步、数组高级方法、封装工具方法真正从写零散代码走向工程化JS开发。