javaScript中的原型解析【推荐】_javascript技巧

1、javascript中的原型解析【推荐】最近在学习javascript,学习到js面向对彖中的原型时，感悟颇多。若有不对 的地方，希望可以指正。js作为一门面向对象的语言，自然也拥冇了继承这一概念，但js中没冇类的概 念，也就没有了类似于ja腹中的extends,所以，我觉得js中的继承主要依赖 于js中的原型(链)。那么，原型是什么呢？我们知道js中函数亦是一种对彖，当我们创建一个函数 吋，其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原 型属性，他是一个指针，指向了这个函数的原型对象，这个原型对象冇一个默认 的屈性叫做constructor,这个屈型指向了拥有pr

2、otptypc屈型的函数。function person() person. prototype= / constructor:person;first name:guo7',haircolor: /zblack/z,city:zhengzhou",act:function() alert(z，eatling") ;；以这个为例，我们先创建了一个函数person,这个函数默认的冇一个屈性 prototype,指向person, propttype这个对象,这个对彖冇一个默认的屈性 constructor () , person, prototype, constru

3、ctor>person.(其实此处默认的是指向object,后面会做指正)当我们通过构造函数创建了实例后会怎么样呢？function person() person, prototype!f irst_name:，zguoz，,hair_color: z，blackz，,city:"zhcngzhou",act:function() alert("eatting") ;；var boy=new person();var girl二new person();在这时，我们要知道，js屮的构造函数与函数的区别便是这个new关键字，使 用new操作符的函数

4、便是一个构造函数。当我们创建了 person的实例对象把它 保存在boy, girl时，这两个实例对象会生成一个默认的屈性叫做_proto_ (在 ecmascript5中可用prototype表示)，这个属型指向了构造函数的原型对 象，也就是boy. _proto_ >person. prototype (与构造函数毫无关系)。此 时,boy或者girl可以通过点来调用原型对象中的属型,此吋要知道，boy, girl 共享了原型对象的属型。我们口j以通过isprotptypeof ()或者object. gctprototypeof ()(这个函数的返回值为原型对象，也就是_proto

5、_的值) 来验证上述结论。alert(person. prototype, isprototypeof(boy); /truealert(object getprototypeof(boy). first_name);/"guo"此时，我们可以再做进一步验证，若在实例屮创建了一个与原型对彖屈性重名的 屈性会怎么样呢？var boy二new person ();var girl二new person();boy. h3ir_color二red"alert (boy. hair_color) ; /redalert (gir1. haircolor) ; /black

6、alert(object. getprototypeof(boy). hair color); /black由此可见，实例中声明的重名属性会屏蔽的原型对象中的属性，但也仅仅时覆盖, 不会对原型对彖的属型造成影响(object. getprototypeof (boy). hair_color=black)，也不会对jt他共享原型 对象属型的实例对象产生影响(girl. hair_color=black) 0与此同时，可以使用 delete操作符删除实例对象声明的属性来撤销掉屏蔽效果。我们可以使用 hasownpropertyo验证一个属型是存在于实例的(true),还是存在于原型对 象的(fa

7、lse) o alert(boy.hasownproperty(hair_color)； /true可以使用object. keys()来枚举属性。var kcy=objcct keys(person. prototype);alert (key);学习了这些，我们会发现，使用上面的写法来声明原型对象会出现一个问题， constructor不再指向person 了，这与我们说的原型对象的constructor属性 默认指向含prototype属性的函数背道而驰，这是因为：每创建一个函数会自 动创建一个prototype对象，这个对象会默认创建constructor。所以，此处我 们的本质是对默

8、认的prototype进行了重写，因此新的consrtuctor也变成了指 向object函数，不再指向person函数。若constructor真的很重要，那么需要 写上 constructor: person.z后，我们需要知道原型的动态性，改变原型对彖中的属性会反应到实例中，不 管实例的创建在原型对象的属型改变前面或者后面function pcrson() person. prototype=first_name:guo，hair_color:city:zhengzhou",act: function() alert (z，catting); ;var boy二new pers

9、on();person, prototype. hobby二basketbal1;var girl二new pcrsono ; alert (boy. hobby); /basketball上面这段性码可见，即使对原型对象属性的修改发生在实例创建的后面，boy实 例亦然共享了 person, prototype, hobby.但是，这种情况仅仅发生在原型对象属型的修改，当对原型对象属性进行完全重 写时，实例的创建必须放在原型对彖屈性重写的后而，否则会出错。function person() var girl二new person();person, prototype first_name:g

10、uo， hair_color:，zblackz，, city:"zhengzhou", act:function() alert (/zeatting)； ;var boy=new persono ;person, prototype, hobby二basketball"alert(boy. hobby) ; /basketbal1 alert(girl, first_nomc); /undefined再回到“屏蔽”这一问题上，我们前而了解到了创建实例对彖的屈性(与原型对 彖中的某一属性重名)会屏蔽掉原型对象的该属性，但不影响其他实例对象。这 里冇一个错误，这个情

11、况只适用于基本数据类型，当屈性的值引用类型时，会出 现一个大问题，看如下代码。function person() person. prototypc= f irst_name:，zguoz，, hair_color:，zblack/z, friends:"nick, "john", city: z，zhe ngzhou", act: function () alert (zzeatting);var boy=new person();boy.friends. push("mike"); var girl二new pcrsono ;al

12、ert (boy. friends); /nick, john, mikealert (girl, friends); /nick, john, mike可见，上面这句话不适用了，原因是friends是存在于原型对象中的，而不是 boy中，所以他的修改会影响到这个环境。(我们口j以通过boy. frindes二来创 建一个boy实例的屈性)那么，我们就需要引入组合使用构造函数模式与原型模 式。function person(hair_color, city)this.hair color=hair color;this. city=city;this. friends=/，john，/, &q

13、uot;nick" person. prototype= construetor:person，first_name:guo,act:function() al ert(eatting)；;var boy二new person (blnckzhengzhou"); var girl二new person(:red，shenyang)； boy. friends, push("nick");alert(girl, fricnds);alert(boy. friends);该模式是目前ecmascript屮使用最广泛，认同最高的创建自定义类型的方法， 甚至可以作为一种默认模式。但