Javascript prototype 原型链

论坛 期权论坛     
选择匿名的用户   2021-5-22 22:06   0   0
<p>prototype源自法语,软件界的标准翻译为“原型”,代表事物的初始形态,也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C&#43;&#43;的prototype那种预先声明的概念。 <br> <br>     JavaScript 的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这 个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具有这个“原型”的特性。 事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么说,prototype提供了一 群同类对象共享属性和方法的机制。 <br> <br>     我们先来看看下面的代码: <br>     function Person(name) <br>     { <br>         this.name &#61; name;   //设置对象属性,每个对象各自一份属性数据 <br>     }; <br>     <br>     Person.prototype.SayHello &#61; function() //给Person函数的prototype添加SayHello方法。 <br>     { <br>         alert(&#34;Hello, I&#39;m &#34; &#43; this.name); <br>     } <br> <br>     var BillGates &#61; new Person(&#34;Bill Gates&#34;);   //创建BillGates对象 <br>     var SteveJobs &#61; new Person(&#34;Steve Jobs&#34;);   //创建SteveJobs对象 <br> <br>     BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法 <br>     SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法 <br> <br>     alert(BillGates.SayHello &#61;&#61; SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true <br>     程 序运行的结果表明,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。显然,把方法设置到prototype的写 法显得优雅多了,尽管调用形式没有变,但逻辑上却体现了方法与类的关系,相对前面的写法,更容易理解和组织代码。 <br> <br>     那么,对于多层次类型的构造函数情况又如何呢? <br> <br>     我们再来看下面的代码: <br> 1     function Person(name)   //基类构造函数 <br> 2     { <br> 3         this.name &#61; name; <br> 4     }; <br> 5     <br> 6     Person.prototype.SayHello &#61; function() //给基类构造函数的prototype添加方法 <br> 7     { <br> 8         alert(&#34;Hello, I&#39;m &#34; &#43; this.name); <br> 9     }; <br> 10     <br> 11     function Employee(name, salary) //子类构造函数 <br> 12     { <br> 13         Person.call(this, name);    //调用基类构造函数 <br> 14         this.salary &#61; salary; <br> 15     }; <br> 16     <br> 17     Employee.prototype &#61; new Person(); //建一个基类的对象作为子类原型的原型,这里很有意思 <br> 18     <br> 19     Employee.prototype.ShowMeTheMoney &#61; function() //给子类添构造函数的prototype添加方法 <br> 20     { <br> 21         alert(this.name &#43; &#34; $&#34; &#43; this.salary); <br> 22     }; <br> 23 <br> 24     var BillGates &#61; new Person(&#34;Bill Gates&#34;);   //创建基类Person的BillGates对象 <br> 25     var SteveJobs &#61; new Employee(&#34;Steve Jobs&#34;, 1234);   //创建子类Employee的SteveJobs对象 <br> 26 <br> 27     BillGates.SayHello();       //通过对象直接调用到prototype的方法 <br> 28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法,关注! <br> 29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法 <br> 30 <br> 31     alert(BillGates.SayHello &#61;&#61; SteveJobs.SayHello); //显示:true,表明prototype的方法是共享的 <br>     这段代码的第17行,构造了一个基类的对象,并将其设为子类构造函数的prototype,这是很有意思的。这样做的目的就是为了第28行,通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢? <br> <br>     原 来,在JavaScript中,prototype不但能让对象共享自己财富,而且prototype还有寻根问祖的天性,从而使得先辈们的遗产可以代代 相传。当从一个对象那里读取属性或调用方法时,如果该对象自身不存在这样的属性或方法,就会去自己关联的prototype对象那里寻找;如果 prototype没有,又会去prototype自己关联的前辈prototype那里寻找,直到找到或追溯过程结束为止。 <br> <br>     在 JavaScript内部,对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时,也会同时将构造函数的 prototype对象指派给新创建的对象,成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的,尽管有些浏览器(如Firefox)可以 让我们访问这个内置原型对象,但并不建议这样做。内置的原型对象本身也是对象,也有自己关联的原型对象,这样就形成
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP