什么是箭头函数:
主要因为旧js总是写function,太繁琐!ES6推出专门简化所有function的新的定义函数的语法
箭头函数要怎么使用
- 去掉function,在()和{}之间加上=>
//普通函数
function fun(val){console.log(1)}
//改成箭头函数
var fun=(val)=>{console.log(1)} //去掉function,在()和{}之间加上=>
- 如果只有一个形参变量,则可以省略(),但是如果没有形参时,不能省略()
//匿名函数自调
(function(){
console.log(`我是匿名函数自调!`)
})();
//改成箭头函数
(() => console.log(`我是匿名函数自调!`))();
- 如果函数体只有一句话,可省略{},和结尾的; 如果仅有的一句话还是return,则必须省略return!
<script>
var str = "you can you up";
str = str.replace(/\b[a-z]/g,function(kw){
return kw.toUpperCase()
})
//改成箭头函数时 函数主体一句话函数体只有一句话,可省略{};return必须去掉
str = str.replace(/\b[a-z]/g, kw => kw.toUpperCase());
console.log(str);
</script>
箭头函数极大了提高我们的开发效率。一开始接触ES6的箭头函数可高兴坏了,再也不用写function这个单词,刷 ~刷 ~,整个项目全都是用箭头函数写,但是这个箭头函数好用是好用,但是它也是有坑的。看看这个坑在哪?
来看下面代码
<script>
var lilei = {
sname: "lilei",
sage: "29",
friend: ["博特", "福特斯", "口技"],
intr: function () {
this.friend.forEach(
function (val) {
console.log(`${this.sname}认识${val}`);
}.bind(this)
);
},
};
lilei.intr();
</script>
看看输出结果
那我们想把function去掉使用箭头函数,我们来试着改一下
<script>
var lilei = {
sname: "lilei",
sage: "29",
friend: ["博特", "福特斯", "口技"],
intr: () => {//由于这里也没有了墙,下面所有的this都指向了window
this.friend.forEach(
(val) => { //这堵墙没了这里的this就指向了上面的this
//这里使用了箭头函数就不用使用bind方法来定义下面的this了
console.log(`${this.sname}认识${val}`);
});
},
};
lilei.intr();
</script>
再来看看输出结果
什么?竟然报错了为什么会报错呢?因为function这样写就好比一堵墙,有这堵墙函数里面的this就会指向lilei。如果没有了function,而使用了箭头函数,那这堵墙就不存在,函数里面的this直接指向了window,由于window全局下没有friend变量,foreach无法遍历,所以会报错。真的是这样吗?我们来验证一下!
<script>
var friend = ["李白", "马超", "韩信"]; //在全局添加了friend数组
var sname = "xiaoming"; //在全局添加了sname
var lilei = {
sname: "lilei",
sage: "29",
friend: ["博特", "福特斯", "口技"],
intr: () => { //由于这里也没有了墙,下面所有的this都指向了window
this.friend.forEach(
(val) => { //这堵墙没了这里的this就指向了上面的this
//这里使用了箭头函数就不用使用bind方法来定义下面的this了
console.log(`${this.sname}认识${val}`);
});
},
};
lilei.intr();
</script>
再来看输出结果
还真的是指向了全局变量了,这就说明箭头函数也是有小脾气的,不是所有请况都能用箭头函数的,那在什么情况下适合用箭头函数呢?
- 希望函数中的this与外部函数的this一致(像上面代替bind),或函数根本就没有涉及this时,就可以随意使用箭头函数
- 如果函数的this刚好不想与外部的this一致时,就不能使用箭头函数了
另外箭头函数不支持arguments
正确做法:看下面改的代码
<script>
var lilei = {
sname: "lilei",
sage: "29",
friend: ["博特", "福特斯", "口技"],
intr(){ //ES6新规定,:function 可写可不写 这里的this就指向了lilei这个对象
this.friend.forEach((val) => {//希望下面的this和外面的函数的this一致,就可以使用箭头函数
console.log(`${this.sname}认识${val}`);
});
},
};
lilei.intr();
</script>
现在知道怎么用好箭头函数啦~~~~~~~
如果说得不好,请多多谅解~谢谢
东哥笔记