js中的this指向问题

总结下来，this的指向问题牢记一点：谁调用这个函数或方法,this关键字就指向谁

调用方式

所以，搞清楚在JS里面，函数的几种调用方式:

 

• 普通函数调用

• 作为方法来调用

• 作为构造函数来调用

• 使用apply/call/bind方法来调用

• es6箭头函数

一，普通函数调用

<script>
   var name = "window"
   function person(){
	   var name = "person"
        console.log(this.name);
    }
    person();  //输出  window
</script>

　person作为window的方法来调用，this指向调用者window，所以this.name = "window"


 

二，作为方法来调用

<script>
   var name = "window"
   var person = {
	    name:"person",
	    showName:function(){
		 console.log(this.name)	
		}
    }
   var person2 = {
	   name:"person2",
	   showName2:person.showName      
   }
   var showName3 = person.showName
   
    person.showName();  //输出  person
    person2.showName2(); //输出 person2  虽然showName方法是在person这个对象中定义，但是调用的时候却是在person2这个对象中调用，因此this指向person2
    showName3();         //输出 window   同理

</script>

　　

　　

三，作为构造函数来调用

构造函数与普通函数的区别就是，构造函数的目的是用来构造对象的，类似Java中的class ,构造对象的方式就是使用new 关键字 ，如何通过构造函数给对象添加属性？就是使用this关键字，所以构造函数中的this指向的是它实例化的对象

　　

//写一个构造函数
function person()｛
this.sex='female';
this.age=''20'
｝;
var xiaoming=new person();//js在执行到此条语句时，将this的引用指向了xiaoming
console.log(xiaoming.age),//执行结果 20

　

四，使用apply/call/bind方法来调用　

apply/call/bind方法能改变this关键字的指向，但还是谁调用this指向谁

参考我的另一篇：JS中call()和apply()以及bind()的区别

 

五，es6箭头函数

（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window

（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

<script>
   var name = "window"
   var person = {
        name:"person",
        showName:function(){
         console.log(this) 
            return ()=>{
                console.log(this.name)
            }
        }
    }
   
   var showName2 = person.showName()  //将showName中的this指向window，但return中的this在定义时已经固化，指向上下文对象person  
     showName2();                    //输出 person
</script>

　

问题：多个规则出现时，this最终指向哪里？

首先，new 的方式优先级最高，接下来是 bind 这些函数，然后是方法调用方式，最后是普通函数调用方式，同时，箭头函数的 this 一旦被绑定，就不会再被任何方式所改变。