《王者归来》读书笔记 ── 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代码

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；

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

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代码

delete p2.x;
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">

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

//定义一个多边形类型
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 的值发生了改变

//定义一个多边形类型 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代码

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 快得多
}

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">

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，删除后继续查找更上层原型链上的属性

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 的特点是能够以某个类型为原型构造大量的对象。