JavaScript 中的 this 究竟指向谁,箭头函数的 this 有什么不同 痛定思痛。 2022-05-25 23:19 154阅读 0赞 **1、普通函数** 先说说普通函数中的this,各式各样的情况下判断this的指向,可以说是非常刁钻了。判断的时候,只要记住【 this 永远指向调用它的对象,new的时候,指向new出来的对象。】这句话就够了。 看几个例子: //例1 var obj = { name: 'latency', sayName: function(){ console.log('name:',this.name); } } obj.sayName() //name: latency 例1这个例子很好理解,sayName() 方法是 obj 调用的,所以其中的this指向obj。 //例2 var name = 'cheng'; var obj = { name: 'latency', sayName: function(){ return function(){ console.log('name:',this.name); } } } obj.sayName()() //name: cheng 在例2中,打印出来对的this.name不是obj的name,而是window对象的name属性。这是因为sayName()函数中有个闭包,闭包中的this指向调用这个闭包的对象,也就是window对象,写成下面这样可能更好理解: var fun = obj.sayName(); fun() //name: cheng fun()方法是window对象调用的,其this指向window对象 接下来看一个复杂一点的例子: //例3 var fun = function (a){ this.a = a; return function(b){ console.log('a+b:', this.a + b); } }((function(a,b){return a})(1,2)) fun(3) //a+b: 4 在例3中,首先要明确fun是什么,仔细看代码第7行,我们发现这里有一个立即执行的函数,它的参数也是一个立即执行的函数。 (function(a,b)\{return a\})(1,2) 执行的结果是1,然后再来看看这个立即执行函数: var fun = function (a){ //a = 1 this.a = a; //this.a = 1, 由于立即执行,这里的this指向window,也就是window.a = 1 return function(b){ console.log('a+b:', this.a + b); } }(1) 所以fun实际上是这个立即执行函数的结果,也就是说: var fun = function(b){ console.log('a+b:', this.a + b); } 执行fun(3)时,this依然指向window,window.a + b = 1 + 3 = 4 以上是普通函数中的this,下面来看箭头函数中的this。 **2、箭头函数** 对于箭头函数的this,也只需要记住一句话【箭头函数没有自己的 this,当在内部使用了 this时,它会指向最近一层作用域内的 this】 上例子,可以把例2改成箭头函数,让它的表现符合我们的预期 //例4 var obj = { name: 'latency', sayName: function(){ return () => { console.log('name:', this.name); } } } obj.sayName()() //name: latency 在例4中,return的是一个箭头函数,没有把this绑定到自己的内部,使用this时,指向的是上一层的obj。 //例5 var name = 'cheng'; function delay(){ setTimeout(function(){ console.log('name:', this.name); }, 100) } function arrowDelay(){ setTimeout(() => { console.log('name:', this.name); }, 100) } delay.call({name: 'latency'}) //name: cheng arrowDelay.call({name: 'latency'}) //name: latency 这个例子就可以很清楚的看出箭头函数和普通函数中this的区别。 根据上面两个例子,我们可以总结出,在函数中需要使用闭包的时候,用箭头函数就很方便了,不需要像以前一样使用hack,类似 var context = this; 接下来把例1改成箭头函数来实现,看看结果: //例6 var name = 'cheng'; var obj = { name: 'latency', sayName: () => { console.log('name:', this.name) } } obj.sayName() //name: cheng 由于sayName()整个函数就是一个箭头函数,没有自己的this,所以this指向的最近一层作用域内的this,也就是window对象。这种情况下,就不适合用箭头函数来实现了。 再看一个例子 //例7 var obj = { name: 'latency', sayName: function(){ return () => { return () => { return () => { console.log("name:", this.name); }; }; }; } } obj.sayName()()()() //name: latency 这个例子可以更好地帮助我们理解【箭头函数没有自己的 this,当在内部使用了 this时,它会指向最近一层作用域内的 this】这句话。这个例子定义了三个箭头函数,它们都没有绑定this到自己的内部,或者说没有改变this的指向,所以this始终指向obj。
还没有评论,来说两句吧...