javascript - 函數嵌套中，this指向物件會發生怎麼樣的變化？
我寫了一個demo，其功能是滑鼠移入時長方形塊長度變長，然後高度變高，遇到如下問題：
在執行下面這段函數嵌套時
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}必須使用that=this傳參，否則瀏覽器會報如下錯誤
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
我在最後貼出了整套程式碼，我想知道為什麼用that=this傳參能解決問題？不傳參的話this兩次分別指向了誰？ chrome和firefox有沒有什麼好的調試方法能監視每一次this值的變化並顯示出來？
html程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<link rel="stylesheet" href="animation.css" />
</head>
<body>
<p class="wrap"></p>
<script src="animation.js"></script>
</body>
</html>css程式碼：
.wrap{
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
border: 4px solid black;
}js程式碼：
window.onload = function(){
var op = document.getElementsByTagName('p');
op[0].timer = null;
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}
}
function changeStyle(obj,attr,iTarget,fn){
clearInterval(obj.timer);
var curValue = 0;
obj.timer = setInterval(function(){
curValue = parseInt(getStyle(obj,attr));
var speed = (iTarget - curValue) / 20;
speed = (speed > 0) ? Math.ceil(speed) : Math.floor(speed);
if (curValue == iTarget) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
else{
obj.style[attr] = curValue + speed + 'px';
}
},30);
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,null)[attr];
}
}
