《王者归来》读书笔记 ── JavaScript 面向对象编程（2）

《王者归来》读书笔记 ── JavaScript 面向对象编程（2）
《王者归来》读书笔记 ── JavaScript 面向对象编程（2） I. 什么是 prototype

JS 中对象的 prototype 属性可以返回对象类型原型的引用（确实拗口），让我们分开来理解。对象的类（Class）和对象实例（Instance）之间是一种“创建”关系，所以类（Class）是对象的一个类型（Type）。在面向对象领域里，实例和类型不是唯一的一对可描述的抽象关系。在 JS 里还有另外一个更高层次的抽象关系：类型（Type）与原型（prototype），它恰好和类型与实例的抽象关系构成了一个三层的链。

在生活中有个习语“照猫画虎”，这里的猫就是原型，而虎就是类型，用 JS 的 prototype 表示为：“虎.prototype = 某只猫”或“虎.prototype = new 猫()”。当然这只是个比喻。

要注意的是，原型模式要求一个类型在一个时刻只能有一个原型，这里有两层含义：

1. 每个具体的 JS 类型有且仅有一个原型（prototype），在默认情况下该原型是一个 Object 对象（不是 Object 类型）；

2. 这个类型的实例的所有类型，必须是满足原型关系的类型联。看个例子：

Javascript代码
1. function ClassA(){...}
2. ClassA.prototype = new Object(); //默认值，可以省略
4. function ClassB(){...}
5. ClassB.prototype = new ClassA();
7. function ClassC(){...}
8. ClassC.prototype = new ClassB();
10. var obj = new ClassC();
12. alert(obj instanceof ClassC)； //ture；
13. alert(obj instanceof ClassB)； //ture；
14. alert(obj instanceof ClassA)； //ture；
15. alert(obj instanceof Object)； //ture；
function ClassA(){...} ClassA.prototype = new Object(); //默认值，可以省略 function ClassB(){...} ClassB.prototype = new ClassA(); function ClassC(){...} ClassC.prototype = new ClassB(); var obj = new ClassC(); alert(obj instanceof ClassC)； //ture； alert(obj instanceof ClassB)； //ture； alert(obj instanceof ClassA)； //ture； alert(obj instanceof Object)； //ture；

简单描述一下原型关系的类型链：

object <─ ClassA <- objectA <─ ClassB <- objectB <─ ClassC <- objectC

有意思的是，JS 并没有规定一个类型的原型的类型，因此可以是任何类型，但通常是某种对象，这样，对象 - 类型 - 原型（对象）就可能构成一个环形结构，或其他有意思的拓扑结构。

II. prototype 使用技巧

JS 的对象是动态的，prototype 也不例外，给 prototype 增减属性会改变这个类型的原型，以及由这个原型所创建的对象上。

Javascript代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=function%20Point(x%2C%20y)%7B%0A%20%20%20%20if(x)%20this.x%20%3D%20x%3B%0A%20%20%20%20if(y)%20this.y%20%3D%20y%3B%0A%7D%0A%0A%2F%2F%E8%AE%BE%E5%AE%9A%20Point%20%E5%AF%B9%E8%B1%A1%E7%9A%84%20x%2C%20y%20%E9%BB%98%E8%AE%A4%E5%80%BC%E5%B9%B6%E5%8A%A8%E6%80%81%E7%9A%84%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%B1%9E%E6%80%A7%20z%0APoint.prototype.x%20%3D%200%3B%0APoint.prototype.y%20%3D%200%3B%0APoint.prototype.z%20%3D%200%3B%0A%0Avar%20p1%20%3D%20new%20Point%3B%0Avar%20p2%20%3D%20new%20Point(1%2C%202)%3B%0A%0Aalert(p1.x%20%2B%20'%2C%20'%20%2B%20p1.y%20%2B%20'%2C%20'%20%2B%20p1.z)%3B%0A%2F%2F0%2C%200%2C%200%20%20%20p1%20%E4%B8%BA%E9%BB%98%E8%AE%A4(0%2C%200)%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%8A%A0%E4%B8%8A%20z%20%E7%9A%84%E5%80%BC%E4%B9%9F%E4%B8%BA%200%EF%BC%8C%E6%89%80%E4%BB%A5%E6%98%AF%200%2C%200%2C%200%0A%0Aalert(p2.x%20%2B%20'%2C%20'%20%2B%20p2.y%20%2B%20'%2C%20'%20%2B%20p2.z)%3B%0A%2F%2F1%2C%202%2C%200%20%20%20%E5%8E%9F%E5%9E%8B%E5%B1%9E%E6%80%A7%E4%B8%8E%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E9%87%8D%E5%90%8D%EF%BC%8C%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E4%BC%9A%E8%A6%86%E7%9B%96%E5%8E%9F%E5%9E%8B%E5%B1%9E%E6%80%A7%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B8%BA1%2C%202" src="http://mockee.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236739472507" lk_media="yes">
1. function Point(x, y){
2. if(x) this.x = x;
3. if(y) this.y = y;
4. }
6. //设定 Point 对象的 x, y 默认值并动态的添加一个属性 z
7. Point.prototype.x = 0;
8. Point.prototype.y = 0;
9. Point.prototype.z = 0;
11. var p1 = new Point;
12. var p2 = new Point(1, 2);
14. alert(p1.x + ', ' + p1.y + ', ' + p1.z);
15. //0, 0, 0 p1 为默认(0, 0)的对象，加上 z 的值也为 0，所以是 0, 0, 0
17. alert(p2.x + ', ' + p2.y + ', ' + p2.z);
18. //1, 2, 0 原型属性与对象属性重名，对象属性会覆盖原型属性，所以为1, 2
function Point(x, y){ if(x) this.x = x; if(y) this.y = y; } //设定 Point 对象的 x, y 默认值并动态的添加一个属性 z Point.prototype.x = 0; Point.prototype.y = 0; Point.prototype.z = 0; var p1 = new Point; var p2 = new Point(1, 2); alert(p1.x + ', ' + p1.y + ', ' + p1.z); //0, 0, 0 p1 为默认(0, 0)的对象，加上 z 的值也为 0，所以是 0, 0, 0 alert(p2.x + ', ' + p2.y + ', ' + p2.z); //1, 2, 0 原型属性与对象属性重名，对象属性会覆盖原型属性，所以为1, 2

如果我们用 delete 运算符删除 p2 的 x 属性，那么 p2.x 会恢复 prototype.x 的默认值 0：

Javascript代码
1. delete p2.x;
2. alert(p2.x) //0
delete p2.x; alert(p2.x) //0

关于用 delete 操作还原默认值还有一个例子：

Javascript代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=function%20ClassA()%7B%0A%20%20%20%20this.x%20%3D%2010%3B%0A%20%20%20%20this.y%20%3D%2020%3B%0A%20%20%20%20this.z%20%3D%2030%3B%0A%7D%0A%0AClassA.prototype%20%3D%20new%20ClassA%3B%20%20%2F%2F%E5%B0%86%20x%2C%20y%2C%20z%20%E5%90%8C%E6%97%B6%E8%AE%BE%E4%B8%BA%20ClassA%20%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%0A%0A%2F%2F%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E4%BC%9A%E5%B0%86%E8%87%AA%E8%BA%AB%E7%9A%84%E9%9D%9E%E5%8E%9F%E5%9E%8B%E5%B1%9E%E6%80%A7%E5%88%A0%E9%99%A4%EF%BC%8C%E8%BE%BE%E5%88%B0%20reset%20%E7%9A%84%E6%95%88%E6%9E%9C%0AClassA.prototype.reset%20%3D%20function()%7B%0A%20%20%20%20for(var%20each%20in%20this)%7B%0A%20%20%20%20%20%20%20%20delete%20this%5Beach%5D%3B%0A%20%20%20%20%7D%0A%7D%0A%0Avar%20a%20%3D%20new%20ClassA()%3B%0A%0Aa.x%20*%3D%202%3B%0Aa.y%20*%3D%202%3B%0Aa.x%20*%3D%202%3B%0A%0Aalert(a.x%20%2B%20'%2C%20'%20%2B%20a.y%20%2B%20'%2C%20'%20%2B%20a.z)%20%20%2F%2F20%2C%2040%2C%2060%0A%0A%2F%2F%E8%B0%83%E7%94%A8%20reset%20%E6%96%B9%E6%B3%95%E5%9B%9E%E5%A4%8D%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%0Aa.reset()%3B%0A%0Aalert(a.x%20%2B%20'%2C%20'%20%2B%20a.y%20%2B%20'%2C%20'%20%2B%20a.z)%20%20%2F%2F10%2C%2020%2C%2030" src="http://mockee.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236739472518" lk_media="yes">
1. function ClassA(){
2. this.x = 10;
3. this.y = 20;
4. this.z = 30;
5. }
7. ClassA.prototype = new ClassA; //将 x, y, z 同时设为 ClassA 的默认值
9. //下面这个方法会将自身的非原型属性删除，达到 reset 的效果
10. ClassA.prototype.reset = function(){
11. for(var each in this){
12. delete this[each];
13. }
14. }
16. var a = new ClassA();
18. a.x *= 2;
19. a.y *= 2;
20. a.x *= 2;
22. alert(a.x + ', ' + a.y + ', ' + a.z) //20, 40, 60
24. //调用 reset 方法回复对象的默认值
25. a.reset();
27. alert(a.x + ', ' + a.y + ', ' + a.z) //10, 20, 30
function ClassA(){ this.x = 10; this.y = 20; this.z = 30; } ClassA.prototype = new ClassA; //将 x, y, z 同时设为 ClassA 的默认值 //下面这个方法会将自身的非原型属性删除，达到 reset 的效果 ClassA.prototype.reset = function(){ for(var each in this){ delete this[each]; } } var a = new ClassA(); a.x *= 2; a.y *= 2; a.x *= 2; alert(a.x + ', ' + a.y + ', ' + a.z) //20, 40, 60 //调用 reset 方法回复对象的默认值 a.reset(); alert(a.x + ', ' + a.y + ', ' + a.z) //10, 20, 30

我们还可以利用 prototype 为对象属性设置一个可读的 getter，如果忘记了 getter，可以再回顾下笔记（1）。实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象创建只读副本：

Javascript代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=%2F%2F%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E5%A4%9A%E8%BE%B9%E5%BD%A2%E7%B1%BB%E5%9E%8B%0Afunction%20Polygon()%7B%0A%0A%20%20%20%20%2F%2F%E5%AD%98%E6%94%BE%E5%A4%9A%E4%B8%AA%E5%A4%9A%E8%BE%B9%E5%BD%A2%E7%9A%84%E5%AE%9A%E7%82%B9%0A%20%20%20%20var%20m_points%20%3D%20%5B%5D%3B%0A%20%20%20%20m_points%20%3D%20Array.apply(m_points%2C%20arguments)%3B%0A%20%20%20%0A%20%20%20%20%2F%2F%E5%88%A9%E7%94%A8%E4%B8%8A%E9%9D%A2%E6%8F%90%E5%88%B0%E7%9A%84%E6%96%B9%E6%B3%95%E4%B8%BA%E7%AC%AC%E4%B8%80%E4%B8%AA%E9%A1%B6%E7%82%B9%E5%88%9B%E5%BB%BA%E5%8F%AA%E8%AF%BB%E5%89%AF%E6%9C%AC%0A%20%20%20%20function%20GETTER()%7B%7D%3B%0A%20%20%20%20GETTER.prototype%20%3D%20m_points%5B0%5D%3B%0A%20%20%20%20this.firstPoint%20%3D%20new%20GETTER()%3B%0A%20%20%20%0A%20%20%20%20%2F%2F%E5%85%AC%E6%9C%89%E5%B1%9E%E6%80%A7%0A%20%20%20%20this.length%20%3D%20%7B%0A%20%20%20%20%20%20%20%20valueOf%20%3A%20function()%7Breturn%20m_points.length%7D%2C%0A%20%20%20%20%20%20%20%20toString%20%3A%20function()%7Breturn%20m_points.length%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F%2F%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%88%96%E5%A4%9A%E4%B8%AA%E9%A1%B6%E7%82%B9%20%20%20%0A%20%20%20%20this.add%20%3D%20function()%7B%0A%20%20%20%20%20%20%20%20m_points.push.apply(m_points%2C%20arguments)%3B%0A%20%20%20%20%7D%0A%20%20%20%0A%20%20%20%20%2F%2F%E5%8F%96%E5%BE%97%E5%BA%8F%E5%8F%B7%E4%B8%BA%20idx%20%E7%9A%84%E9%A1%B6%E7%82%B9%0A%20%20%20%20this.getPoint%20%3D%20function(idx)%7B%0A%20%20%20%20%20%20%20%20return%20m_points%5Bidx%5D%3B%0A%20%20%20%20%7D%0A%20%20%20%0A%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E7%89%B9%E5%AE%9A%E4%BD%8D%E7%BD%AE%E7%9A%84%E9%A1%B6%E7%82%B9%0A%20%20%20%20this.setPoint%20%3D%20function(idx%2C%20point)%7B%0A%20%20%20%20%20%20%20%20if(m_points%5Bidx%5D%20%3D%3D%20null)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20m_points%5Bidx%5D%20%3D%3D%20point%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20else%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20m_points%5Bidx%5D.x%20%3D%20point.x%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20m_points%5Bidx%5D.y%20%3D%20point.y%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%0A%2F%2F%E6%9E%84%E5%BB%BA%E4%B8%80%E4%B8%AA%E4%B8%89%E8%A7%92%E5%BD%A2%20p%0Avar%20p%20%3D%20new%20Polygon%7B(x%3A0%2C%20y%3A1)%2C%20(x%3A3%2C%20y%3A1)%2C%20(x%3A0%2C%20y%3A4))%7D%0A%0Ap.firstPoint.x%20%3D%20100%3B%20%20%2F%2F%E5%81%87%E5%A6%82%E6%88%91%E4%BB%AC%E4%B8%BA%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AE%9A%E7%82%B9%E9%87%8D%E6%96%B0%E8%AE%BE%E5%AE%9A%20x%20%E5%80%BC%0Aalert(p.getPoint(0).x)%20%20%2F%2F%200%EF%BC%8C%E7%A7%81%E6%9C%89%E6%88%90%E5%91%98%E7%9A%84%E5%80%BC%E5%B9%B6%E6%9C%AA%E5%8F%97%E5%88%B0%E5%BD%B1%E5%93%8D%0Adelete%20p.firstPoint.x%20%20%2F%2F%E6%81%A2%E5%A4%8D%E9%BB%98%E8%AE%A4%E5%80%BC%0Aalert(p.firstPoint.x)%3B%20%20%2F%2F0%0A%0Ap.setPoint(0%2C%20%7Bx%3A3%2C%20y%3A4%7D)%3B%20%20%2F%2F%E9%80%9A%E8%BF%87%20setter%20%E6%94%B9%E5%86%99%E4%BA%86%E7%A7%81%E6%9C%89%E6%88%90%E5%91%98%0Aalert(p.firstPoint.x)%3B%20%20%2F%2F3%EF%BC%8Cgetter%20%E7%9A%84%E5%80%BC%E5%8F%91%E7%94%9F%E4%BA%86%E6%94%B9%E5%8F%98" src="http://mockee.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236739472524" lk_media="yes">
1. //定义一个多边形类型
2. function Polygon(){
4. //存放多个多边形的定点
5. var m_points = [];
6. m_points = Array.apply(m_points, arguments);
8. //利用上面提到的方法为第一个顶点创建只读副本
9. function GETTER(){};
10. GETTER.prototype = m_points[0];
11. this.firstPoint = new GETTER();
13. //公有属性
14. this.length = {
15. valueOf : function(){return m_points.length},
16. toString : function(){return m_points.length}
17. }
19. //添加一个或多个顶点
20. this.add = function(){
21. m_points.push.apply(m_points, arguments);
22. }
24. //取得序号为 idx 的顶点
25. this.getPoint = function(idx){
26. return m_points[idx];
27. }
29. //设置一个特定位置的顶点
30. this.setPoint = function(idx, point){
31. if(m_points[idx] == null){
32. m_points[idx] == point;
33. }
34. else{
35. m_points[idx].x = point.x;
36. m_points[idx].y = point.y;
37. }
38. }
39. }
41. //构建一个三角形 p
42. var p = new Polygon{(x:0, y:1), (x:3, y:1), (x:0, y:4))}
44. p.firstPoint.x = 100; //假如我们为第一个定点重新设定 x 值
45. alert(p.getPoint(0).x) // 0，私有成员的值并未受到影响
46. delete p.firstPoint.x //恢复默认值
47. alert(p.firstPoint.x); //0
49. p.setPoint(0, {x:3, y:4}); //通过 setter 改写了私有成员
50. alert(p.firstPoint.x); //3，getter 的值发生了改变
//定义一个多边形类型 function Polygon(){ //存放多个多边形的定点 var m_points = []; 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); } //取得序号为 idx 的顶点 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; } } } //构建一个三角形 p var p = new Polygon{(x:0, y:1), (x:3, y:1), (x:0, y:4))} p.firstPoint.x = 100; //假如我们为第一个定点重新设定 x 值 alert(p.getPoint(0).x) // 0，私有成员的值并未受到影响 delete p.firstPoint.x //恢复默认值 alert(p.firstPoint.x); //0 p.setPoint(0, {x:3, y:4}); //通过 setter 改写了私有成员 alert(p.firstPoint.x); //3，getter 的值发生了改变

上面的例子还说明了，用 prototype 可以快速创建对象的一个或多个副本，以一个对象为原型来创建大量的新对象，这正是 prototype pattern 的本质：

Javascript代码
1. var p1 = new Point(1, 2);
2. var points = [];
3. var PointPrototype = function(){};
4. PointPrototype.prototype = p1;
5. for(var i = 0, i < 10000, i++){
6. points[i] = new PointPrototype(); //由于 PointPrototype 是个空函数，所以它的构造要比直接构造 //p1 快得多
7. }
var p1 = new Point(1, 2); var points = []; var PointPrototype = function(){}; PointPrototype.prototype = p1; for(var i = 0, i < 10000, i++){ points[i] = new PointPrototype(); //由于 PointPrototype 是个空函数，所以它的构造要比直接构造 //p1 快得多 }

除了以上作用，prototype 更常见的用处是声明对象的方法，这样避免了在构造函数中每次对方法进行重新赋值，节省了时间和空间。所以应尽量采用 prototype 定义对象方法，除非该方法要访问对象的私有成员或者返回某些引用了构造函数上下文的闭包。

习惯上，我们把采用 prototype 定义的属性和方法称为静态属性和静态方法，或者原型属性原型方法，把用 this 定义的属性和方法称为公有属性和公有方法。

III. prototype 的实质、价值和局限性

上面已经说了 prototype 的作用，现在来透过规律揭示 prototype 的实质。prototype 的行为类似于 C++ 中的静态域，将一个属性添加为 prototype 的属性，这个属性将被该类型所创建的所有实例所共享，但这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。看个例子：

Javascript代码 <embed height="15" width="14" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" flashvars="clipboard=function%20Point2D(x%2C%20y)%7B%0A%20%20%20%20this.x%20%3D%20x%3B%0A%20%20%20%20this.y%20%3D%20y%3B%0A%7D%0A%0APoint2D.prototype.x%20%3D%200%3B%0APoint2D.prototype.y%20%3D%200%3B%0A%0Afunction%20ColorPoint2D(x%2C%20y%2C%20c)%7B%0A%20%20%20%20this.x%20%3D%20x%3B%0A%20%20%20%20this.y%20%3D%20y%3B%0A%7D%0A%0AColorPoint2D.prototype%20%3D%20new%20Point2D()%3B%0AColorPoint2D.prototype.x%20%3D%201%3B%0AColorPoint2D.prototype.y%20%3D%201%3B%0A%0Avar%20cp%20%3D%20new%20ColorPoint2D(10%2C%2020%2C%20red)%3B%0Aalert(cp.x)%20%20%2F%2F10%EF%BC%8C%E5%85%88%E6%9F%A5%E6%89%BE%20cp%20%E8%87%AA%E8%BA%AB%E5%B1%9E%E6%80%A7%0Adelete%20cp.x%3B%0Aalert(cp.x)%20%20%2F%2F1%EF%BC%8C%E8%A2%AB%E5%88%A0%E9%99%A4%E5%90%8E%E6%9F%A5%E6%89%BE%E4%B8%8A%E5%B1%82%E5%8E%9F%E5%9E%8B%E5%B1%9E%E6%80%A7%0Adelete%20ColorPoint2D.prototype.x%3B%0Aalert(cp.x)%20%20%2F%2F0%EF%BC%8C%E5%88%A0%E9%99%A4%E5%90%8E%E7%BB%A7%E7%BB%AD%E6%9F%A5%E6%89%BE%E6%9B%B4%E4%B8%8A%E5%B1%82%E5%8E%9F%E5%9E%8B%E9%93%BE%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7" src="http://mockee.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" lk_mediaid="lk_juiceapp_mediaPopup_1236739472534" lk_media="yes">
1. function Point2D(x, y){
2. this.x = x;
3. this.y = y;
4. }
6. Point2D.prototype.x = 0;
7. Point2D.prototype.y = 0;
9. function ColorPoint2D(x, y, c){
10. this.x = x;
11. this.y = y;
12. }
14. ColorPoint2D.prototype = new Point2D();
15. ColorPoint2D.prototype.x = 1;
16. ColorPoint2D.prototype.y = 1;
18. var cp = new ColorPoint2D(10, 20, red);
19. alert(cp.x) //10，先查找 cp 自身属性
20. delete cp.x;
21. alert(cp.x) //1，被删除后查找上层原型属性
22. delete ColorPoint2D.prototype.x;
23. alert(cp.x) //0，删除后继续查找更上层原型链上的属性
function Point2D(x, y){ this.x = x; this.y = y; } Point2D.prototype.x = 0; Point2D.prototype.y = 0; function ColorPoint2D(x, y, c){ this.x = x; this.y = y; } ColorPoint2D.prototype = new Point2D(); ColorPoint2D.prototype.x = 1; ColorPoint2D.prototype.y = 1; var cp = new ColorPoint2D(10, 20, red); alert(cp.x) //10，先查找 cp 自身属性 delete cp.x; alert(cp.x) //1，被删除后查找上层原型属性 delete ColorPoint2D.prototype.x; alert(cp.x) //0，删除后继续查找更上层原型链上的属性

以一个对象为实例，安全地创建大量的实例，这就是 prototype 的真正含义，也是它的价值所在。

但由于 prototype 仅仅是以对象为原型给类型构建副本，因此也具有很大局限性，比如改变某个原型上引用类型的属性的属性值，将会彻底影响到这个类型创建的每一个实例。

总之，prototype 是一种面向对象的机制，它通过原型来管理类型与对象之间的关系，prototype 的特点是能够以某个类型为原型构造大量的对象。
相关阅读:
当开发者产生一个伟大的想法之后应该做的10件事
 PUT 还是 POST ?
Failed to issue method call: Unit mysqld.service failed to load: No such file or directory.
使用 Protocol Buffers 代替 JSON 的五个原因
 Java 打印堆栈的几种方法
 Eclipse调试Java的10个技巧
 如何使用命令查看系统名称？
Feed系统架构资料收集
 dcm4chee 修改默认(0002,0013) ImplementationVersionName
【原创】分布式之数据库和缓存双写一致性方案解析
原文地址：https://www.cnblogs.com/danghuijian/p/4400689.html