箭头函数中的this:
重要特性:箭头函数没有this,所以this是定义的时候,外部所在的对象是他的this。调用的时候的this也没有arguments值;
当在函数中使用一个变量的时候,首先在本函数内部查找这个变量,如果找不到那就去找他的父级函数,依次往上推,最后到window对象,全局变量默认挂载是在window对象下的
console.log(this); let obj = { x: 100, //属性x show() { console.log(this); //延迟500毫秒,输出x的值 setTimeout(function () { console.log(this.x);//因为这里的setTimeout的this指向的是window对象,而在window中并没有找到x,所以返回undefined }, 500) } }; obj.show(); //undefined
如果是使用箭头函数的话就会改变this的指向
console.log(this); var obj = { x: 100, //属性x show() { //延迟500毫秒,输出x的值 setTimeout(() => { console.log(this); console.log(this.x); }, 500); }, }; obj.show(); //打印结果:100
当定义obj的show( )方法的时候,我们在箭头函数编写this.x,此时的this是指的obj,所以this.x指的是obj.x。而在show()被调用的时候,this依然指向的是被定义时候所指向的对象,也就是obj对象,故打印出:100。
注:箭头函数中的this指向的是定义时的this,而不是执行时的this
箭头函数中不绑定this,箭头函数中的this指向是它所定义的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁
箭头函数的优点在于解决了this执行环境所造成的一些问题。比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性),包括setTimeout和setInterval中使用this所造成的问题简化。
简化方法:
以前javascript写法
function sum(num1, num2) { return num1 + num2; }
ES6箭头函数写法
const sum =(num1,num2)=>{ return num1 + num2; }
更简化的方法
const sum = (num1, num2) => num1 + num2;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。