this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。
this使用到的情况：

1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定

1. 纯函数

var name = 'this is window';  //定义window的name属性

function getName(){

       console.log(this);    //控制台输出: Window  //this指向的是全局对象--window对象

       console.log(this.name);  //控制台输出: this is window  /

}

getName();

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到

var testObj = {

    name:'this is testObj',

    getName:function(){

        console.log(this);  //控制台输出:testObj   //this指向的是testObj对象

        console.log(this.name);  //控制台输出: this is testObj

    }

}

testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3.  使用new调用构造函数

function getObj(){

    console.log(this);    //控制台输出: getObj{}  //this指向的新创建的getObj对象

}

new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

var name = "this is window";  //定义window的name属性,看this.name是否会调用到

var testObj = {

    name : "this is testObj",

    getName:function(){

        //var self = this;   //临时保存this对象

        var handle = function(){

            console.log(this);   //控制台输出: Window  //this指向的是全局对象--window对象

            console.log(this.name);  //控制台输出: this is window

            //console.log(self);  //这样可以获取到的this即指向testObj对象

        }

        handle();

    }

}

testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

5. 使用call / apply

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到

var testObj1 = {

    name : 'this is testObj1',

    getName:function(){

        console.log(this);   //控制台输出: testObj2  //this指向的是testObj2对象

        console.log(this.name);  //控制台输出: this is testObj2

    }

} 

var testObj2 = {

    name: 'this is testObj2'

} 

testObj1.getName.apply(testObj2);

testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：
[1] call( thisArg [，arg1，arg2，… ] );  // 第2个参数使用参数列表：arg1，arg2，... 
[2] apply(thisArg [，argArray] );     //第2个参数使用 参数数组：argArray
运行结果分析：使用call / apply  的函数里面的this指向绑定的对象。

6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

//页面Element上进行绑定

  <script type="text/javascript">

     function btClick(){

        console.log(this);  //控制台输出: Window  //this指向的是全局对象--window对象

    }

  </script>

  <body>

    <button id="btn" onclick="btClick();" >点击</button>

  </body>

//js中绑定方式（1）

  <body>

    <button id="btn">点击</button>

  </body>

  <script type="text/javascript">

     function btClick(){

        console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象

     } 

     document.getElementById("btn").onclick = btClick;

     document.getElementById("btn").onclick();   //默认点击

  </script> 

//js中绑定方式（2）

<body>

   <button id="btn">点击</button>

 </body>

 <script type="text/javascript">

    document.getElementById("btn").onclick = function(){

     console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象

    }

    document.getElementById("btn").onclick();

 </script> 

//js中绑定方式（3）

<body>

   <button id="btn">点击</button>

 </body>

 <script type="text/javascript">

    function btClick(){

        console.log(this);

     } 

    document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。

    document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,控制台输出: Window  //this指向的是全局对象--window对象

 </script>

运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法（this指向的是全局对象）外，this指向的是绑定事件的Elment元素。

参考资料：

http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html

JavaScript中this的指向问题的更多相关文章

  1. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  2. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  3. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  4. 前端面试之JavaScript中this的指向【待完善！】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  5. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  6. Javascript 中的this 指向的对象，你搞清楚了吗？

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  7. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  8. 谈谈 JavaScript 中的 this 指向问题

    JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...

  9. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

随机推荐

  1. 生成R文件

    aapt package -f -m -J H:/workspaces/java_android/Test2/gen -S H:/workspaces/java_android/Test2/res - ...

  2. 史上最强php生成pdf文件,html转pdf文件方法

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. javascript深入理解js闭包(看了挺多的，感觉这篇比较透彻)

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  4. Spark1.3.0安装

    之前在用Hadoop写ML算法的时候就隐约感觉Hadoop实在是不适合ML这些比较复杂的算法.记得当时写完kmeans后,发现每个job完成后都需要将结果放在HDFS中,然后下次迭代的时候再从文件中读 ...

  5. HUST 1354 Rubiks

    背包.注释写详细了. 本想这样写:每个组内各自做背包,然后组间做背包,但是由于这题M=10000,时间复杂度太大. #include<cstdio> #include<cstring ...

  6. laravel5 html引用问题

    1. Composer 安装 编辑 composer.json 文件, require 节点下增加: "illuminate/html": "~5.0" 然后 ...

  7. Java使用POI实现数据导出excel报表

    Java使用POI实现数据导出excel报表 在上篇文章中,我们简单介绍了java读取word,excel和pdf文档内容 ,但在实际开发中,我们用到最多的是把数据库中数据导出excel报表形式.不仅 ...

  8. 如何解决Visual Studio2012 与此版本的Windows不兼容

    解决方案: http://www.microsoft.com/zh-CN/download/details.aspx?id=36020   下载更新

  9. lua 函数

    1.函数只有一个参数,且该参数为table 或 字符串时,调用函数可以省略() print"hello world" 同 print("hello world" ...

  10. 通过非root用户访问VNC

    我采用的是realvnc5.3.2.对于非root用户通过vnc访问linux桌面,网络上绝大数文章都是说要去配置/etc/sysconfig/vncservers.但安装完realvnc5.3.2之 ...