学习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用法