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

上一篇:Mysql根据指定字段的int值查出在当前列表的排名


下一篇:Emoji表情符号兼容方案(适用ios,android,wp等平台)