前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 学习-8.JavaScript 箭头函数的使用

JavaScript 学习-8.JavaScript 箭头函数的使用

作者头像
上海-悠悠
发布2022-05-18 19:10:52
5400
发布2022-05-18 19:10:52
举报

前言

ES6 中引入了箭头函数() =>。箭头函数不需要使用function关键字,允许我们编写更短的函数.

箭头函数

之前使用function 定义函数

代码语言:javascript
复制
fun1 = function() {
  return "Hello World!";
}
console.log(fun1()); // Hello World!

使用箭头函数() =>格式

代码语言:javascript
复制
fun2 = () => {
  return "Hello World!";
}
console.log(fun2()); // Hello World!

只有一条语句

当只有一条语句的时候,并且该语句返回一个值,我们去掉大括号和 return 关键字

代码语言:javascript
复制
fun3 = () => "Hello World!";
console.log(fun3()); // Hello World!

或者也可以返回一个表达式

代码语言:javascript
复制
a = 'hello';
b = 'world!'
fun4 = () => a+b;
console.log(fun4()); // helloworld!

箭头函数传参

当需要传参数的时候,把参数放到圆括号

代码语言:javascript
复制
fun5 = (a, b) => a+b;
console.log(fun5('hello', 'world')); // helloworld

当只有一个参数的时候,圆括号也能省略

代码语言:javascript
复制
fun6 = x => x+'world';
console.log(fun6('hello')); // helloworld

参数带默认值

当参数带默认值的时候,调用函数可以不用传参

代码语言:javascript
复制
fun7 = (x='hello') => x+'world';
console.log(fun7()); // helloworld
console.log(fun7('yoyo')); // yoyoworld

this的使用

使用箭头函数没有对 this 的绑定。 在常规函数中,关键字 this 表示调用该函数的对象,可以是窗口、文档、按钮或其他任何东西。

对于常规函数,this 表示调用该函数的对象:

代码语言:javascript
复制
// 常规函数:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数:
window.addEventListener("load", hello);        // Window

// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);         // HTMLButtonElement

用了箭头函数,则 this 表示函数的拥有者:

代码语言:javascript
复制
// 箭头函数:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数:
window.addEventListener("load", hello);  // Window

// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);  //Window

对于箭头函数,this 关键字始终表示定义箭头函数的对象。

2022年第 11 期《python接口web自动化+测试开发》课程,6月5号开学!

2022年第 1 期《Python 测试平台开发》课程

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从零开始学自动化测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 箭头函数
  • 只有一条语句
  • 箭头函数传参
  • 参数带默认值
  • this的使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档