首页 > 代码库 > 几个例子帮助你理解JavaScript this的用法

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

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

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

<script type="text/javascript">        //在function中使用this        function a() {            if (this == window) {                alert("this == window");                this.fieldA = "I‘m a field";                this.methodA = function() {                    alert("I‘m a function ");                }            }        }        a();    //如果不调用a方法,则里面定义的属性会取不到       	alert(window.fieldA);        methodA();     </script>

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

<script type="text/javascript">        //在function中使用this之二        function a() {            if (this == window) {                alert("this == window");            }            else {                alert("this != window");            }            this.fieldA = "I‘m a field";        }        var b = new a();        alert(b.fieldA);       </script>

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

<script type="text/javascript">        //在function中使用this之三        function a() {            this.fieldA = "I‘m a field";            var privateFieldA = "I‘m a var";        }                a.prototype.ExtendMethod = function(str) {            alert(str + " : " + this.fieldA);            alert(privateFieldA);   //出错        };        var b = new a();        b.ExtendMethod("From prototype");  </script>

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

<script type="text/javascript">        //在function中使用this之四        function a() {            alert(this == window);            var that = this;            var func = function() {                alert(this == window);                alert(that);            };            return func;        }                var b = a();        b();        var c = new a();        c();</script>

在HTML中使用this,一般代表该元素本身:

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

在IE和火狐(Chrome)下注册事件,this分别指向window和元素本身:

<div id="div">Click Me</div>    <script type="text/javascript">              var div = document.getElementById("div");        if (div.attachEvent) {            div.attachEvent("onclick", function() {                alert(this == window);                var e = event;                 alert(e.srcElement == this);            });        }        if (div.addEventListener) {            div.addEventListener("click", function(e) {            alert(this == window);            e = e;             alert(e.target == this);            }, false);        }    </script>

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