JavaScript Function函数类型介绍

在 JavaScript 中，函数是一等公民，是最为重要的组成部分之一。JavaScript 函数可以分为函数声明、函数表达式、箭头函数、构造函数等多种类型。本文将结合示例为大家介绍 JavaScript 中常见的函数类型及使用场景。

函数声明

函数声明是一种创建函数的常见方式，它以关键字 function 开头，后跟函数名称、参数列表和函数体。它具有函数提升特性，可以在函数定义之前进行调用。

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

函数表达式

函数表达式是另一种创建函数的方式，它将函数作为一个值赋给变量、数组等容器。函数表达式不具有函数提升特性，需要在使用之前进行定义。

const sum = function(a, b) {
  return a + b;
};

箭头函数

箭头函数是 ES6 引入的新类型函数，它可以更简洁地定义函数。箭头函数使用的是 => 符号来定义函数，它没有自己的 this，其 this 值继承了定义它的父级作用域的 this 值。

const sum = (a, b) => a + b;

构造函数

构造函数是一种特殊的函数类型，它可以通过 new 关键字创建出一个新的对象。构造函数通过 this 关键字引用它创建出的对象本身。通常，构造函数的名称以大写字母开头，用来区分普通函数。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const jack = new Person('Jack', 20);

示例说明

示例一：计算数组元素的和

下面的示例演示如何通过函数表达式来计算数组元素的和。

const nums = [1, 2, 3, 4, 5];

const sum = function(arr) {
  let s = 0;
  for (let i = 0; i < arr.length; i++) {
    s += arr[i];
  }
  return s;
};

const result = sum(nums);
console.log(result); // 15

示例二：读取页面元素

下面的示例演示如何使用构造函数来读取页面中的元素。

<body>
  <div id="btn">按钮</div>
</body>

function Element(elementId) {
  this.element = document.getElementById(elementId);
  this.on = function(eventType, fn) {
    this.element.addEventListener(eventType, fn);
  };
}

const btn = new Element('btn');
btn.on('click', function() {
  alert('按钮被点击了');
});

以上就是 JavaScript 中常见的函数类型介绍，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript Function函数类型介绍 - Python技术站