关于javascript:JavaScript的箭头函数与普通函数区别

一、什么是箭头函数？

箭头函数用更简洁的形式，来实现一般函数的性能，然而不具备一般函数领有的属性：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();

六、参考链接：

• JavaScript 的箭头函数与一般函数区别？