箭头函数允许我们编写更短的函数:
语法
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>
//20
用之前:
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
var hello;
hello = function () {
return "Hello World";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
//Hello World
用了箭头函数之后:
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
var hello;
hello = () => {
return "Hello World"
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
//Hello World
确实变短了!如果函数只有一个语句,并且该语句返回一个值,则可以去掉括号和 return
关键字:
箭头函数默认返回值
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
var hello;
hello = () => {
return "Hello World"
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
//Hello World
注释:这仅在函数只有一条语句时才有效。
如果您有参数,则将它们传递到括号内:
带参数的箭头函数:
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
var hello;
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Rose");
</script>
</body>
</html>
//Hello Rose
事实上,如果只有一个参数,您也可以略过括号:
不带括号的箭头函数
<!DOCTYPE html>
<html lang="en">
<body>
<P id="demo"></P>
<script>
var hello;
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Rose");
</script>
</body>
</html>
//Hello Rose
this
怎么办?
与常规函数相比,箭头函数对 this
的处理也有所不同。
简而言之,使用箭头函数没有对 this
的绑定。
在常规函数中,关键字 this
表示调用该函数的对象,可以是窗口、文档、按钮或其他任何东西。
对于箭头函数,this
关键字始终表示定义箭头函数的对象。
让我们看两个例子来理解其中的差异。
这两个例子都调用了两次方法,第一次是在页面加载时,第二次是在用户单击按钮时。
第一个例子使用常规函数,第二个例子使用箭头函数。
结果显示第一个例子返回两个不同的对象(window 和 button),第二个例子返回两次 window 对象,因为 window 对象是函数的“所有者”。
实例
对于常规函数,this 表示调用该函数的对象
<!DOCTYPE html>
<html lang="en">
<body>
<button id="btn">点击我</button>
<P id="demo"></P>
<script>
var hello;
hello = function () {
document.getElementById("demo").innerHTML += this;
}
//window 对象调用函数
window.addEventListener("load", hello);
//button 对象调用函数
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
点击前:
点击后:
实例
用了箭头函数,则 this
表示函数的拥有者:
<!DOCTYPE html>
<html lang="en">
<body>
<button id="btn">点击我</button>
<P id="demo"></P>
<script>
var hello;
hello =()=>{
document .getElementById("demo").innerHTML+=this;
}
window.addEventListener("load",hello);
document.getElementById("btn").addEventListener("click",hello)
</script>
</body>
</html>
点击前:
点击后: