JS学习之this关键字–上
1.this关键字的含义:
this关键字是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成.
this可以用在构造函数之中,表示实例对象.除此之外,this还可以用在别的场合.但不管是什么场合,this都有一个共同点:它总是返回一个对象.
简单说:this就是属性或方法"当前"所在的对象.
this.property
上面代码中,this就代表property属性当前所在的对象.
下面是一个实际的例子
var person = {
name: '张三',
describe: function () {
return '姓名:'+ this.name;
}
};
person.describe()
// "姓名:张三"
上面代码中,this.name表示属性所在的那个对象.由于this.name是在describe方法中调用,而describe方法所在的当前对象是person,因此this指向person ,this.name就是person.name.
由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this的指向是可变的.
var A = {
name: '张三',
describe: function () {
return '姓名:'+ this.name;
}
};
var B = {
name: '李四'
};
B.describe = A.describe;
B.describe()
// "姓名:李四"
上面代码中,A.describe属性被赋给B,于是B.describe技术表示describe 方法所在的当前对象是B,所以this.name就指向B.name. 稍稍重构这个例子 this的动态指向就能看的更清楚.
function f() {
return '姓名:'+ this.name;
}
var A = {
name: '张三',
describe: f
};
var B = {
name: '李四',
describe: f
};
A.describe() // "姓名:张三"
B.describe() // "姓名:李四"
上面代码中,函数f内部使用了this关键字,随着f所在的对象不同,this的指向也不同.
只要函数被赋给另一个变量,this的指向就会变.
var A = {
name: '张三',
describe: function () {
return '姓名:'+ this.name;
}
};
var name = '李四';
var f = A.describe;
f() // "姓名:李四"
上面代码中,A.describe被赋值给变量f,内部的this就会指向f运行时所在的对象(本例是顶层对象)
再看一个网页编程的例子
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">
<script>
function validate(obj, lowval, hival){
if ((obj.value < lowval) || (obj.value > hival))
console.log('Invalid Value!');
}
</script>
上面代码是一个文本输入框,每当用户输入一个值,就会调用onChange回调函数,验证这个值是否在指定范围.浏览器会向回调函数传入当前对象,因此this就代表传入当前对象(即文本框),然后就可以从this.value上面读到用户的输入值.
总结一下: js语言中,一切皆对象,运行环境也是对象,所以函数都是在某个对象之中运行,this就是函数运行时所在的对象(环境).这本来并不会让用户糊涂,但是js支持运行环境动态切换,也就是说,this的指向是动态的,没有办法事先确定到底指向哪个对象.