JavaScript 笔记 ( Prototype )

这阵子实在好忙 ( 这样说好像也不是一两个月了... )，然后因为工作伙伴都是 JavaScript 神之等级的工程师，从中也学到不少知识，毕竟就是要和强者工作才会成长呀！为了想好好瞭解他们写的程式码，所以就只好深入来理解一下 JavaScript 里头 Prototype 这个恼人的「原型」，在两年前我有去上保哥 ( http://blog.miniasp.com/ ) 的 JavaScript，以自己当年的程度，加上工作上没有真正的实战机会，真的是听完就忘了，随著年纪增长，现在回头再来看才发现真是满有趣的，打铁趁热趁著搞懂了，赶快做个笔记。

JavaScript 裡面所有物件都具有 Prototype 这个原型物件，但只有函式物件才有公开的原型物件，其他的物件都只有私有的原型物件，凡是原型物件裡面的属性或方法，都会直接继承到它的实体物件上头，这实在是讲得很绕口，白话一点来说，就是我们每个人都具备「人类」这个 Prototype，而「人类」这个原型，具备了「用双脚行走」、「可以用嘴讲话」...等行为 ( 也就是方法 Method )，但对于每个人来说，各自有各自的属性，例如「姓名」、「肤色」...等，这大概就是物件与其 Prototype 的关系。

好像比较理解了，现在就直接用程式码来看看：

/* 一开始我们先定义一个函式物件 people，也就是如果一个人诞生的时候， 他会有「名字 name」的属性和「皮肤 skin」的属性。 */

function people(n,s){   this.name = n;   this.skin = s; }

/* 接著我们来定义 human 这个原型物件，因为 people 是人类 human， 所以人类会具备 walk 走路、eat 吃东西和 scratch 抓痒这些行为， 这些人类开始这些行为的时候，我们用 console 给印出来。 */

var human = {  walk : function(){     console.log(this.name + ' 在走路');   },  eat : function(){    console.log(this.name + ' 在吃东西');  },  scratch : function(){    console.log(this.name + ' 抓自己的' + this.skin + '皮肤');  } };

/* 然后我们把 human 这个原型物件绑定到 people 上头， 这里使用目前标准的写法 Object.create。 */

people.prototype = Object.create(human);

/* 最后我们开始生小孩了，首先生出一个 tom ( 使用 new people 很贴切 )， 名字叫做 Tom，皮肤是白色的，另外一个小孩叫做 Bill，皮肤是黑色的，Cherry 皮肤是黄色的。 */

var tom = new people('Tom','白色'); var bill = new people('Bill','黑色'); var cherry = new people('Cherry','黄色');

/* 生小孩之后，小孩长大了，Tom 开始走路，Bill 抓痒，Cherry 在吃东西。 */

tom.walk(); bill.scratch(); cherry.eat();

/* 所以执行起来结果就是： > Tom 在走路 > Bill 抓自己的黑色皮肤 > Cherry 在吃东西 */ 完整程式码：javascript-prototype-demo01.html

使用 Prototype 的好处，最主要就是可以定义一些共用的方法，而这些定义在记忆体当中也只会存一份，因为当我们每次 new 一个物件的时候，物件裡所有的属性都会被 new 一份出来，但原型继承就不会，因为是「继承」的概念，所以就是大家共用一份 ( 不会说我和你都是人类，但是你我的行为却大不相同，就像不会有人用屁股吃饭用嘴巴拉屎 XD )

当然，当一个物件 new 出来之后，就可以自己添加自己的属性，就像每个人的发展际遇、学历、兴趣都不同，这些就是看物件各自的属性去做添加设定。

最后来写一个可以用按钮控制区域颜色的 API 吧！这里我做一个 box，box 的原型是 boxDiv，boxDiv 具备了变红色、变蓝色、变大和变小四种方法，而 box 本身有一个属性 name，这个 name 就是读取有这个 id 的 div。( 完整程式码：javascript-prototype-demo02.html )

function box(n){   this.name = document.getElementById(n); }

var boxDiv = {  red : function(){     this.name.style.background = '#f00';   },  blue : function(){ http://www.90168.org/  this.name.style.background = '#00f';  },  big : function(){     this.name.style.width = '100px';     this.name.style.height = '100px';  },  small : function(){     this.name.style.width = '20px';     this.name.style.height = '20px';  } };

box.prototype = Object.create(boxDiv);

var b = new box('area');

document.getElementById('r').addEventListener('click',function(){   b.red(); }); document.getElementById('b').addEventListener('click',function(){   b.blue(); }); document.getElementById('big').addEventListener('click',function(){   b.big(); }); document.getElementById('small').addEventListener('click',function(){   b.small(); });

以上就是我理解 Prototype 的一些心得，用人类的角度去思考，就会变得很容易理解了 :D