九、ES6的箭头函数

一、箭头函数的基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 箭头函数：也是一种定义函数的方式// 1.定义函数的方式：functionconst aaa =function () {}// 2.对象字面量中定义函数const obj = {bbb: function () {},/*bbb() {}*/}// 3.ES6中的箭头函数/*const ccc =(参数列表) => {}*/const ccc =() => {}
</script>
</body>
</html>

二、箭头函数的参数和返回值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 1.参数问题：// 1.1 放入两个参数const sum = (num1, num2) => {return num1 + num2}// 1.2 放入一个参数/*const power = (num) => {return num * num}*/const power = num => {return num * num}// 2.函数中的// 2.1 函数代码块中有多行代码块时const test = () => {// 1.打印Hello Worldconsole.log('Hello World');// 2.打印Hello Vue.jsconsole.log('Hello Vue.js');}// 2.2 函数代码块中只有1行代码块时/*const mul = (num1, num2) => {return num1 * num2}*/const mul = (num1, num2) =>  num1 * num2console.log(mul(20, 30));/*const demo = () => {console.log('Hello Demo');}*/const demo = () => console.log('Hello Demo');console.log(demo());</script>
</body>
</html>

三、箭头函数中this的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 什么时候使用箭头函数/*setTimeout(function () {console.log(this)}, 1000)setTimeout(() => {console.log(this)}, 1000)*/// 问题：箭头函数中的this是如何查找的？// 答案：向外层作用域中，一层层查找this,知道有this的定义/*const obj = {aaa() {setTimeout(function () {console.log(this) // window}, 1000)setTimeout(() => {console.log(this) // obj对象}, 1000)}}*/const obj = {aaa() {setTimeout(function () {setTimeout(function () {console.log(this) // window})setTimeout(() => {console.log(this) // window})})setTimeout(() => {setTimeout(function () {console.log(this) // window})setTimeout(() => {console.log(this) // obj})})}}obj.aaa()
</script>
</body>
</html>

九、ES6的箭头函数相关推荐

button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...
相信很多小伙伴自从知道了ES6的箭头函数以后,都疯狂得使用,渐渐的淡忘了普通函数的使用.不过确实,箭头函数看起来比较简洁,用起来也舒服,不过它的出现是为了解决某一部分问题的,并不是用来替代普通函数的, ...
ES6语法---箭头函数/关于this指向
this指向问题: ES5:var obj = {x:1,func:function(){console.log(this.x);},test:function(){//定时器为异步setTimeou ...
ES6中箭头函数解释
箭头函数任何可以书写匿名函数的位置,都可以书写箭头函数箭头函数将会绑定this为函数书写位置的this值模块化(nodejs带来的模块化) 没有模块化的世界:全局变量污染,难以管理常见的模块化 ...
es6语法-箭头函数
箭头函数创建箭头函数.html 箭头函数提供了一种更加简洁的函数书写方式.基本语法是: 参数 => 函数体 // 传统 var f1 = function(a){return a } con ...
[译]深入ES6之箭头函数
原作者:江凌箭头一族缺少的家庭成员在JavaScript出现以来,箭头(Arrow)就一直是其语法的一部分.一般来说,JavaScript教程的第一篇就会讲如何在HTML中插入箭头括号来作为注释, ...
深入ES6：箭头函数
箭头从一开始就一直是JavaScript的一部分.第一个JavaScript教程建议在HTML注释中包装内联脚本.这会阻止不支持JS的浏览器错误地将JS代码显示为文本.你会写这样的东西: <sc ...
es6语法箭头函数
一.语法形式: (参数1, 参数2, -, 参数N) => { 函数声明 }(参数1, 参数2, -, 参数N) => 表达式(单一) // 相当于:(参数1, 参数2, -, 参数N) ...
JS ES6中的箭头函数（Arrow Functions）使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法基础语法 (参数1, 参数2, -, ...
ES6 箭头函数理解
你看懂"箭头函数"了么? 时间 2016-10-24 20:30:00 梁桂钊的博客原文 http://blog.720ui.com/2016/es6_arrow_fun ...

九、ES6的箭头函数

一、箭头函数的基本使用

二、箭头函数的参数和返回值

三、箭头函数中this的使用

九、ES6的箭头函数相关推荐

最新文章

热门文章