JavaScript中的this指向

首先，this是JavaScript语言中的一个关键字。解析器在调用函数时每次都会向浏览器传递进一个隐含的参数，这个隐含参数，就是this。
this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式不同，this会指向不同的对象！！！

相信很多JavaScript战线的朋友在讨论this指向时都会说的一句话就是：哪里调用的函数，this就指向哪里。

确实，这一句话非常言简意赅，但是偏偏就是太过简单导致有些刚接触的朋友有些不知所云，下面我会不同情况不同分析。

1.全局上下文

console.log(this); //window

'use strict';
console.log(this); //undefined

对于全局上下文，this的指向分为两种，一种是你在使用严格模式（‘use strict’）时this指向undefined，一种是非严格模式时this指向window对象。

 

2.隐式绑定

var obj={

   myName:"熏悟空",

   sayName:function(){

      console.log(this.myName)  

   }

}

var say=obj.sayName;

obj.sayName(); //熏悟空

say(); //undefined，因为此时函数的调用的位置是全局上下文，因此this按照是否严格模式的规则存在两种情况，一种指向window，一种指向undefined,

　　　　//但是不论是window还是undefined都没有对应的name属性，因此为undefined

 

3.显示绑定（利用call,apply,bind方法进行修改作用域）

var obj={
    myName:"熏悟空",
}
function say(){
     console.log(this.myName)
}
say(); //undefined 此时调用的方法属于全局作用域，而全局作用域中不存在myName属性，因此为undefined
say.call(obj); //熏悟空 因为此时say函数内部作用域已经不是全局作用域，而是被call方法绑定过来的obj对象

具体call，apply，bind方法怎么用，有什么区别请看我后面的文章，此处不做衍生。

4.构造函数绑定

function Hou(){
   this.myName="熏悟空"
}
var hou1=new Hou();  //此时构造函数触发，将this强制改变为新创建的实例对象obj，是JavaScript的语法规则，不需要理解
console.log(hou1.myName);  //熏悟空

5.事件绑定（行内绑定，动态绑定，事件监听）

a.行内绑定：this指向window

<input class="name" onclick="changeName">
<script>
    function changeName(){
        console.log(this);
    }
    //因为运行在全局上下文中，所以this指向window
</script>

b.动态绑定：this指向元素本身

<input class="name">
<script>
    var doc=document.getElementsByClassName('name')[0];
    doc.onclick=function(){
        console.log(this);
    }
    //此处的this指向该元素节点本身
</script> 

c.事件监听与动态绑定一致，不做赘述。