[面试专题]ES6之箭头函数详解

2024年1月28日 145次阅读 来源: 逺方小鎭

ES6之箭头函数

标签（空格分隔）： 未分类

返回值

  • 单行函数体默认返回改行计算结果, 多行需要指定返回值

let c = (a,b)=>a+b;
console.log(c(1,12));

ES5
"use strict";
var c = function c(a, b) {
  return a + b;
};
console.log(c(1, 12));
let c = (a,b)=>{a = a+b;a--}
console.log(c(1,12));//undefined

let c = (a,b)=>{a = a+b;return a--};

  • 返回对象时写法(否则报错)

let c = (a,b)=>({a:a});
or
let d = (a,b)=>{return {a:a}}

this指向

  • 绑定外层函数this(简化一个常见用法,_this = this)

在箭头函数出现之前，每个新定义的函数都有其自己的 this 值（例如，构造函数的 this 指向了一个新的对象；严格模式下的函数的 this 值为 undefined；如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象）。//MDN

ES5

function Person(age) {
    var _this = this;
    this.age = age;
    setTimeout(function growUp() {
        console.log(this);
        _this.age++;
    }, 1000);
}
var p = new Person(26);

ES6

function Person(age) {
    this.age = age;
    setTimeout(()=> {
        console.log(this);
        this.age++;
    }, 1000);
    console.log(this.age);
}
var p = new Person(26);

  • 使用 call 或 apply 调用

由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响.

arguments

箭头函数不会在其内部暴露出参数（arguments )： arguments.length, arguments[0], 等等，都不会指向箭头函数的 arguments，而是指向了箭头函数所在作用域的一个名为 arguments 的值（如果有的话，否则，就是 undefined。——译者注）。

这种情况下,ES6 rest参数可以替代

function foo(n) { 
  var f = (...args) =>  args[0]+args.length; 
  return f(n); 
}

foo(1); // 1
    原文作者：逺方小鎭
    原文地址: https://segmentfault.com/a/1190000010914119
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞