Home Web Front-end JS Tutorial Important differences between named and anonymous arrow functions in Javascript (recommended)

Important differences between named and anonymous arrow functions in Javascript (recommended)

Feb 03, 2017 pm 01:57 PM

A named function refers to a function that explicitly gives a name, function abs(x){}. An anonymous function refers to a function that only has the keyword function and does not have a function name like abs, such as function(){}. The ES6 standard adds a new function: Arrow Function. Arrow functions are superficially equivalent to anonymous functions and simplify function definition. What is the difference between them?

1 The difference between named and anonymous functions

Difference: The anonymous function needs to assign the address to another variable let a, and then use a to call the function; while the named function needs to explicitly give The function name is included, so you can call it directly with this function name.

The return value of a named function is the return value in the function body. For example, the return value of the abs(x) function is the number variable. When calling a function, call abs(6) directly, which is very easy to understand.

1

2

3

4

5

6

7

function abs(x){

 if(x>=0){

  return x;

 }else{

  return -x;

 }

}

Copy after login

But what about anonymous functions? As shown below, the function does not explicitly give a function name, but abs here is assigned the address of this anonymous function, so you can use abs(-3) directly when using it, and so on.

1

2

3

4

5

6

7

let abs=function(x){

 if(x>=0){

  return x;

 }else{

  return -x;

 }

}

Copy after login

2 Arrow function

The ES6 standard adds a new function: Arrow Function. Why is it called Arrow Function? Because its definition uses an arrow. Arrow functions are superficially equivalent to anonymous functions and simplify function definition.

The arrow function has two formats. One is that it contains only one expression, even {...} and return are omitted.

1

x => x * x

Copy after login

The above arrow function is equivalent to an anonymous function ""

1

2

3

function (x) {

 return x * x;

}

Copy after login

There is also a type that can contain multiple statements, which cannot be used at this time Omit {…} and return:

1

2

3

4

5

6

7

8

(x,y) => {

 if (x > 0) {

  return x + y;

 }

 else {

  return -x + y;

 }

}

Copy after login

3 The difference between arrow functions and anonymous functions

The arrow function seems to be a shorthand for an anonymous function, but in fact, There is an obvious difference between arrow functions and anonymous functions: this inside the arrow function is the lexical scope, determined by the context.

Will calling function obj1.getAge(2017) and calling obj2.getAge(2017) get the same result?

The fn function in obj1 cannot get the expected result due to the incorrect handling of this binding by the JavaScript function. This.birth points to window or undefined.

But obj2 and fn functions are arrow functions. The arrow function completely repairs the pointing of this. This always points to the lexical scope, which is the outer caller obj2.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var obj1 = {

 birth: 1990,

 getAge: function (year) {

  let fn=function(y){

   return y - this.birth; // this指向window或undefined

  };

  return fn(year);

 }

};

var obj2 = {

 birth: 1990,

 getAge: function (year) {

  var fn = (y) => y - this.birth; // this.birth为1990

  return fn(year);

 }

};

Copy after login

4 Summary

Compared with named functions, anonymous functions need to assign the address to another variable let a, and then use a to call the function; compared with anonymous functions, arrow functions completely fix the pointing of this, which always points to the lexical scope.

The above is the important difference between named anonymous arrow functions in Javascript introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. !

For more important differences between named and anonymous arrow functions in Javascript (recommended), please pay attention to the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot tools Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

jQuery Check if Date is Valid jQuery Check if Date is Valid Mar 01, 2025 am 08:51 AM

jQuery Check if Date is Valid

jQuery get element padding/margin jQuery get element padding/margin Mar 01, 2025 am 08:53 AM

jQuery get element padding/margin

Top 5 Date Manipulation JS Plugins Top 5 Date Manipulation JS Plugins Feb 28, 2025 am 12:34 AM

Top 5 Date Manipulation JS Plugins

10 Worth Checking Out jQuery Plugins 10 Worth Checking Out jQuery Plugins Mar 01, 2025 am 01:29 AM

10 Worth Checking Out jQuery Plugins

10 jQuery Accordions Tabs 10 jQuery Accordions Tabs Mar 01, 2025 am 01:34 AM

10 jQuery Accordions Tabs

jquery add scrollbar to div jquery add scrollbar to div Mar 01, 2025 am 01:30 AM

jquery add scrollbar to div

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

See all articles