学习javascript基础知识系列第二节 - this用法

通过一段代码学习javascript基础知识系列

第二节 - this用法

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的*和灵活,结合apply(call)方法,可以使JS变得异常强大。

this指向的对象,可以通过以下三点区分:


  1. .当函数仅仅作为函数执行的时候,this指向的是全局的。

  2. .当函数作为构造函数执行的时候,this指向的是当前创建的对象。

  3. .当函数作为对象的方法执行的时候,this指向的是当前的对象。

注意:

为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示。

由于代码中使用了console.log或dir方法,因此如果在ie中执行,请自行替换为alert或注释掉。

下面通过代码来解释上述三点。

一、当函数作为函数执行的时候

有以下函数:

function A(){
this.a = "isea533";
console.log(this.a);
}

依次在console中输入(请不要输入注释内容):

//创建函数A()

function A(){
this.a = "isea533";
console.log(this.a);
}

undefined

//输入a,查看全局变量a

a

//返回结果为a 未定义

ReferenceError: a is not defined

//执行函数A() -- 这里是作为函数执行

A()

//console.log输出结果

isea533

undefined

//输入a,查看全局变量

a

//此时a已经有值了,说明函数A()执行的this.a是全局的。

"isea533"

//给全局a赋值1

a = 1;

1

//输入a,查看全局变量此时结果为1

a

1

//再次执行函数A

A();

isea533

undefined

//函数A执行后,a的值发生改变,从1变成isea533

a

"isea533"

上面的执行结果已经可以说明,当作为函数执行的时候,this为全局的。

二、当函数作为构造函数执行的时候

仍然使用上述函数A()

依次在console中输入(请不要输入注释内容):

function A(){
this.a = "isea533";
console.log(this.a);
}

undefined

//创建对象obj,构造函数执行过程中输出this.a

var obj = new A();

isea533

undefined

//查看对象的属性a

obj.a

"isea533"

//创建对象obj2

var obj2 = new A();

isea533

undefined

//查看obj2的属性a

obj2.a

"isea533"

//改变obj的属性a的值

obj.a = "isea";

"isea"

//查看obj2的属性a的值,没有改变

obj2.a

"isea533"

//查看全局变量a,结果为未定义

a

ReferenceError: a is not defined

三、当函数作为对象的方法执行的时候

其实第三条可以归到第二条中,因为这结果是显而易见的,这里主要是为了说明一些常见的情况,所以特地单独讲解。

有如下html代码:

<input type="text" id="username" value="isea533" onclick="console.log(this.value)"/>
<input type="text" id="age" value="30" />
<script>
function A(){
console.log(this.value);
}
document.getElementById("age").onclick = A;
</script>

在这两种方式中,我们可以看到this在这里就是指向的相应的input对象。

这是由于我们把onclick事件添加到了Dom对象上,所以this会指向当前的Dom对象,而不是全局对象。

我们在看另一种情况:

依次在console中输入(请不要输入注释内容):

//创建全局变量a

var a = "isea533";

undefined

//创建函数A

function A(){
console.log(this.a);
}

undefined

//创建对象c,c有属性a

var c = {a:"isea"}

undefined

//向c增加方法log = A;

c.log = A;

function A(){
console.log(this.a);
}

//执行c的log方法,输出c的属性a而不是全局的a

c.log();

isea

undefined

//查看全局对象a,值没有发生改变

a

"isea533"

//执行函数A,输出全局对象a的值

A();

isea533

undefined

//新建对象e = A

var e = A;

undefined

//执行e,这里e()和A()是一样仅仅作为函数执行的,e是函数,不是对象

e()

isea533

undefined

//我们使用toString.call验证一下,这里e是Function

toString.call(e)

"[object Function]"

//这里c是Object

toString.call(c)

"[object Object]"

通过上面的例子代码,我想你应该对this有一定的了解了,了解this指向在Js编程过程中非常的有用,了解这一点可以在使用过程中方便许多,也能避免出错。

相关阅读:

阮一峰:Javascript的this用法

上一篇:JavaScript学习02 基础语法


下一篇:Windows7上安装Ubuntu双系统