JavaScript 学习-8.JavaScript 箭头函数的使用
前言
ES6 中引入了箭头函数() =>
。箭头函数不需要使用function关键字,允许我们编写更短的函数.
箭头函数
之前使用function 定义函数
fun1 = function() {return "Hello World!";
}
console.log(fun1()); // Hello World!
使用箭头函数() =>
格式
fun2 = () => {return "Hello World!";
}
console.log(fun2()); // Hello World!
只有一条语句
当只有一条语句的时候,并且该语句返回一个值,我们去掉大括号和 return
关键字
fun3 = () => "Hello World!";
console.log(fun3()); // Hello World!
或者也可以返回一个表达式
a = 'hello';
b = 'world!'
fun4 = () => a+b;
console.log(fun4()); // helloworld!
箭头函数传参
当需要传参数的时候,把参数放到圆括号
fun5 = (a, b) => a+b;
console.log(fun5('hello', 'world')); // helloworld
当只有一个参数的时候,圆括号也能省略
fun6 = x => x+'world';
console.log(fun6('hello')); // helloworld
参数带默认值
当参数带默认值的时候,调用函数可以不用传参
fun7 = (x='hello') => x+'world';
console.log(fun7()); // helloworld
console.log(fun7('yoyo')); // yoyoworld
this的使用
使用箭头函数没有对 this 的绑定。
在常规函数中,关键字 this 表示调用该函数的对象,可以是窗口、文档、按钮或其他任何东西。
对于常规函数,this 表示调用该函数的对象:
// 常规函数:
hello = function() {document.getElementById("demo").innerHTML += this;
}// window 对象调用该函数:
window.addEventListener("load", hello); // Window// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello); // HTMLButtonElement
用了箭头函数,则 this 表示函数的拥有者:
// 箭头函数:
hello = () => {document.getElementById("demo").innerHTML += this;
}// window 对象调用该函数:
window.addEventListener("load", hello); // Window// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello); //Window
对于箭头函数,this 关键字始终表示定义箭头函数的对象。
JavaScript 学习-8.JavaScript 箭头函数的使用相关推荐
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript">//继承第一种方式: ...
- 如何理解JavaScript多个连续箭头函数书写方式
导言: 本菜鸡在学习Vue编程的时候,看到有大佬写的代码用了多个连续箭头函数,完全不能理解是什么意思.经过多方调查和思考才初步理解.本篇文章记录一下自己学习和理解的心得. 有多个箭头函数的代码如何执行 ...
- JavaScript简餐——关于箭头函数
文章目录 前言 一.箭头函数 1.箭头函数定义 2.区别参数个数的不同写法 3.有无花括号的区别 4.箭头函数的限制 总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读 ...
- JavaScript 初学者必看“箭头函数”
译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 本文采用意 ...
- JavaScript 中的 “ => “ 箭头函数(上)
JavaScript (a)=> { b } 箭头函数 一.函数的定义语法有哪些? 1. 第一种,函数声明的方式定义 2. 第二种,函数表达式声明 3. 第三种," 箭头函数 &quo ...
- ES6学习笔记:箭头函数
lambda函数即匿名函数,在ES6发布之前,我们通常会这样写匿名函数 var selected = allJobs.filter(function (job) {return job.isSelec ...
- Javascript学习笔记:call()函数的使用
call()是一个对象可以继承.使用另一个对象的函数的方法,是一种拿来主义的办法.这个要和this来配合使用. var xyj = { name: '孙悟空', age: 1000, gender: ...
- 【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 1 var person = new Object(); 2 person.age = 23; 3 person.name = "David&q ...
- [JavaScript学习-01]JavaScript实现九宫格抽奖
效果: <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...
最新文章
- 三分钟基础:什么是拥塞控制?
- python sql 日期查询_Python--flask使用 SQLAlchemy查询数据库最近时间段或之前的数据...
- c# DirectoryInfo 类和 FileInfo 类
- mysql服务自动关闭的解决
- 登录drupal管理员_天气公司依靠Drupal来管理内容
- CSS 背景 background属性
- C语言课后习题(54)
- Java面向对象之构造方法模拟捕鱼达人游戏【附源码】
- 《我也能做CTO之程序员职业规划》之四:直线定律
- petshop架构分析
- webstorm软件使用汉化包
- android qq输入法,Android版QQ输入法:滑动输入成最大亮点
- 耗时86小时的「百变小樱」最强数据可视化作品!| 译文
- 服务器编程之路:进无止境(下)
- 手机pdf文件转语音_PDF文件怎么转EXCEL?教你一款超实用的迅捷PDF转换器
- 菜鸟日记(yzy):集成Ucrop裁剪图片架构,并创建管理类使用
- 基于rancheros离线安装Habor以及Rancher
- 【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(一)---基础页面框架搭建
- 520特辑 | 狗粮之下,没有一个程序员是无辜的...
- python实现BMI计算器