【ECMAScript 5_6_7】6、ES6——箭头函数
程序员文章站
2022-06-15 18:49:59
一、箭头函数* 作用: 定义匿名函数* 基本语法: * 没有参数: () => console.log('xxxx') * 一个参数: i => i+2 * 大于一个参数: (i,j) => i+j * 函数体不用大括号: 默认返回结果 * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回* 使用场景: 多用来定义回调函数......
一、箭头函数
* 作用: 定义匿名函数 * 基本语法: * 没有参数: () => console.log('xxxx') * 一个参数: i => i+2 * 大于一个参数: (i,j) => i+j * 函数体不用大括号: 默认返回结果 * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回 * 使用场景: 多用来定义回调函数 * 箭头函数的特点： 1、简洁 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this 3、扩展理解： 箭头函数的this看外层的是否有函数， 如果有，外层函数的this就是内部箭头函数的this， 如果没有，则this是window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_箭头函数</title>
</head>
<body>
<button id="btn1">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>
<button id="btn3">测试箭头函数this_3</button>
<button id="btn4">测试箭头函数this_4</button>
<script type="text/javascript">
/* ES5写法：
let fun = function () {
console.log('fun()')
}
fun()
*/
/* ES6箭头函数写法：
let fun = () => console.log('fun()')
fun()
*/
// 按左边形参情况分类：
//1.没有形参
let fun1 = () => console.log('fun1()')
fun1()
//2.只有一个形参的时候：()可以省略
let fun2 = a => console.log('fun2()')
fun2()
//2.两个及两个以上的形参的时候：()不可以省略
let fun3 = (x,y) => console.log(x + y)
fun3(10,20)
// 按右边函数体情况分类：
//1.函数体只有一条语句或表达式的时候：{}可以省略，会自动返回语句执行的结果或者是表达式的结果（加了{}，则需要return返回）
let fun4 = (x,y) => x+y
console.log(fun4(100,200))
/*let fun4 = (x,y) => {
return x+y
}
console.log(fun5(100,200))*/
//2.函数体有两条及以上的语句或表达式的时候：{}不可以省略
let fun5 = (x,y) => {
console.log(x,y)
return x + y
}
console.log(fun5(1000,2000))
//箭头函数的特点：没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
let btn3 = document.getElementById('btn3')
let btn4 = document.getElementById('btn4')
btn1.onclick = function () {
alert(this) // 正常函数内this指向调用他的函数，这里是HTMLButtonElement
}
btn2.onclick = () => {
alert(this) // 箭头函数this指向处在的对象，这里看外层是否有函数，没有就是window
}
let obj = {
setClick:function () {
btn3.onclick = () => {
alert(this) // 箭头函数的this看外层的是否有函数，这里有，内部箭头函数的this等于外层函数的this指向调用它的obj
}
}
}
obj.setClick()
let obj1 = {
setClick: () => {
btn4.onclick = () => {
alert(this) // 箭头函数的this看外层的是否有函数，这里没有，内部箭头函数的this则指向window
}
}
}
obj1.setClick()
function Person() {
this.obj = {
showThis : () => {
console.log(this); // Person{}
}
}
}
let fun6 = new Person();
fun6.obj.showThis();
</script>
</body>
</html>
本文地址：https://blog.csdn.net/edc3001/article/details/85962949