js、vue、angular中的函数声明方式及特点

目录

一、原生 JavaScript 函数声明方式及特点

1. 函数声明式

2.函数表达式（匿名函数赋值给变量）

        语法：let functionName = function(param) {

        示例：

3.箭头函数（ES6引入）

 二、Vue 中的函数声明方式及特点（以组件内方法为例）

1、Vue2中函数声明： 

        1.1 方法定义在methods选项中

        1.2 计算属性（可以看作是一种特殊的函数）

2.vue3中函数声明

三、Angular 中的函数声明方式及特点（以组件内方法为例）

一、原生 JavaScript 函数声明方式及特点

1. 函数声明式

        语法：function functionName (param) {

                        // 函数体

                   }

        示例：

       function add(a, b) {
         return a + b;
       }

        特点：函数声明会被提升，这意味着可以在函数声明之前调用它。在编译阶段，JavaScript 引擎会先读取函数声明，并将其添加到执行环境中，使得函数在整个作用域内都可以被访问。这种方式使得代码结构更清晰，易于阅读和维护，适合定义一些具有明确功能的独立函数。

2.函数表达式（匿名函数赋值给变量）

        语法：let functionName = function(param) {

                        // 函数体

                   };

        示例：

       let subtract = function(a, b) {
         return a - b;
       };

        特点： 函数表达式不会被提升，必须在定义之后才能调用。这种方式更灵活，可以在运行时动态地创建函数，并且可以将函数作为参数传递给其他函数或者作为返回值返回。例如，在事件处理中经常使用函数表达式来定义回调函数。

3.箭头函数（ES6引入）

        语法：parameters) => { // 函数体 }，如果只有一个参数可以省略括号，函数体只有一行代码时可以省略花括号并自动返回表达式的值。

        示例：

       let multiply = (a, b) => a * b;

        特点：箭头函数没有自己的this，它会继承外层函数的this值。这使得在处理对象方法和回调函数时，可以避免this指向的问题。箭头函数的语法简洁，适用于简单的函数操作，尤其是在函数作为参数传递或者在数组方法（如map、filter等）中使用时非常方便。

 二、Vue 中的函数声明方式及特点（以组件内方法为例）

1、Vue2中函数声明： 

        1.1 方法定义在methods选项中

        语法：

       new Vue({
         el: '#app',
         data: {
           // 数据
         },
         methods: {
           functionName: function () {
             // 函数体
           }
         }
       });

        示例（简单的加法函数）：

       new Vue({
         el: '#app',
         data: {
           num1: 1,
           num2: 2
         },
         methods: {
           add: function () {
             return this.num1 + this.num2;
           }
         }
       });

        特点：在 Vue 组件中，方法定义在methods选项内。这些方法可以通过this关键字访问组件的数据（data选项中的数据）。方法主要用于处理组件的业务逻辑，如响应用户交互（点击按钮、输入框输入等）、数据计算等。Vue 会自动将这些方法绑定到组件实例上，并且在模板中可以通过@（缩写）或v - on指令来调用这些方法，如<button @click="add">加法</button>。这种方式使得视图和逻辑分离，提高了代码的可维护性。

        1.2 计算属性（可以看作是一种特殊的函数）

        语法：

  
         data: {
           // 数据
         },
         computed: {
           computedPropertyName: function () {
             // 函数体，通常是根据data中的数据进行计算
             return // 计算结果
           }
         }

        示例（计算两个数的乘积）：

         data: {
           num1: 3,
           num2: 4
         },
         computed: {
           product: function () {
             return this.num1 * this.num2;
           }
         }

        特点：计算属性是基于响应式数据的缓存函数。它会根据其依赖的数据（data中的数据或者其他计算属性）自动缓存计算结果。只有当依赖的数据发生变化时，才会重新计算。这使得在模板中多次使用计算属性时，性能更好，因为不需要每次都重新计算。在模板中，可以像使用普通数据一样使用计算属性，如{{ product }}。

2.vue3中函数声明

        在 Vue 3 的组合式 API 中，函数通常在一个单独的函数中定义，然后通过setup函数返回给组件使用。

        语法：

     import { defineComponent, ref } from 'vue';
     export default defineComponent({
       setup() {
         // 定义响应式数据
         const count = ref(0);
         // 定义函数
         const increment = () => {
           count.value++;
         };
         return {
           count,
           increment
         };
       }
     });

        特点：组合式 API 使得代码更加模块化和可维护，函数可以更好地组织和复用。在这个例子中，increment函数可以直接修改响应式数据count。并且，组合式 API 可以更好地与 TypeScript 结合，提高类型安全性。 

三、Angular 中的函数声明方式及特点（以组件内方法为例）

        在组件类中定义方法

        语法：

       import { Component } from '@angular/core';
       @Component({
         selector: 'app - my - component',
         templateUrl: './my - component.component.html',
         styleUrls: ['./my - component.component.css']
       })
       export class MyComponent {
         functionName() {
           // 函数体
         }
       }

        示例（简单的日志输出函数）：

       import { Component } from '@angular/core';
       @Component({
         selector: 'app - my - component',
         templateUrl: './my - component.component.html',
         styleUrls: ['./my - component.component.css']
       })
       export class MyComponent {
         logMessage() {
           console.log('这是一个Angular组件方法');
         }
       }

        特点：在 Angular 组件中，函数作为组件类的方法来定义。这些方法可以通过组件模板中的事件绑定（如(click)等）来调用，也可以在组件的其他方法中调用。Angular 是基于 TypeScript 开发的，函数的参数和返回值可以明确指定类型，这增强了代码的可读性和可维护性。并且，Angular 的依赖注入机制使得组件可以方便地获取和使用服务中的方法，将业务逻辑和组件逻辑分离，提高代码的可复用性。例如，可以在组件的构造函数中注入一个服务，然后在组件方法中调用服务的方法来获取数据或者执行其他操作。