javascript - Un problème avec les constructeurs js scope-safe

Question

function Polygon(sides){
                if(this instanceof Polygon){
                    this.sides=sides;
                    this.getArea=function(){
                        return 0;
                    }
                }else{
                    return new Polygon(sides);
                }
            }
            
            function  Rectangle(wifth,height){
                Polygon.call(this,2);
                this.width=this.width;
                this.height=height;
                this.getArea=function(){
                    return this.width * this.height;
                };
            }
            
            var rect=new Rectangle(5,10);
            alert(rect.sides); //undefined

Ce code est un exemple de P598-599 dans JS Height 3.
Ce que je veux demander, c'est pourquoi l'alerte n'est pas définie ?

Answer 1

Démarrer

var rect=new Rectangle(5,10);

Entrez Rectangle, cela pointe vers un nouvel objet et appelez-le objet1

Exécuté à

Polygon.call(this,2);

Entrez Polygone au nom de l'objet1

           function Polygon(sides){
                if(this instanceof Polygon){
                    this.sides=sides;
                    this.getArea=function(){
                        return 0;
                    }
                }else{
                    return new Polygon(sides);
                }
            }

Le prototype de

object1 est Rectangle, alors allez ailleurs

return new Polygon(sides);

Entrez à nouveau Polygon, cela pointe vers un nouvel objet et appelez-le object2

Le prototype de l'objet2 est Polygon, donc l'objet2 reçoit sides et getAreasides 和 getArea

回到 object1 的地盘， Polygon.call(this,2); 返回 object2 ，然后…… 然后丢掉了。

            function  Rectangle(wifth,height){
                Polygon.call(this,2);
                this.width=this.width;
                this.height=height;
                this.getArea=function(){
                    return this.width * this.height;
                };
            }

接着赐予 object1 undefined 的 width、height 和 getArea

De retour sur le territoire de l'objet1, Polygon.call(this,2); renvoie l'objet2, puis... puis perdu.

function Rectangle(wifth,height){
    Polygon.call(this,2);
    this.width=width;
    this.height=height;
    this.getArea=function(){
        return this.width * this.height;
    };
}
Rectangle.prototype = Polygon.prototype

Ensuite, accordez à l'objet 1 undefined width, height et getArea.

Enfin, rect a obtenu l'objet1 🎜 🎜Ajoutez la solution et laissez Rectangle partager le prototype de Polygon🎜 rrreee

Answer 2

Dans Rectangle, pointez ceci de Polygon vers ceci de Rectangle. Lorsque Rectangle est utilisé comme constructeur, ceci fait référence à l'instance de Rectangle, c'est-à-dire rect dans cet exemple, et le prototype de Polygon n'est pas sur la chaîne de prototypes de rect, cela Autrement dit, cette instance de Polygon est fausse, donc le retour new Polygon(sides) dans else est utilisé, et les côtés ne sont pas attachés à l'instance, donc l'attribut Sides n'existe pas sur l'instance rect.
Il y a aussi un rectangle (avec, hauteur), la largeur est mal écrite

Answer 3

Dans votre exemple, Polygon est un élément d'interférence et n'a aucun effet sur Rectangle.

Supprimer Polygon.call(this,2);Regardez encore, pouvez-vous comprendre la raison

Answer 4

• Imprimez ceci et vous connaîtrez la raison

• this.sides=sides est accroché sur Polygon

• renvoie un nouveau polygone (côtés);//ce n'est plus le rectangle lorsqu'il est appelé

function Polygon(sides){
                if(this instanceof Polygon){
                    this.sides=sides;//sides
                    console.log(this)
                    this.getArea=function(){
                        return 0;
                    }
                }else{
                    console.log('Polygon'+this)
                    return new Polygon(sides);
                }
            }
            
            function  Rectangle(wifth,height){
                Polygon.call(this,2);
                console.log(this)
                this.width=this.width;
                this.height=height;
                this.getArea=function(){
                    return this.width * this.height;
                };
            }
            
            var rect=new Rectangle(5,10);
            alert(rect.sides);