js函数中的this

特殊对象this
    一、标准函数中，this引用的是把函数当成方法调用的上下文对象

1. window.color = 'red';
3. let o={
4.       color:'blue'   
6. }
8. function sayColor(){
10.         console.log(this.color);
12. }
13. sayColor();   // red
15. o.sayColor=sayColor;
17. o.sayColor();  //blue<br>

复制代码

 
 
     定义在全局上下文中的函数sayColor()引用了this对象。这个this到底引用了哪个对象必须到函数被调用时才能确定。因此这个值在函数执行过程中可能会变。如果在全局上下文中调用sayColor(),结果输出red, 因为this指向window,而this.color相当于window..color.而再把sayColor()赋值给o之后，在调用o.sayColor(); this会指向o,即this.color相当于o.color,所以会显示blue
 
     二、箭头函数中，this引用的是定义箭头函数的上下文

 

1. window.color = 'red';
3. let o={
4.       color:'blue'   
6. }
8. function sayColor=()=>{
10.         console.log(this.color);
12. }
13. sayColor();   // red
15. o.sayColor=sayColor;
17. o.sayColor();  //red

复制代码

 
 
 
    在对sayColor()的两次调用中，this引用的都是window对象，因为这个箭头函数是在window上下文中定义的

    
     三、在事件回调或定时回调中调用某个函数，this值指向的并非想要的对象。此时可以将回调函数写成箭头函数就可以解决问题

1. function king(){
2.       this.royaltyName='henry';
4.      setTimeout(
5.        ()=>{
6.                console.log(this.royaltyName,1000);
7.       })
8. }
10. function queen(){
11.       this.royaltyName='elizabeth';
13.      setTimeout(
14.        function(){
15.               console.log(this.royaltyName,1000);
16.       })
17. }<br>new King();// henry<br>new Queen();//undefined

复制代码

            因为箭头函数中的this会保留定义该函数时的上下文

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！