【JS】箭头函数this指向问题 箭头函数与普通函数的区别
// 箭头函数是没有函数体，this也不会指向本身
//箭头函数不会new来创建构造函数的实例，它没有重复使用的构造能力，不能用new关键字来调用箭头函数，因此也不需要 构造原型了，不会自动生成prototype属性
//箭头函数是函数表达式，而且是匿名的，所以不能为箭头函数命名
<!-- 普通函数 function(){} 箭头函数()=>{} -->
<script>
//普通函数可以是函数表达式，也可以是函数声明
let arry=["a","b","c"]
let arryAdd=arry.map(function(item){
return item+='字母'
})
//箭头函数是函数表达式，而且是匿名的，所以不能为箭头函数命名
1 // let arryAdd=arry.map(item=>item+='字母')
// console.log(arryAdd); //["a字母"，"b字母"，"c字母"]
2 function normal(){
return arguments.length //arguments类似数组的对象
// 给函数传入参数的时候就可以像数组一样调用数组的元素或则属性
}
console.log("今天"+normal(1,2,3)+"碗饭"); //今天3碗饭
let arrow=()=> arguments.length; //没有arguments，所以显示未定义
// 程序不会给箭头函数创建arguments对象，匿名函数一般都是不用参数或则限定函数来执行
console.log(arrow(1,2,3));
3 . // function normal(){
// return ()=>arguments.length;
// }
// let arrow=normal(1,2,3);
// console.log("今天"+arrow()+"碗饭"); //今天3碗饭
<body>
<p class="normal"></p>
<p class="orrowP"></p>
<script>
const normaLP=document.querySelector(".normal");
const arowP=document.querySelector(".orrowP")
4. // let normaL={
// bibi:'bibi',
// biubiu:function(){
// setTimeout(function(){
// normaLP.innerHTML="普通函数:"+this.bibi;
// },10)
// }
// }
// this.bibi原本是想获取normaL对象的bibi这个属性,this在普通函数里面是动态的
//回调函数导致丢失this绑定的现象，当执行斩的任务执行完毕以后才会执行回调函数
// 回调函数就相当于在全局对象里面执行，也就是指向window,而window并没有定义bibi这个属性，所以
// 未定义
// normaL.biubiu() //undefined
5. // let arrow={
// bibi:'bibi',
// biubiu:function(){
// setTimeout(()=>{
// arowP.innerHTML="箭头函数:"+this.bibi;},10)
// }
// }
//箭头函数是被一个普通函数给包住，this会绑定到最近一层普通函数的this
// 也就是这个this会绑定到arrow对象，如果没有函数包住，这个this会指向全局，
// arrow.biubiu() //biubiu
6. // let icecrenom={
// nome:'牛',
// flavour:["羊","猪","马","驴","狗"],
// adding:function(){
// this.flavour.map(function(item){ //这个this指向adding
// normaLP.innerHTML+=item+this.nome+"";
// });
// }
// }
// icecrenom.adding() //这里的this.nome指向全局window
//羊undefined猪undefined马undefined驴undefined狗undefined
// 要想this.nome明确指向，需要强行改变this的指向，一般就要用call,apply或则bind三个方法
7. let icecrenom={
nome:'牛',
flavour:["羊","猪","马","驴","狗"],
adding:function(){
this.flavour.map(function(item){ //这个this指向adding
normaLP.innerHTML+=item+this.nome+"";
}.bind(this)); //这里用bind()，好处是bind可以改变this，但不自动执行函数
}
}
icecrenom.adding() //羊牛猪牛马牛驴牛狗牛
8. // 如果用箭头函数就是直接指向了
let icecrenom={
nome:'牛',
flavour:["羊","猪","马","驴","狗"],
adding:function(){
// this.nome外面有函数包裹，因此this直接指向外部函数的this值
//箭头函数不能通过call,apply或则bind三个方法来改变this的值
this.flavour.map(item=>normaLP.innerHTML+=item+this.nome+"" );
}
}
icecrenom.adding() //羊牛猪牛马牛驴牛狗牛
</script>
</body>
以上是 【JS】箭头函数this指向问题 箭头函数与普通函数的区别 的全部内容， 来源链接： utcz.com/a/68433.html
