es6-箭头函数

最新推荐文章于 2022-09-18 13:15:11 发布

光明和真理

最新推荐文章于 2022-09-18 13:15:11 发布

阅读量159

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/qq_35810310/article/details/88714280

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础语法

(参数1, 参数2, …, 参数N) => { 函数声明 }
 
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

高级语法

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

作用

作用：更简短的函数并且不绑定this

不绑定this

在箭头函数出现之前，每个新定义的函数都有它自己的this值（构造函数的情况下是一个新对象，在严格模式的函数调用中为undefined,如果该函数作为“对象方法”调用则为基础对象等）

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

方法一：将this值分配给封闭的变量，解决this问题

 var that = this;
 that.age = 0;

 setInterval(function growUp() {
   //  回调引用的是`that`变量, 其值是预期的对象. 
   that.age++;
 }, 1000);
}

方法二：创建绑定函数，以便将预先分配的this值传递到绑定的目标函数

var module = {
  x: 42,
  getX: function () {
    return this.x
  }
}

var unboundGetX = module.getX
console.log(unboundGetX()) // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = unboundGetX.bind(module)
console.log(boundGetX())
// expected output: 42

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，下面的代码中，传递给setInterval的函数内的this与封闭函数中的this相同

function Person(){
this.age =0;
setInterval(()=>{
this.age++;
},1000)
}
var p = new Person()

与严格模式的关系

鉴于this是词法层面上的，严格模式中与this相关的规则都将被忽略。
严格模式的其他规则依然不变

通过call或apply调用

由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this—译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立—译者注）

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）

不绑定arguments,箭头函数不绑定Arguments对象

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) { 
  var f = (...args) => args[0]; 
  return f(arg); 
}
foo(1); // 1

function foo(arg1,arg2) { 
    var f = (...args) => args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2

2.像函数一样使用箭头函数
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3.new操作符，箭头函数不能用作构造器，和new一起用会抛出错误

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

4.箭头函数没有prototype属性

var Foo = () => {};
console.log(Foo.prototype); // undefined

5.yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

函数体

箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

返回对象字面量

记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

所以，记得用圆括号把对象字面量包起来：

var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

解析顺序

虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

callback = callback || function() {}; // ok

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

callback = callback || (() => {});    // ok