javascript - js作用域安全的构造函数的一个问题
phpcn_u1582
phpcn_u1582 2017-05-19 10:15:29
0
4
459
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

这段代码是js高程三中P598-599的一个例子
我想问的是为什么alert的是undefined呢?

phpcn_u1582
phpcn_u1582

全部回复(4)
曾经蜡笔没有小新

开始

var rect=new Rectangle(5,10);

进入 Rectangle ,this 指向一个新 object,且叫它 object1

执行到

Polygon.call(this,2);

以 object1 的名义进入 Polygon

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

object1 的原型是 Rectangle ,所以走到 else

return new Polygon(sides);

再次进入 Polygon ,this 指向一个新对象,且叫它为 object2

object2 的原型是 Polygon ,所以赐予 object2 sidesgetArea

回到 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 undefinedwidthheightgetArea

最后,rect 得到了 object1

补上解决方案,让 Rectangle 共用 Polygon 的原型即可

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
淡淡烟草味

在Rectangle中将Polygon的this指向了Rectangle的this,Rectangle作为构造函数使用时this指的是Rectangle的实例,即本例中的rect,而Polygon的原型并没有在rect的原型链上,即this instanceof Polygon为false,所以走的是else内的return new Polygon(sides),没有将sides挂到实例上,所以rect实例上也就不存在sides属性。
还有Rectangle(wifth,height),width写错了

習慣沉默

在你的例子中,Polygon 就是个干扰项,对 Rectangle 一点影响都没有。

去掉 Polygon.call(this,2); 再看,能明白原因了么

巴扎黑
  • 打印一下this,你就知道原因了

  • this.sides=sides 挂在了Polygon

  • return new Polygon(sides);//this 不再是调用的时候的Rectangle

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); 
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板