【摘要】 本文是对自己学习ES6的学习笔记回顾,后面是概要: 本文探讨了ES6中箭头函数的特点和使用。箭头函数简化了函数声明。关键特性是它们不绑定自己的this，而是继承自定义时的上下文。文中通过代码示例阐释了this指向问题，并展示了在实际开发中如何通过打印this来理解其指向。本文通过一个HTML页面的点击事件示例，演示了如何使用箭头函数处理事件和this的指向问题，强调了在不同上下文中this的不同
原创声明:文章首发地址:https://bbs.huaweicloud.com/blogs/431971,本文是由本作者在华为云社区的首发后搬运而来,不存在抄袭.箭头函数
个人比较喜欢在代码中写注释,因此后续的代码和知识点中,很多解释会在代码中以注释的方式存在
使用箭头函数的需要知道的基础知识
//需要知道的基础知识
let fun1 = function(){
} //普通的函数声明
let fun2 = ()=>{
} //箭头函数的声明 lambda
let fun3 = (x)=>{
return x+1}
let fun4 = x =>{
return x+1} // 参数列表中有且仅有一个参数,()可以省略不写
let fun5 = x =>console.log(x) //参数列表中 只有一行代码{}可以省略不写
let fun6 = x => x+1 //方法体中,有且只有一行代码,代码是return返回的结果
箭头函数的this指向问题,箭头函数没有自己的this,箭头函数的this指向的是定义时的this,而不是调用时的this 而箭头函数中的this是外层上下文环境中的this
具体继续往下看,会用代码和示例来进行展示:
console.log(this) //window
let person = {
name:'张三',
showName:function(){
console.log(this.name) //张三
},
VieName:()=>{
console.log(this) //window
}
}
person.showName() //张三
person.VieName() //window
通过箭头函数练习理解箭头函数的使用
通过下面的练习来对es6在箭头函数中的使用进解释:其实想要理解和使用其中的箭头函数,记住在es6中箭头函数的this指的不是调用当前函数时的对象,而是上下文中的this,也就是上一层对象,如果无法判断当前this的话,可以跟下面的练习中的做法一样,可以在使用前打印(显示)一下this对象,然后在进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数练习</title>
<style>
/* 其中这部分是对下面div标签部分进行样式 */
#xdd{
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="xdd"></div>
<script>
//谨记箭头函数中的this是外层上下文环境中的this
var xdd = document.getElementById("xdd");
xdd.onclick = function(){
console.log(xdd);
console.log(this); //xdd
//进行参数转换
let _this = this; //将this(xdd)变为变量
//直接使用this,其中this代表当前对象
//如果需要使用this代表外层对象,需要做参数转换
window.setTimeout(function(){
console.log(this); //window
console.log(_this); //xdd
// this.style.backgroundColor = "yellow";
_this.style.backgroundColor = "yellow";
},2000);
//箭头函数使用this,this代表上下文的对象(window的上一层是xdd)
window.setTimeout(()=>{
console.log(this); //xdd
this.style.backgroundColor = "blue";
},4000);
}
</script>
</body>
</html>
