九、ES6的箭头函数
生活随笔
收集整理的這篇文章主要介紹了
九、ES6的箭头函数
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、箭頭函數(shù)的基本使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// 箭頭函數(shù)：也是一種定義函數(shù)的方式// 1.定義函數(shù)的方式：functionconst aaa =function () {}// 2.對象字面量中定義函數(shù)const obj = {bbb: function () {},/*bbb() {}*/}// 3.ES6中的箭頭函數(shù)/*const ccc =(參數(shù)列表) => {}*/const ccc =() => {} </script> </body> </html>二、箭頭函數(shù)的參數(shù)和返回值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// 1.參數(shù)問題：// 1.1 放入兩個參數(shù)const sum = (num1, num2) => {return num1 + num2}// 1.2 放入一個參數(shù)/*const power = (num) => {return num * num}*/const power = num => {return num * num}// 2.函數(shù)中的// 2.1 函數(shù)代碼塊中有多行代碼塊時const test = () => {// 1.打印Hello Worldconsole.log('Hello World');// 2.打印Hello Vue.jsconsole.log('Hello Vue.js');}// 2.2 函數(shù)代碼塊中只有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>三、箭頭函數(shù)中this的使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>// 什么時候使用箭頭函數(shù)/*setTimeout(function () {console.log(this)}, 1000)setTimeout(() => {console.log(this)}, 1000)*/// 問題：箭頭函數(shù)中的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>總結(jié)
以上是生活随笔為你收集整理的九、ES6的箭头函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web框架——Flask系列之Flask
- 下一篇： 论文阅读 - Joint Beat an