手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript中的this实例分析
JavaScript中的this实例分析
摘要:以人为镜,可知得失,看来这句话是很有道理的。Demo1:如果是一个全局的function,则this相当于window对象,在functio...

以人为镜,可知得失,看来这句话是很有道理的。

Demo 1 :

如果是一个全局的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>

Demo 2 :

如果使用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>

Demo 3 :

使用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>

Demo 4 :

不管是直接引用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>

Demo 5 :

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

复制代码 代码如下:

<div id="div">Click Me</div>

<script type="text/javascript">

function test(obj) {

alert(obj);

}

</script>

Demo 6 :

在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>

以上就是我总结的this在javascript中的不同应用场景,可能还有其他的情况不一而足,以后发现了会补充进来。

【JavaScript中的this实例分析】相关文章:

JavaScript中this关键字使用方法详解

Javascript实现div的toggle效果实例分析

JavaScript中exec函数用法实例分析

JavaScript的Backbone.js框架的一些使用建议整理

JavaScript的document和window对象详解

javascript中innerText和innerHTML属性用法实例分析

详解JavaScript中Date.UTC()方法的使用

javascript相关事件的几个概念

讲解JavaScript中for...in语句的使用方法

JavaScript中用于生成随机数的Math.random()方法

精品推荐
分类导航