这是我参与更文挑战的第11天
之前在看Vue2.0的时候，就被很多的箭头函数困扰，一直不知道是怎么回事，虽然箭头函数四个字在我耳边一直转圈，是时候去记录一下啦。
1.ES5中函数的声明方式
console.log(sum(4,5)) // 9
function sum(x,y){
return x + y
}
let sum = function(x,y){
return x + y
}
console.log(sum(4,5)) // 9
复制代码代码备注：对于上面的两种方式，主要区别在于let关键字声明函数的时候，不存在变量提升的问题。
2.ES6中的箭头函数
主要就是把function去掉，在参数和函数体之间用箭头分割
let sum = (x,y) => {
return x+y
}
console.log(sum(3,4)) // 7
复制代码对于函数体只有一行代码的时候，上面代码可以简化为以下代码
let sum = (x,y) => x + y
复制代码对于返回值，可以省略return关键字并用圆括号扩起来
function addStr(str1,str2){
return str1+str2
}
const addStr = (str1,str2) => (str1+str2)
// 以上两个函数功能是一样的，只是箭头函数在箭头右侧，省略了关键字return，并且在外面添加圆括号
复制代码3.箭头函数和普通函数之间的区别
1.this指向定义时所属的对象，而不是调用时所属的对象(箭头函数中没有this,this指向的是父级的this)
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
console.log(this) // <button id="btn">点我</button>
})
</script>
</body>
</html>
复制代码<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(function(){
// call apply bind改变this指向
console.log(this) // Window
},1000)
})
</script>
</body>
</html>
复制代码通过bind改变this指向
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(function(){
console.log(this) // <button id="btn">点我</button>
}.bind(this),1000)
})
</script>
</body>
</html>
复制代码箭头函数中的this指向
<html>
<body>
<button id="btn">点我</button>
<script>
let oBtn = document.querySelector("#btn")
oBtn.addEventListener("click",function(){
setTimeout(() => { // **箭头函数中没有this**,this指向的是父级的this
console.log(this) // <button id="btn">点我</button>
},1000)
})
</script>
</body>
</html>
复制代码2.不可以作为构造函数
function People(name,age){
console.log(this) // People{}
this.name = name
this.age = age
}
let p1 = People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
let People = (name,age) => {
this.name = name
this.age = age
}
let p1 = People("lilei",34)
console.log(p1) // 报错 People is not a constrator
复制代码3.不可以使用arguments对象
let foo = function(){
console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments[1,2,3]
let foo = () => {
console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments is not defined
复制代码箭头函数兼容类似ES5中arguments对象：通过rest参数
let foo = (...args) => {
console.log(args)
}
console.log(foo(1,2,3)) // [1,2,3]
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
