箭头函数

简介: 认识箭头函数
  1. 认识箭头函数

es6 新增了使用胖箭头(=>)语法定义函数表达式的能力,很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方,都可以使用箭头函数:

// 普通函数
let sum = function(a, b) {
  return a + b;
}
// 箭头函数
let sum1 = (a, b) => {
  return a + b;
}

箭头函数简洁的语法对开发者来说是十分友好的,从上面的例子可以得知箭头函数的简单用法:
(参数) => { 函数体 }

  1. 箭头函数的一些用法

1.省略包含参数的小括号

如果只有一个参数,那也可以不用括号。只有没有参数,或者多个参数的情况下,才需要使用括号:

// 有效
let sum = (x) => {
  return x;
};
// 有效
let sum1 = x => {
  return x;
};
// 没有参数需要括号
let sum2 = () => {
  return 1;
};
// 有多个参数需要括号
let sum3 = (a, b) => {
  return a + b;
};

2.省略包含函数体的大括号

箭头函数也可以不用大括号,但这样会改变函数的行为。使用大括号就说明包含“函数体”,可以在一个函数中包含多条语句,跟常规的函数一样

  • 省略大括号箭头后面就只能有一行代码;
  • 省略大括号会隐式返回这行代码的值;
  • 省略大括号不能写return。

嵌入函数

箭头函数简洁的语法非常适合嵌入函数的场景:

let arr = [1, 2, 3, 4, 5];
arr.map(val => val * 2); // [2, 4, 6, 8, 10]
  1. 箭头函数不能使用arguments

如果函数是使用箭头语法定义的,那么传给函数的参数将不能使用 arguments 关键字访问:

// 普通函数
let sum = function() {
  return arguments.length;
}
sum(1, 2, 3); // 3
// 箭头函数
let sum1 = () => {
  return arguments.length;
}
sum1(1, 2); // Uncaught ReferenceError: arguments is not defined

虽然箭头函数中没有 arguments 对象,但可以在包装函数中把它提供给箭头函数:

function foo() {
  let bar = () => {
    console.log(arguments.length);
  }
  bar(); 
}
foo(5, 5, 5);  // 3
  1. 箭头函数中this 指向
let num = 11;
const obj1 = {
  num: 22,
  fn1: function() {
    let num = 33;
    const obj2 = {
      num: 44,
      fn2: () => {
        console.log(this.num);
      }
    }
    obj2.fn2();
  }
}
obj1.fn1(); // 22

fn2中得到的结果为:22

原因箭头函数没有this,箭头函数的this是继承父执行上下文里面的this ,这里箭头函数的执行上下文是函数fn1(),所以它就继承了fn1()的this,obj1调用的fn1,所以fn1的this指向obj1, 所以obj1.num 为 22。

如果fn1也是个箭头函数呢?

let num = 11; // 
const obj1 = {
  num: 22,
  fn1: () => {
    let num = 33;
    const obj2 = {
      num: 44,
      fn2: () => {
        console.log(this.num);
      }
    }
    obj2.fn2();
  }
}
obj1.fn1();

上述结果为undefined,因为fn1也是一个箭头函数,所以它就只能继续向上找也就是window了。

那为什么是undefined而不是11呢?

这里涉及到var和let声明变量的一个区别:使用 let 在全局作用域中声明的变量不会成为 window 对象的属性,var 声明的变量则会(不过,let 声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内存续,所以使用window访问会为undefined):

var a = 1;
window.a; // 1
let b = 1;
window.b; // undefined

将let改成var后:

var num = 11; // 
const obj1 = {
  num: 22,
  fn1: () => {
    let num = 33;
    const obj2 = {
      num: 44,
      fn2: () => {
        console.log(this.num);
      }
    }
    obj2.fn2();
  }
}
obj1.fn1();

此时结果为window.num => 11

目录
相关文章
|
6天前
|
XML 存储 JavaScript
loadXMLString() 函数
`loadXMLString()` 是一个JavaScript函数,用于在不同浏览器环境下解析XML字符串。它使用DOMParser在支持的浏览器中解析,而在IE中则使用ActiveXObject。函数接受XML文本作为参数,返回解析后的XML文档。此函数适用于HTML页面的<script>标签内,方便在页面中重用,尤其在处理XML实例时。
|
6天前
函数(三)
函数(三)
25 0
|
5月前
|
存储 程序员 C语言
函数(1)
函数(1)
54 0
|
8月前
MQTTClient_setCallbacks()函数
MQTTClient_setCallbacks()
502 0
|
9月前
|
监控 程序员 C语言
|
10月前
|
编译器
函函函函函函函函函函函数——two
函函函函函函函函函函函数——two
72 0
函函函函函函函函函函函数——two
|
11月前
基本初等函数 对数函数
基本初等函数 对数函数
56 0
|
自然语言处理 C++
C/C++ 中的 atol()、atoll() 和 atof() 函数
1.atol(): 此函数将作为参数传递给函数调用的 C 类型字符串转换为长整数。它解析 C 字符串 str 并将其内容解释为整数,该整数作为 long int 类型的值返回。该函数会丢弃字符串开头的空白字符,直到找到非空白字符。如果 C 字符串 str 中的非空白字符序列不是有效的整数,或者如果因为 str 为空或仅包含空白字符而不存在这样的序列,则不执行任何转换并返回零。
150 0
|
算法 编译器 C语言
函数部分的详细讲解
函数部分的详细讲解