Ich habe eine Demo geschrieben, deren Funktion darin besteht, dass die Länge des rechteckigen Blocks länger wird und dann die Höhe höher wird. Ich bin auf das folgende Problem gestoßen:
Beim Ausführen der folgenden Funktionsverschachtelung
op[0].onmouseover = function(){
that = this;
changeStyle(that,'width',400,function(){
changeStyle(that,'height',300);
});
}Sie müssen that=this verwenden, um Parameter zu übergeben, sonst meldet der Browser den folgenden Fehler
Uncaught TypeError: 'getComputedStyle' konnte nicht auf 'Window' ausgeführt werden: Parameter 1 ist nicht vom Typ 'Element'.
Ich habe den gesamten Code am Ende gepostet. Ich möchte wissen, warum die Verwendung von that=this zur Übergabe von Parametern das Problem lösen kann. Wenn keine Parameter übergeben werden, auf wen zeigt dies dann zweimal? Gibt es in Chrome und Firefox eine gute Debugging-Methode, die jede Änderung dieses Werts überwachen und anzeigen kann?
HTML-Code:
<!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-Code:
.wrap{
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
border: 4px solid black;
}js-Code:
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];
}
}
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
通过事件调用的函数的this指向触发该事件的元素,所以op[0].onmouseover事件调用函数的this指向的是op[0]；
changeStyle函数传入的回调函数的this指向的是window，因为 if (fn) { fn();}相当于window调用了该函数
如果想跟踪代码的执行情况可以采用断点调试，能看到各个变量在运行中的赋值情况
this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
我想你可以看看阮一峰的这篇：http://www.ruanyifeng.com/blo...
忘掉
this指向的烦恼吧，(es6)请使用箭头函数如果不传that，你的change函数，改变的是谁的样式，你知道吗？如果直接用this，this是指向window的，如一楼所说，断点，一断就知道
若不用that=this将this绑定到当前词法作用域，那么this指向的是全局对象window，这属于this的默认绑定。