ES6 中引入了箭头函数。
箭头函数允许我们编写更短的函数语法:
let myFunction = (a, b) => a * b;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>
hello = function() {
return "Hello World!";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
hello = () => {
return "Hello World!";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
越来越短了!如果函数只有一条语句,并且该语句 返回一个值,你可以去掉括号和 返回
关键字:
hello = () => "Hello World!";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function without the brackets or the return keyword.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
注意:仅当函数只有一个时才有效 陈述。
如果有参数,则将它们传递到括号内:
hello = (val) => "Hello " + val;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
事实上,如果只有一个参数,也可以跳过括号:
hello = val => "Hello " + val;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
这个
怎么样?与常规函数相比,箭头函数中 this
的处理也有所不同 功能。
简而言之,对于箭头函数,没有绑定 这个
。
在常规函数中, this
关键字表示调用 函数,可以是窗口、文档、按钮或其他任何东西。
对于箭头函数,this
关键字always 代表 反对 定义了箭头函数。
让我们看两个例子来理解其中的区别。
这两个示例都调用一个方法两次,第一次是在页面加载时,第二次是 当用户单击按钮时。
第一个示例使用常规函数,第二个示例使用 箭头函数。
结果显示第一个示例返回两个不同的对象(窗口和按钮), 和 第二个示例返回窗口对象两次,因为窗口对象是 函数的“所有者”。
对于常规函数 this
表示 调用函数的对象:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>
<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
使用箭头函数 this
表示 函数的所有者:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>
<p>Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
使用函数时请记住这些差异。有时, 常规函数的行为是您想要的,如果不是,请使用箭头函数。
下表定义了完全支持的第一个浏览器版本 JavaScript 中的箭头函数:
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |