前言
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 表示调用该函数的对象,可以是窗口、文档、按钮或其他任何东西。
// 常规函数:
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数:
window.addEventListener("load", hello); // Window
// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello); // HTMLButtonElement
// 箭头函数:
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数:
window.addEventListener("load", hello); // Window
// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello); //Window