JavaScript|箭头函数的用法

简介: JavaScript|箭头函数的用法

问题描述

JavaScript ES6标准新增了比较重要的一种新的函数:Arrow Function(箭头函数),但大多数人都不能很好的了解箭头函数的用法,也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数。

解决方案

1 箭头函数的写法

() => {}

//举例

x => x*2 //x的返回值变成x*2的值

箭头函数定义包括一个参数列表,函数体放在最后。

箭头函数有两种格式,一种只包含一个表达式,就如上面的举例,你会发现它没有return,因为在箭头函数中,只要一个表达式,并且省略了包围的 { } 的话,就意味着表达式前面有一个隐含的 return。另一种格式就是,当箭头函数包含多条语句,这个时候{ }和return 就不能省略,例如:

x => {

      if (x>0){

          return x*x

      }else{

         return x

      }

而当有多个参数就要用()将参数括起来:

(x,y) => {

      if (x>0){

          return x*y

      }else{

         return x+y

      }

2 箭头函数this的指向

箭头函数总是函数表达式;并不存在箭头函数声明。同时箭头函数看上去是匿名函数(它们没有用于递归或者事件绑定 / 解绑定的命名引用)的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。例如:

var ming = {

     birth: 1999,

     getAge: function () {

         var b = this.birth; // 1999

         var a = () => new Date().getFullYear() - this.birth; // this指向ming对象

         return a();

     }

};

ming.getAge();//

结果:

如上例子,箭头函数中this总是指向语法作用域,也就是此处的外部调用者xiaoming对象,故而此处ming.getAge()的返回值为21。

也就是说,使用箭头函数,就不需要以前的那种hack写法了:

var that = this;

由于this在箭头函数中已经按照词法作用域绑定了,所以用call()或者apply()调用函数的时候,无法对this 进行绑定,即传入的第一个参数被忽略。例如:

var ming = {

     birth: 1999,

     getAge: function (year) {

         var b = this.birth; // 1999

         var a = (y) => y - this.birth; // this.birth仍是1999

         return a.call({birth:2000}, year);

     }

};

ming.getAge(2020);//21

结果:

3 箭头函数与function()函数的区别

通过上面对于箭头函数的讲解就可以发现虽然有时候可以将function()函数变为箭头函数,但两者还是有很大的区别的:

a.箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象;

b.箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误;

c.箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替;

d.不可以使用yield命令,因此箭头函数不能用作Generator函数;

结语

箭头函数中this的指向十分的重要,需要注意,有时候为了节约时间,可以使用箭头函数代替function()函数,在使用的时候一定要注意箭头函数本身没有this,它的this是根据上下文指向语法作用域的,所以小编在此建议,如果你还想用this,就最好不要用使用箭头函数的写法哦。



目录
相关文章
|
19天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
29天前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
27 0
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
21 9
JavaScript基础知识-函数的返回值
|
3天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
16 4
JavaScript基础知识-函数的参数
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-立即执行函数
关于JavaScript基础知识中立即执行函数的介绍。
16 2
JavaScript基础知识-立即执行函数
|
16天前
|
JavaScript 前端开发
JavaScript 函数
JavaScript 函数
22 9
|
17天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
21 6
|
13天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1
|
25天前
|
缓存 JavaScript 前端开发
react.js高级用法
【8月更文挑战第27天】react.js高级用法
29 2