页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 javascript prototype

javascript prototype的深度探索不是原型继承那么简单第2/3页

发布：dxy 字体：[增加减小] 类型：转载

JavaScript中对象的prototype属性，可以返回对象类型原型的引用。这是一个相当拗口的解释，要理解它，先要正确理解对象类型(Type)以及原型(prototype)的概念。

上面的例子通过prototype为Point对象设定了默认值(0,0)，因此p1的值为(0,0)，p2的值为(1,2)，通过delete p2.x, delete p2.y; 可以将p2的值恢复为(0,0)。下面是一个更有意思的例子：

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

利用prototype还可以为对象的属性设置一个只读的getter，从而避免它被改写。下面是一个例子：

点击运行可以看到效果:

this.length = { 
        valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}, 
        toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)} 
    } 
} 
var p1 = new Point; 
var p2 = new Point(2,3); 
var line1 = new LineSegment(p1, p2); 
var lp = line1.getFirstPoint(); 
lp.x = 100;  //不小心改写了lp的值，破坏了lp的原始值而且不可恢复 
alert(line1.getFirstPoint().x); 
alert(line1.length); //就连line1.lenght都发生了改变 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

将this.getFirstPoint()改写为下面这个样子：
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
则可以避免这个问题，保证了m_firstPoint属性的只读性。

点击运行可以看到效果:

this.length = { 
        valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}, 
        toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)} 
    } 
} 
var p1 = new Point; 
var p2 = new Point(2,3); 
var line1 = new LineSegment(p1, p2); 
var lp = line1.getFirstPoint(); 
lp.x = 100;  //不小心改写了lp的值，但是没有破坏原始的值 
alert(line1.getFirstPoint().x); 
alert(line1.length); //line1.lenght不发生改变 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象建立只读副本，在任何时候对副本进行改变，都不会影响到原始对象，而对原始对象进行改变，则会影响到副本，除非被改变的属性已经被副本自己的同名属性覆盖。用delete操作将对象自己的同名属性删除，则可以恢复原型属性的可见性。下面再举一个例子：

点击运行可以看到效果:

m_points = Array.apply(m_points, arguments);

function GETTER(){}; 
    GETTER.prototype = m_points[0]; 
    this.firstPoint = new GETTER();

this.length = { 
        valueOf : function(){return m_points.length}, 
        toString : function(){return m_points.length} 
    }

this.add = function(){ 
        m_points.push.apply(m_points, arguments); 
    }

this.getPoint = function(idx) 
    { 
        return m_points[idx]; 
    }

this.setPoint = function(idx, point) 
    { 
        if(m_points[idx] == null) 
        { 
            m_points[idx] = point; 
        } 
        else 
        { 
            m_points[idx].x = point.x; 
            m_points[idx].y = point.y; 
        } 
    } 
} 
var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6}); 
alert(p.length); 
alert(p.firstPoint.x); 
alert(p.firstPoint.y); 
p.firstPoint.x = 100; //不小心写了它的值 
alert(p.getPoint(0).x);  //不会影响到实际的私有成员 
delete p.firstPoint.x; //恢复 
alert(p.firstPoint.x);

p.setPoint(0, {x:3,y:4}); //通过setter改写了实际的私有成员 
alert(p.firstPoint.x);  //getter的值发生了改变 
alert(p.getPoint(0).x); 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript prototype 深度探索

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：JavaScript 应用类库代码
下一篇文章：Javascript typeof 用法

·在百度中搜索关于“javascript prototype的深度探索不是原型继承那么简单相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

javascript prototype的深度探索不是原型继承那么简单第2/3页

文章评论

同类文章

最近更新

热点排行

javascript prototype的深度探索不是原型继承那么简单第2/3页

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行