JavaScript创建函数的20种方法详解

"这篇文章主要汇总了JavaScript中创建函数的20种方法，涵盖了从基本的函数声明、函数表达式到对象方法、构造函数等多种技术，旨在帮助开发者更好地理解和运用JavaScript的函数特性。" 在JavaScript中，函数是第一类对象，这意味着它们可以作为变量存储、作为参数传递以及作为其他函数的返回值。以下是JavaScript创建函数的20种方式的简要概述： 1. 函数声明： ```javascript function sayHello() { console.log('hello'); } ``` 这是最常见的函数声明方式，可以在代码的任何位置调用。 2. 函数表达式（匿名函数）： ```javascript var sayHello = function() { console.log('hello'); }; ``` 这种方式创建的函数不会被提升到作用域的顶部。 3. 立即执行函数表达式（IIFE）： ```javascript (function() { console.log('hello'); })(); ``` IIFE可以在定义后立即执行，常用于封装局部变量。 4. 匿名函数赋值给变量： ```javascript var sayHello = function() {}; sayHello = function() { console.log('hello'); }; ``` 可以在运行时改变函数的定义。 5. 函数对象属性： ```javascript var Action = { sayHello: function() { console.log('hello'); }, leave: function() { console.log('goodbye'); } }; Action.sayHello(); ``` 将函数作为对象的属性，便于组织和调用。 6. 构造函数： ```javascript function Action() {} Action.prototype.sayHello = function() { console.log('hello'); }; Action.prototype.leave = function() { console.log('goodbye'); }; var a = new Action(); a.sayHello(); ``` 使用构造函数和原型链创建可复用的对象。 7. 箭头函数： ```javascript const sayHello = () => console.log('hello'); ``` ES6引入的箭头函数，语法简洁且this指向有别于普通函数。 8. Function构造函数： ```javascript var sayHello = new Function('console.log("hello")'); sayHello(); ``` 使用Function构造函数动态创建函数，但不推荐，因为性能较差且易引发安全问题。 9. bind方法： ```javascript var sayHello = function(name) { console.log('hello ' + name); }.bind(null, 'John'); sayHello(); // hello John ``` bind方法可以固定函数的this和部分参数。 10. call/apply方法： ```javascript var obj = {name: 'John'}; var sayHello = function(name) { console.log('hello ' + name); }; sayHello.call(obj); // hello John sayHello.apply(obj); // hello John ``` call和apply可以改变函数调用时的上下文（this）并传入参数。 11. 闭包： ```javascript function outer() { var name = 'John'; return function() { console.log('hello ' + name); }; } var inner = outer(); inner(); // hello John ``` 闭包可以让内部函数访问外部函数的变量，即使外部函数已经执行完毕。 12. rest参数： ```javascript function greet(...args) { args.forEach(arg => console.log('hello ' + arg)); } greet('John', 'Jane'); // hello John, hello Jane ``` ES6引入的rest参数允许函数接收不定数量的参数，将其作为一个数组。 13. 默认参数： ```javascript function sayHello(name = 'world') { console.log('hello ' + name); } sayHello(); // hello world ``` ES6引入的默认参数，当函数调用时未提供参数，则使用默认值。 14. 解构赋值： ```javascript function sayHello({name}) { console.log('hello ' + name); } sayHello({name: 'John'}); // hello John ``` 可以直接从对象中解构出参数。 15. generator函数： ```javascript function* generateHello() { yield 'hello'; } var gen = generateHello(); console.log(gen.next().value); // hello ``` generator函数可以用于创建迭代器，支持异步编程。 16. async/await： ```javascript async function sayHelloAsync() { await Promise.resolve().then(() => console.log('hello')); } sayHelloAsync(); ``` ES7引入的异步函数，使得异步操作更加直观。 17. module.exports/export导出： ```javascript // in module.js function sayHello() { console.log('hello'); } exports.sayHello = sayHello; // in main.js var module = require('./module'); module.sayHello(); ``` 在Node.js中，使用模块系统导出和导入函数。 18. class关键字： ```javascript class Action { sayHello() { console.log('hello'); } leave() { console.log('goodbye'); } } let action = new Action(); action.sayHello(); ``` ES6的类语法，提供了更面向对象的写法。 19. decorator装饰器： ```javascript function log(target, name, descriptor) { var originalMethod = descriptor.value; descriptor.value = function() { console.log(`Calling "${name}" with`, arguments); return originalMethod.apply(this, arguments); }; return descriptor; } class Action { @log sayHello() { console.log('hello'); } } let action = new Action(); action.sayHello(); // Calling "sayHello" with [] ``` 装饰器可以修改或增强对象、属性或方法的行为。 20. 模块导出默认方法： ```javascript // in module.js export default function sayHello() { console.log('hello'); } // in main.js import sayHello from './module'; sayHello(); ``` ES6模块系统中的默认导出，允许一次导入整个模块。 以上20种方式展示了JavaScript在创建和使用函数方面的灵活性和多样性，可以根据实际需求选择适合的方法。在编写JavaScript代码时，理解这些技巧将有助于写出更高效、可维护的代码。