recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Comment l'objet pointé par ce changement dans les fonctions imbriquées?

J'ai écrit une démo, dont la fonction est que lorsque la souris entre, la longueur du bloc rectangulaire devient plus longue, puis la hauteur devient plus élevée. J'ai rencontré le problème suivant :

Lors de l'exécution de la fonction d'imbrication suivante

. 
    op[0].onmouseover = function(){
        that = this;
        changeStyle(that,'width',400,function(){
            changeStyle(that,'height',300);
        });
    }

Vous devez utiliser that=this pour transmettre les paramètres, sinon le navigateur signalera l'erreur suivante

Uncaught TypeError : échec de l'exécution de "getComputedStyle" sur "Window" : le paramètre 1 n'est pas de type "Element".

J'ai posté l'intégralité du code à la fin. Je veux savoir pourquoi utiliser that=this pour passer des paramètres peut résoudre le problème ? Si aucun paramètre n’est transmis, qui pointe-t-il deux fois ? Existe-t-il une bonne méthode de débogage dans Chrome et Firefox qui permet de surveiller chaque modification de cette valeur et de l'afficher ?

Code 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>

code CSS : 

.wrap{
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: #f00;
    border: 4px solid black;
}

code 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];
    }
}
習慣沉默習慣沉默2754 Il y a quelques jours666

répondre à tous(5)je répondrai

  • 黄舟

    黄舟2017-05-19 10:12:31

    Le this de la fonction appelée via l'événement pointe vers l'élément qui a déclenché l'événement, donc le this de la fonction appelée par l'événement op[0].onmouseover pointe vers op[0];

    Le this de la fonction de rappel transmis par la fonction changeStyle pointe vers la fenêtre, car if (fn) { fn();} est équivalent à la fenêtre appelant la fonction

    Si vous souhaitez suivre l'exécution du code, vous pouvez utiliser le débogage des points d'arrêt pour voir l'affectation de chaque variable pendant l'opération

    répondre
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-19 10:12:31

    Cela représente un objet interne généré automatiquement lors de l'exécution de la fonction et ne peut être utilisé qu'à l'intérieur de la fonction.
    Comme la fonction est utilisée dans différentes situations, sa valeur changera. Mais il existe un principe général : ceci fait référence à l’objet qui appelle la fonction. Je pense que vous pouvez lire cet article de Ruan Yifeng : http://www.ruanyifeng.com/blo...

    répondre
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:12:31

    Oubliez les soucis du thispointage, (es6) veuillez utiliser les fonctions fléchées

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-19 10:12:31

    Si vous ne réussissez pas, savez-vous quel style votre fonction de changement change ? Si vous l'utilisez directement, cela pointe vers la fenêtre. Comme mentionné au premier étage, vous connaîtrez le point d'arrêt dès que vous le briserez

    .

    répondre
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-19 10:12:31

    Si vous n'utilisez pas that=this pour lier this à la portée lexicale actuelle, alors this pointe vers la fenêtre d'objet globale, qui est la liaison par défaut de this.

    répondre
    0
  • Annulerrépondre