javascript面向对象疑问

原创

jimode2013 2012-10-27 07:37:09 博主文章分类：javascript ©著作权

文章标签 javascript面向对象构造继承法 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者jimode2013的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.构造继承法可以实现多继承吗？意思是说可以通过this.base可以多次赋值吗？

例21.14 构造继承法(疑问，是否可继承多个类).html

<html> 
    <head> 
        <title>例21.14 构造继承法(疑问，是否可继承多个类)</title>     
    </head> 
    <body> 
        <script> 
        <!-- 
            function dwn(s){ 
                document.write(s + "<br/>");     
            } 
             
            //定义一个Triangle类型 
            function Triangle(height){ 
                this.height = function(){ return height; };  
            } 
             
             
            //定义一个Quadrangle类型 
            function Quadrangle(width){      
                this.width = function(){ return width; } 
            } 
             
             
            //定义一个T类型，它继承Triangle类型,Quadrangle类型 
            function T(){ 
                this.base = Triangle; 
                this.base.apply(this,arguments); 
                 
                this.base = Quadrangle; 
                this.base.apply(this,arguments);                 
            } 
             
            var t = new T(2); 
            dwn(t.height()); 
            dwn(t.width()); 
 
        -->  
        </script> 
    </body> 
</html>

答案是可以的

2.在原型继承中使用构造继承法，看看构造继承法的属性在对象中是如何表现的：

<script> 
    function dwn(s){ 
            document.write(s + "<br/>");     
    } 
     
    function Point(name){ 
        this.pointName = name; 
    } 
    Point.prototype = new Object(); 
    function Point2D(){ 
        this.point2DName = "Point2D"; 
    } 
    //Point2D继承Point 
    Point2D.prototype = new Point("fromPoint2D"); 
     
    function ColorPoint2D(){ 
            this.colorPoint2DName = "ColorPoint2D"; 
            this.base = Point;//构造继承法 
            this.base.call(this,"fromColorPoint2D"); 
    } 
    //ColorPoint2D继承Point2D 
    ColorPoint2D.prototype = new Point2D(); 
     
    var colorPoint2D = new ColorPoint2D(); 
    dwn("colorPoint2DName:" + colorPoint2D.colorPoint2DName); 
    dwn("point2DName:" + colorPoint2D.point2DName); 
    dwn("pointName:" + colorPoint2D.pointName); 
    delete colorPoint2D.pointName; 
    dwn("删除构造继承法继承来的pointName:" + colorPoint2D.pointName);//在ColorPoint2D通过构造继承法继承了pointName属性，而通过prototype继承了pointName属性 
    delete ColorPoint2D.prototype.pointName; 
    dwn("错误删除prototype.pointName:" + colorPoint2D.pointName); 
    delete Point2D.prototype.pointName; 
    dwn("正确删除prototype.pointName:" + colorPoint2D.pointName); 
</script>

构造继承法很像java中的类继承，就是在子类中多了一个普通属性；

同时上面也证明了原型继承可以继承静态属性

3.证明原型继承法可以继承静态方法

原型继承法可以继承静态方法.html

<script> 
    function dwn(s){ 
            document.write(s + "<br/>");     
    } 
     
    function Point(name){ 
        this.pointName = name; 
    } 
    Point.prototype = new Object(); 
    Point.prototype.printPoint = function(){ 
        dwn("继承了Point的静态方法printPoint");  
    } 
    function Point2D(){ 
        this.point2DName = "Point2D"; 
    } 
    //Point2D继承Point 
    Point2D.prototype = new Point("fromPoint2D"); 
    Point2D.prototype.printPoint2D = function(){ 
        dwn("继承了point2D的静态方法printPoint2D"); 
    } 
     
    function ColorPoint2D(){ 
            this.colorPoint2DName = "ColorPoint2D"; 
    } 
    //ColorPoint2D继承Point2D 
    ColorPoint2D.prototype = new Point2D(); 
     
     
    var colorPoint2D = new ColorPoint2D(); 
    dwn("colorPoint2DName:" + colorPoint2D.colorPoint2DName); 
    dwn("point2DName:" + colorPoint2D.point2DName); 
    dwn("pointName:" + colorPoint2D.pointName); 
 
     colorPoint2D.printPoint2D(); 
     colorPoint2D.printPoint(); 
</script>

运行结果：

colorPoint2DName:ColorPoint2D
point2DName:Point2D
pointName:fromPoint2D
继承了point2D的静态方法printPoint2D
继承了Point的静态方法printPoint

4.证明Date中的方法是不可枚举方法

证明Date中的方法是不可枚举方法.html

<script> 
    function dwn(s){ 
        document.write(s + "<br/>");     
    } 
    function EachFieldMethod(){ 
         this.print = function(s){ dwn(s);}  
         this.name = "EachFieldMethod"; 
    } 
    var EachFieldMethod = new EachFieldMethod(); 
    dwn("可枚举的方法"); 
    for(var each in EachFieldMethod){ 
        dwn(each);   
    }  
     
    dwn("不可枚举的方法"); 
    var date = new Date(); 
    for(var each2 in date){ 
        dwn(each);   
    }  
</script>

运行结果如下：

可枚举的方法
print
name
不可枚举的方法

Date中的一个属性或者方法都没有枚举出来

5.重载的toString()方法是否是非枚举类方法？

重载的toString()方法是否是非枚举类方法.html

<html> 
    <head> 
        <title>重载的toString()方法是否是非枚举类方法</title>  
    </head> 
    <body> 
        <script> 
        <!-- 
            Function.prototype.extends = function(obj){ 
                for(var each in obj){ 
                    this.prototype[each] = obj[each]; 
                }    
 
            } 
            //定义一个Point类型 
            function Point(dimension){ 
                this.dimension = dimension; 
                 
                this.toString = function(){ 
                    return "point";  
                } 
          } 
           
          /* 
            Point.prototype.toString = function(){ 
                return "point";  
            } 
            */ 
            function Point2D(){} 
            Point2D.extends(new Point(2)); 
            var point2D = new Point2D(); 
            document.write(point2D.dimension + "<br/>"); 
            document.write(point2D); 
        -->  
        </script> 
    </body> 
</html>

运行结果：

2
point

上面这个程序证明重载的toString()方法是枚举方法，拷贝构造法通过反射机制拷贝基类对象的所有可枚举数据和方法来模拟“继承”

6.事件中this的指向问题

<html> 
<head> 
   <title>Example-21.35 this代词的异步问题</title> 
</head> 
<body> 
<button id="btn" name="btn"/> 
<script> 
<!-- 
  //构造一个Object对象 
  var obj = {}; 
  //定义obj对象的foo方法 
  obj.foo = function(){ 
    alert(this == obj); 
    alert(this == btn); 
    alert(this == window); 
  } 
  btn.onclick = obj.foo; 
    //这个问题还比较好理解，可以认为是btn.onclick()做实际调用 
        //而赋值只是将函数引用给了btn.onclick代理（false,true,false） 
  btn.attachEvent("click",obj.foo);//(false,true,false) 
        //而这个也不对，而且this的值是window,怎么说也是一种遗憾 
  btn.attachEvent("click",function(){ obj.foo.call(btn)});//(false,true,false) 
    //还得做这样的修正 
  setTimeout(obj.foo,100);//(false,false,true) 
    //setTime也是一样的，this的值是window 
--> 
</script> 
</body> 
</html>

上面是opera的运行结果，而firefox和chrome都只能运行第一个，那么IE呢

改写成以下的形式：

例21.35 this代词的异步问题(test).html

<html> 
<head> 
   <title>Example-21.35 this代词的异步问题</title> 
</head> 
<body> 
<button id="btn" name="btn"/> 
<script> 
<!-- 
  //构造一个Object对象 
  var obj = function(){}; 
  //定义obj对象的foo方法 
  obj.foo = function(){ 
    alert(this == obj); 
    alert(this == btn); 
    alert(this == window); 
  } 
  btn.onclick = obj.foo; 
    //这个问题还比较好理解，可以认为是btn.onclick()做实际调用 
        //而赋值只是将函数引用给了btn.onclick代理（false,true,false） 
 // btn.attachEvent("click",obj.foo);//(false,true,false) 
        //而这个也不对，而且this的值是window,怎么说也是一种遗憾 
  //btn.attachEvent("click",function(){ obj.foo.call(btn)});//(false,true,false) 
    //还得做这样的修正 
  //setTimeout(obj.foo,100);//(false,false,true) 
    //setTime也是一样的，this的值是window 
--> 
</script> 
</body> 
</html>