ADS2.3 JavaScript中的对象——关于this
大多数程序员都认为this是在当前脚本或对象的作用域中引用一个普通元素的标识符。然后，this在JavaScript中是依赖于它的执行环境的一个关键字。请看下面的例子：[code lang="js"]
var sound = 'Roar!';
function myOrneryBeast() {
this.style.color='green';
alert(sound);
}
[/code]
其中的this关键字包含在一个函数中，这个函数是某个对象的方法，在这里this引用的就是那个对象。我们知道在JavaScript中全部脚本都包含在window全局对象中。因此，在脚本的最顶层，this引用的就是window对象。但是，在myOrneryBeast()函数的环境中的this是如何解析为window对象的呢？因为myOrneryBeast()函数作为window对象的一个方法而存在的，这样函数中的this关键字将会解析为包含它的函数作为方法被调用时所属的对象。因为myOrneryBeast()函数是在window环境中被调用的，所以this.style.color将会引用window.style.color。相应的解析过程如下图所示：
<img src="http://www.everyinch.net/wp-content/uploads/2014/01/blog_this1.jpg" alt="blog_this1" width="350" height="101" class="alignnone size-full wp-image-4532" />
不过，this的环境可以随着函数被赋值给不同的对象而改变。比如直接或者使用ADS.addEvent()方法将函数赋值给一个事件侦听器属性：
[code lang="js"]
var sound = 'Roar!';
function myOrneryBeast() {
this.style.color='green';
alert(sound);
}
function initPage() {
var example = ADS.$('example');
// 使用事件属性方法
example.onclick = myOrneryBeast;
// 或者使用ADS.addEvent()方法
ADS.addEvent(example,'click', myOrneryBeast);
}
ADS.addEvent(window,'load',initPage);
[/code]
无论使用哪种事件注册模型，相应的元素在单击时会变成绿色，也会看到显示“Roar!”的警告框。如果对变量sound求值的结果仍然是“Roar!”，那么this不也仍然应该引用window对象吗？事实并不像期望的那样。因为JavaScript会事件侦听器被调用的环境中将this作为一个关键字来解析。在本例中，无论是onClick属性还是click事件，都是example对象的一个方法。因此，this会被解析为将函数作为其方法的对象，即将事件作为方法的HTML元素——this引用的是example这个HTML元素。
对于Sound变量而言，它在initPage()函数的作用域中没有改变，所以它在作用域链中始终会被解析为“Roar!”。解析过程如下图所示：
<img src="http://www.everyinch.net/wp-content/uploads/2014/01/blog_this2.jpg" alt="blog_this2" width="450" height="192" class="alignnone size-full wp-image-4534" />
通过call()和apply()重新定义执行环境
关于this关键字的引用问题还有个问题需要解决，这个问题涉及环境的改变。如果改变环境并非是我们希望的那样，又该如何呢？下面看一个例子：
[code lang="js"]
function doubleCheck() {
this.message = 'Are you sure you want to leave?';
}
doubleCheck.prototype.sayGoodbye = function() {
return confirm(this.message);
}
initPage() {
var clickedLink = new doubleCheck();
var links = document.getElementsByTagName('a');
for (var i=0 ; i
查看完整版本： ADS2.3 JavaScript中的对象——关于this
Tags: