通过一段代码学习javascript基础知识系列
第二节 - this用法
this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的自由和灵活,结合apply(call)方法,可以使JS变得异常强大。
this指向的对象,可以通过以下三点区分:
- .当函数仅仅作为函数执行的时候,this指向的是全局的。
- .当函数作为构造函数执行的时候,this指向的是当前创建的对象。
- .当函数作为对象的方法执行的时候,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" οnclick="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编程过程中非常的有用,了解这一点可以在使用过程中方便许多,也能避免出错。