当前位置: 首页 > news >正文

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指向的问题。箭头函数的语法简洁,适用于简单的函数操作,尤其是在函数作为参数传递或者在数组方法(如mapfilter等)中使用时非常方便。

 二、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 的依赖注入机制使得组件可以方便地获取和使用服务中的方法,将业务逻辑和组件逻辑分离,提高代码的可复用性。例如,可以在组件的构造函数中注入一个服务,然后在组件方法中调用服务的方法来获取数据或者执行其他操作。


http://www.mrgr.cn/news/63166.html

相关文章:

  • 机器学习算法之回归算法
  • 探索Python安全字符串处理的奥秘:MarkupSafe库揭秘
  • 【UBuntu20 配置usb网卡】 记录Ubuntu20配置usb网卡(特别是建立热点)
  • MySQL MHA 的部署
  • 项目里MongodbTemplate用法
  • 【论文分享】是时候挑战15分钟城市了:可持续发展、公平性、宜居和空间分析的七个缺陷
  • JVM性能优化实战手册:从监控到调优策略
  • Vatee万腾平台:让企业数字化转型更轻松、更高效
  • 博客搭建之路:hexo博客显示阅读时间和字数
  • lanqiaoOJ 315:寻找3个数的最大乘积
  • 构建安全的用户登录API:从请求验证到JWT令牌生成
  • 呼吁中兴向全国免费开放专利许可,支持国产创新,你支持吗?
  • VS2022 远程调式
  • Strongly Connected City
  • FlinkCDC-MYSQL批量写入
  • 第三百零七节 Log4j教程 - Log4j日志格式、Log4j日志到文件
  • Android开发教程viewpager2点击指示标也能切换
  • (C#面向初学者的 .NET 的生成 AI) 第 2 部分-什么是 AI 和 ML?
  • 解读!中国人工智能大模型技术白皮书!
  • 基于SSM医药进出口交易系统的设计
  • 大语言模型(LLMs)在安全芯片设计中应用
  • Ubuntu 系统、Docker配置、Docker的常用软件配置(下)
  • Vite构建生产配置“build:prod“: “cross-env NODE_ENV=production vite build“含义
  • 「C/C++」C/C++标准库 之 <cstring> 字符串操作库
  • 【css】CSS 文本溢出显示省略号
  • Ubuntu最简单安装OpenCV