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