JavaScript中的函数申明、函数表达式、箭头函数

在 JavaScript 中,函数定义有三种方式:函数声明、函数表达式和箭头函数。

函数声明

函数声明是定义一个函数的常见方式,语法如下:

function add(x, y) {
  return x + y;
}

其中 add 是函数名,xy 是参数,return 关键字用于返回计算结果。

函数声明有一个重要的特点,就是函数可以在声明之前被调用(也就是函数声明提升)。例如:

console.log(add(2, 3)); // 5

function add(x, y) {
  return x + y;
}

函数表达式

函数表达式是另一种定义函数的方式,语法如下:

const add = function(x, y) {
  return x + y;
};

其中 add 是变量名,也就是函数的名称,function(x, y) 是函数体,可以指定零个或多个参数。

函数表达式有一个关键的区别就是不能在声明之前被调用。例如:

console.log(add(2, 3)); // error

const add = function(x, y) {
  return x + y;
};

箭头函数

箭头函数是 ES6 新加入的语法,语法如下:

const add = (x, y) => {
  return x + y;
};

其中 (x, y) 是参数列表,可以指定零个或多个参数,=> 是箭头符号,表示函数体开始,{} 表示函数体,可以包含零条或多条语句。

如果函数体只包含一条语句,可以省略 {},并且可以省略 return,例如:

const add = (x, y) => x + y;

箭头函数还有一个特点,就是函数的 this 指向是固定的,指向定义时的上下文。例如:

const person = {
  name: '张三',
  sayHi: function() {
    setTimeout(() => {
      console.log(`我是${this.name}`);
    }, 1000);
  }
};

person.sayHi(); // 1秒后输出 "我是张三"

在上面的代码中,箭头函数中的 this 指向的就是定义时的上下文 person,而不是 setTimeout 函数。这种特性使得箭头函数和 this 的使用更加方便。

示例说明

  1. 函数声明示例:
// 函数声明
console.log(add(2, 3)); // 5

function add(x, y) {
  return x + y;
}

在上面的代码中,我使用函数声明的方式定义了一个名为 add 的函数,然后在调用函数之前直接调用了 add(2, 3),结果是 5。这是因为函数声明具有声明提前的特性,可以在声明之前被调用。

  1. 箭头函数示例:
// 箭头函数
const person = {
  name: '张三',
  sayHi: function() {
    setTimeout(() => {
      console.log(`我是${this.name}`);
    }, 1000);
  }
};

person.sayHi(); // 1秒后输出 "我是张三"

在上面的代码中,我定义了一个名为 person 的对象,其中包含一个名为 sayHi 的方法。在这个方法中,我使用箭头函数定义了一个计时器,并且在计时器的回调函数中输出了当前对象的 name 属性。由于箭头函数中的 this 指向的是定义时的上下文 person,因此在调用方法时,输出的结果是定时器回调函数中的 this.name,也就是 "我是张三"

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中的函数申明、函数表达式、箭头函数 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 详解JavaScript实现哈希表

    详解JavaScript实现哈希表 什么是哈希表 哈希表是一种常见的数据结构,它可以提供快速的插入、查找和删除操作,其时间复杂度为 O(1) 。 哈希表的主要思想是将数据元素经过哈希(hash)函数的映射后,存储到一个数组中。哈希函数 将插入的元素映射到一个数组下标上,这个下标对应的元素就是这个元素所对应的值。在查找时,再使用同样的哈希函数,得到元素所对应的…

    JavaScript 2023年5月18日
    00
  • JavaScript中的偏函数你理解了吗

    首先,偏函数涉及的概念有: 函数的柯里化:将接受多个参数的函数转化为接受单一参数(最初函数的第一个参数)的函数。例如,一个函数add(x,y,z),柯里化后可得到add(x)(y)(z)的格式。 偏函数:将某个函数的一部分参数固定下来,生成一个新的函数,该新函数的参数比原函数少。 在 JavaScript 中,利用柯里化的思想可以轻松实现偏函数。 下面是关于…

    JavaScript 2023年5月27日
    00
  • JS点击某个图标或按钮弹出文件选择框的实现代码

    要在JS中点击某个图标或按钮弹出文件选择框,需要使用<input type=”file”>标签。这个标签会创建一个文件选择框,用户可以浏览文件并选择其中之一。 第一种示例 以下是使用HTML和JS实现这一功能的示例代码: <!DOCTYPE html> <html> <head> <title>文件…

    JavaScript 2023年5月27日
    00
  • javascript输入CD-KEY自动分割的代码

    针对“javascript输入CD-KEY自动分割的代码”,我将分为以下几个方面进行详细讲解: 实现思路:解释实现这一功能的具体步骤和思路; 代码示例1:提供一个完整的javascript代码示例,体现如何实现CD-KEY的自动分割; 代码示例2:提供另外一个完整的javascript代码示例,体现如何根据自定义规则对CD-KEY进行分割。 实现思路:在实现…

    JavaScript 2023年6月11日
    00
  • 关于JAVASCRIPT urldecode URL解码的问题

    关于JavaScript中的URL解码,我们来一步步了解一下。 什么是URL解码 在浏览器中输入一个网址,比如http://www.example.com/query?key=JavaScript%20%E5%AD%A6%E4%B9%A0%E5%A4%A7%E5%85%A8,浏览器发送请求时,会将URL中的中文和特殊字符进行编码,以保证数据的安全性和正确性。…

    JavaScript 2023年5月19日
    00
  • 深入理解JavaScript中的对象复制(Object Clone)

    深入理解JavaScript中的对象复制(Object Clone) 在JavaScript中,对象复制通常分为两类:浅拷贝和深拷贝。浅拷贝只是在复制对象的值时简单地复制了内存地址,而深拷贝则是创建一个新的对象,并将原对象的所有属性和方法复制到新对象中。本文将详细讲解JavaScript中对象的深拷贝实现方法。 简单的对象复制 首先,我们来创建一个简单的Ja…

    JavaScript 2023年5月27日
    00
  • JS面向对象编程基础篇(一) 对象和构造函数实例详解

    那么让我们来详细讲解一下“JS面向对象编程基础篇(一) 对象和构造函数实例详解”的完整攻略。 什么是对象和构造函数 对象是 JavaScript 中一种复合数据类型,由属性和方法组成,用于存储和操作数据。可以通过对象字面量或构造函数来创建。 构造函数是创建对象的一种特殊方式。它是一种函数,当用 new 关键字调用时,它将返回一个新的对象,并通过原型继承关联到…

    JavaScript 2023年6月10日
    00
  • JS 中在严格模式下 this 的指向问题

    JS 中的 this 表示函数执行时所在的上下文对象,在不同的情况下,this 指向的对象是不同的,这是 JS 中一个比较重要,也比较复杂的概念。 在严格模式下,this 指向的对象与非严格模式下不同。下面我们通过两个示例来详细讲解在严格模式下 this 的指向问题。 示例一 ‘use strict’; function showThis() { conso…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部