帮助理解this用法的几个例子

来源：互联网发布：瑞斯康微电子知乎编辑：程序博客网时间：2024/06/13 08:14

真正去解释this这个东西的时候，才发现不是这么简单，花了一些时间，写了几个小demo，让我们来一探究竟。恩，以人为镜，可知得失，看来这句话是很有道理的。

如果是一个全局的function，则this相当于window对象，在function里定义的各种属性或者方法可以在function外部访问到，前提是这个function需要被调用。

01<script type="text/javascript">
02        //在function中使用this
03        function a() {
04            if (this == window) {
05                alert("this == window");
06                this.fieldA = "I'm a field";
07                this.methodA = function() {
08                    alert("I'm a function ");
09                }
10            }
11        }
12
13        a();    //如果不调用a方法，则里面定义的属性会取不到
14        alert(window.fieldA);
15        methodA();    
16</script>

如果使用new的方式去实例化一个对象，则this不等于window对象，this指向function a的实例：

01<script type="text/javascript">
02        //在function中使用this之二
03        function a() {
04            if (this == window) {
05                alert("this == window");
06            }
07            else {
08                alert("this != window");
09            }
10            this.fieldA = "I'm a field";
11        }
12        var b = new a();
13        alert(b.fieldA);
14        
15</script>

使用prototype扩展方法可以使用this获取到源对象的实例，私有字段无法通过原型链获取：

01<script type="text/javascript">
02        //在function中使用this之三
03        function a() {
04            this.fieldA = "I'm a field";
05            var privateFieldA = "I'm a var";
06        }
07         
08        a.prototype.ExtendMethod = function(str) {
09            alert(str + " : " + this.fieldA);
10            alert(privateFieldA);   //出错
11        };
12        var b = new a();
13        b.ExtendMethod("From prototype"); 
14</script>

不管是直接引用function，还是实例化一个function，其返回的闭包函数里的this都是指向window。

01<script type="text/javascript">
02        //在function中使用this之四
03        function a() {
04            alert(this == window);
05            var that = this;
06            var func = function() {
07                alert(this == window);
08                alert(that);
09            };
10            return func;
11        }
12         
13        var b = a();
14        b();
15        var c = new a();
16        c();
17</script>

在HTML中使用this，一般代表该元素本身：

1<div onclick="test(this)" id="div">Click Me</div>
2    <script type="text/javascript">
3        function test(obj) {
4            alert(obj);
5        }
6    </script>

在IE和火狐（Chrome）下注册事件，this分别指向window和元素本身：

view source
print?
01<div id="div">Click Me</div>
02    <script type="text/javascript">     
03        var div = document.getElementById("div");
04        if (div.attachEvent) {
05            div.attachEvent("onclick", function() {
06                alert(this == window);
07                var e = event;
08                alert(e.srcElement == this);
09            });
10        }
11        if (div.addEventListener) {
12            div.addEventListener("click", function(e) {
13            alert(this == window);
14            e = e;
15            alert(e.target == this);
16            }, false);
17        }
18    </script>