JavaScript箭头函数与普通函数的区别?

更新日期: 2021-11-26阅读: 907标签: 函数

一、什么是箭头函数

箭头函数用更简洁的方式,来完成普通函数的功能,但是不具备普通函数拥有的属性: this、 arguments、 super、 new.target,有两种表达形式:

1、(...args) => expression

args表示参数有0个、1个、多个;expression表示一个js表达式,只有一行代码

2、 (...args) => { body }

args表示参数有0、1、多个;body表示有多行代码,最后一行必须是 return语句。


二、不同表达形式:

1、参数不同,写法不同
// 1、没有参数
let test = () => alert("Hello!");

// 2、只有一个参数:() 可以省略
let test = n => n * 2;
let test = (n) => n * 2;

// 等价于下面普通函数
let test = function (n) {
    return expression;
};
2、表达式不同,写法不同
// 1、只有一行 return 表达式,可省略 return 和 {}
let func = (arg1, arg2, ...argN) => {
  return expression;
}
// 等价于下面箭头函数
let func = (arg1, arg2, ...argN) => expression

// 等价于下面普通函数。
let func = function (arg1, arg2, ...argN) {
    return expression;
};
3、用于条件运算符
let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
    () => alert('Hello') :
    () => alert("Greetings!");

welcome();
4、用于数组遍历
var elements = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
];

// 1、普通函数写法:
elements.map(function (element) {
    return element.length;
});

// 2、箭头函数写法:
elements.map((element) => {
    return element.length;
});

// 3、只有一个参数,可省略()
elements.map(element => {
    return element.length;
});

// 4、表达式只有一行return语句,可省略  return  和 {}
elements.map(element => element.length);

// 5、参数解构方式
// elements数组中每一项都有length属性,可以通过参数解构获得结果,方法如下:
// 注意:lengthFooBArX只是一个变量,可以替换成任意合法变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX);

// 以上输出结果都为: [8, 6, 7, 9]
5、用于递归
var fact = (x) => (x == 0 ? 1 : x * fact(x - 1));
fact(5);

// 输出:120
6、使用闭包
// 1、箭头函数体的闭包( i=0 是默认参数)
var Add = (i = 0) => {
    return (() => (++i))
};
var v = Add();
v();           //1
v();           //2

// 因为仅有一个返回,return 及括号()也可以省略
var Add = (i = 0) => () => (++i);
7、其他形式举例
// 1、空的箭头函数返回 undefined
let empty = () => { };

// 2、立即执行函数表达式,返回 "foobar"
(() => 'foobar')();

// 3、更简明的promise链
promise.then(a => {
    // ...
}).then(b => {
    // ...
});

// 4、无参数箭头函数在视觉上容易分析
setTimeout(() => {
    console.log('I happen sooner');
    setTimeout(() => {
        // deeper code
        console.log('I happen later');
    }, 1);
}, 1);

三、重要特性

1、没有 arguments
// 1、普通函数中的arguments正确使用:
function foo(n) {
    // 隐式绑定 foo函数的参数 与 arguments对象. 
    // arguments[0] 表示传给foo函数的第一个参数,也就是n
    var f = () => arguments[0] + n;
    return f();
}
foo(1); // 2
foo(3); // 6
foo(3, 2);//6

// 2、箭头函数中无法使用arguments
// ReferenceError: arguments is not defined
var func = (a, b) => {
    return arguments[0];
}
2、没有prototype属性
var Foo = () => {};
console.log(Foo.prototype); // undefined
3、不能使用new

箭头函数没有this,不能用作构造函数,也就无法使用 new

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

四、需要()的场景

1、对象作为表达式

用 ()包裹 {}表示的对象来作为表达式返回,否则 {}会作为表达式来解析,出现语法错误。

// Calling func() returns undefined!
var func = () => { foo: 1 };
// SyntaxError: function statement requires a name
var func = () => { foo: function() { } };

// 正确写法如下:
var func = () => ({ foo: 1 });
var func = () => ({ foo: function () { } });
2、换行
// 1、语法错误:SyntaxError: expected expression, got '=>'
var func = ()
            => 1;

// 2、正确,可以在 => 后换行
var func = (a, b, c) =>
    1;
// 3、正确,用 () 来换行
var func = (a, b, c) => (
    1
);

// 4、正确,用 () 来换行
var func = (
    a,
    b,
    c
) => 1;
3、作为单独表达式
let callback;

// 1、正确
callback = callback || function () { };

// 2、错误:SyntaxError: invalid arrow-function arguments
callback = callback || () => { };

// 3、正确
callback = callback || (() => { });    // ok

五、箭头函数没有this

普通函数、对象方法中的this,都是在运行时定义。

  • 普通函数的this 等于 undefined,无法调用;
  • 对象方法的this,指向对象本身。
  • 箭头函数,不会定义自己的this,它只会继承自己上一层作用域的this。

1、对象中的箭头函数
var obj = {
    i: 10,
    b: () => console.log(this.i, this),
    c: function () {
        console.log(this.i, this)
    }
}
obj.b();
// 输出结果:undefined, Window{...}
// 箭头函数b,没有上层作用域可以继承this,也就无法访问。

obj.c();
// 输出结果:10, Object {...}
2、正确使用箭头函数中的this
// 实例1:
function Person() {
    this.age = 0;

    // 箭头函数作为 setInterval 的一个参数,继承了 this
    setInterval(() => {
        this.age++;
        console.log("age:", this.age);
    }, 1000);
}

var p = new Person();
// 实例2:
// 箭头函数 student 继承了 showList 的 this
let group = {
    title: "Our Group",
    students: ["John", "Pete", "Alice"],

    showList() {
        this.students.forEach(
            student => alert(this.title + ': ' + student)
        );
    }
};

group.showList();
3、普通函数无法访问this
# 普通函数中 this 等于 undefined ,所用 this.title 必然因为无法识别而报错
let group = {
    title: "Our Group",
    students: ["John", "Pete", "Alice"],

    showList() {
        this.students.forEach(function (student) {
            // Error: Cannot read property 'title' of undefined
            alert(this.title + ': ' + student)
        });
    }
};

group.showList();
原文:https://learn-anything.cn/java-script-arrow-functions


链接: https://fly63.com/article/detial/10871

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!