当前位置: 首页 > 开发者资讯

javascript中function用法有哪些?

  JavaScript 中 function 用于封装可复用代码,支持多种定义方式。function是定义一个函数的关键字,函数声明通过 function 关键字定义,存在提升。函数是执行代码块并可重复调用的对象,其用法主要包括以下几种形式,跟着小编一起详细了解下。

  javascript中function用法

  在 JavaScript 中,function 是定义可复用代码块的核心机制,其用法灵活多样。以下是主要用法及示例:

  1. 函数声明(Function Declaration)

  通过 function 关键字定义,存在函数提升。

  javascriptfunction greet(name) {return `Hello, ${name}!`;}console.log(greet("Alice")); // 输出: Hello, Alice!

  2. 函数表达式(Function Expression)

  将函数赋值给变量,无提升,需先定义后调用。

  javascriptconst greet = function(name) {return `Hello, ${name}!`;};console.log(greet("Bob")); // 输出: Hello, Bob!

  3. 箭头函数(Arrow Function)

  ES6 简化语法,无自己的 this 和 arguments。

  javascriptconst greet = (name) => `Hello, ${name}!`;console.log(greet("Charlie")); // 输出: Hello, Charlie!

  4. 构造函数(Constructor)

  通过 new 调用,创建函数对象。

  javascriptfunction Person(name) {this.name = name;}const alice = new Person("Alice");console.log(alice.name); // 输出: Alice

  5. 回调函数(Callback)

  将函数作为参数传递,处理异步操作。

  javascriptfunction fetchData(callback) {setTimeout(() => callback("Data loaded"), 1000);}fetchData((data) => console.log(data)); // 1秒后输出: Data loaded

javascript中function用法有哪些.jpg

  6. 高阶函数(Higher-Order Function)

  返回函数或接收函数作为参数。

  javascriptfunction createMultiplier(factor) {return (num) => num * factor;}const double = createMultiplier(2);console.log(double(5)); // 输出: 10

  7. 立即调用函数表达式(IIFE)

  定义后立即执行,避免污染全局作用域。

  javascript(function() {console.log("IIFE executed!");})(); // 输出: IIFE executed!

  8. 方法(Method)

  作为对象属性的函数。

  javascriptconst user = {name: "Alice",greet() {return `Hi, I'm ${this.name}`;}};console.log(user.greet()); // 输出: Hi, I'm Alice

  9. 生成器函数(Generator Function)

  通过 yield 暂停执行,返回迭代器。

  javascriptfunction* generateNumbers() {yield 1;yield 2;}const gen = generateNumbers();console.log(gen.next().value); // 输出: 1console.log(gen.next().value); // 输出: 2

  10. 异步函数(Async Function)

  使用 async/await 处理异步代码。

  javascriptasync function fetchData() {const response = await Promise.resolve("Async data");return response;}fetchData().then(console.log); // 输出: Async data

  关键注意事项

  this 绑定:普通函数动态绑定 this,箭头函数继承外层 this。

  参数处理:支持默认参数、剩余参数。

  提升行为:函数声明会提升,表达式不会。

  根据场景选择合适的方式,例如模块化开发推荐箭头函数或表达式,面向对象用方法,异步逻辑用 async/await。构造函数通过 new 调用,现代开发推荐用 class 替代。函数还支持默认参数、剩余参数和 arguments 对象,灵活处理参数。


猜你喜欢