标签：简洁 函数 作用域 箭头 window let name
文章目录
箭头函数是ES6中新增的使用胖箭头(=>)定义函数的方法
箭头函数省略了关键字function
箭头函数的声明和调用
<script type="text/javascript">
let fun1 = function(a,b){
return a + b
};
//箭头函数的声明
let fun2 = (a,b) => {
return a + b
};
//箭头函数的调用
let result = fun2(1,2)//3
</script>
箭头函数使用中的注意事项
-
箭头函数中的this始终指向的是函数声明时所在作用域下的this，也就是说this是静态的
-
使用场景：箭头函数适合与this无关的回调，定时器以及数组的方法回调
-
示例代码一
window.name = "window"
let obj = {
name:"Penrose",
getName:() =>{
//此时的this指向的是window作用域下的this
console.log(this.name);
}
};
obj.getName()//输出的是window
- 示例代码二
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="demo"></div>
<script type="text/javascript">
//需求：点击div后，2s后背景变为purple
let div = document.querySelector(".demo");
div.addEventListener("click",function(){
setTimeout(()=>{
//这个箭头函数中的this指向的是此箭头函数声明时所在的作用域下的this
//即this指向在监听器下的作用域的this，而监听器中的this指向的就是事件源
this.style.backgroundColor = "purple";
},2000)
})
</script>
</body>
</html>
- 不能作为构造函数实例化对象
<script type="text/javascript">
let Person = (name,age) =>{
this.name = name;
this.age = age;
};
let p = new Person("Penrose",22)
//错误信息
//Uncaught TypeError: Person is not a constructor
</script>
- 不能使用arguments属性
<script type="text/javascript">
let fn = () =>{
console.log(arguments)
}
fn(1,2,3)
//错误信息
//arguments is not defined
</script>
- 箭头函数的缩写：
- 有且仅有一个形参时可以省略小括号
- 有且仅有一行代码时可以省略花括号，并且需要省略return
标签：简洁,函数,作用域,箭头,window,let,name 来源： https://blog.csdn.net/qq_44875230/article/details/122833267
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。