JS学习之this关键字上

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的指向是动态的,没有办法事先确定到底指向哪个对象.