`
和谐是美
  • 浏览: 49610 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript prototype 学习

阅读更多

function User(name){
   this.name=name;
}
User.prototype.display = function(){
   alert("User's name is:"+this.name);
}
var me = new User("test");
me.display();

JavaScript能够实现的面向对象的特征有:
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)


例子一(JavaScript中允许添加行为的类型): 可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

Js代码
  1. <script type= "text/javascript" >   
  2. Object.prototype.Property = 1;   
  3. Object.prototype.Method =  function  ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. var  obj =  new  Object();   
  9. alert(obj.Property);   
  10. obj.Method();   
  11. </script>   
  12.           
<script type="text/javascript">
Object.prototype.Property = 1;
Object.prototype.Method = function ()
{
    alert(1);
}
 
var obj = new Object();
alert(obj.Property);
obj.Method();
</script>

  例子二(prototype使用的限制): 在实例上不能使用prototype,否则发生编译错误

Js代码
  1. <script type= "text/javascript" >   
  2. var  obj =  new  Object();   
  3. obj.prototype.Property = 1;  //Error   
  4. //Error   
  5. obj.prototype.Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. </script>   
  10.           
<script type="text/javascript">
var obj = new Object();
obj.prototype.Property = 1; //Error
//Error
obj.prototype.Method = function()
{
    alert(1);
}
</script>

  例子三(如何定义类型上的静态成员): 可以为类型定义“静态”的属性和方法,直接在类型上调用即可

Js代码
  1. <script type= "text/javascript" >   
  2. Object.Property = 1;   
  3. Object.Method =  function ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. alert(Object.Property);   
  9. Object.Method();   
  10. </script>   
  11.           
<script type="text/javascript">
Object.Property = 1;
Object.Method = function()
{
    alert(1);
}
 
alert(Object.Property);
Object.Method();
</script>

  例子五(): 这个例子演示了通常的在JavaScript中定义一个类型的方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. alert(obj.Property);   
  12. obj.Method();   
  13. </script>  
<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();
</script>

  例子六(JavaScript中允许添加行为的类型): 可以在外部使用prototype为自定义的类型添加属性和方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. Aclass.prototype.Property2 = 2;   
  11. Aclass.prototype.Method2 =  function   
  12. {   
  13.     alert(2);   
  14. }   
  15. var  obj =  new  Aclass();   
  16. alert(obj.Property2);   
  17. obj.Method2();   
  18. </script>   
  19.       
<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
Aclass.prototype.Property2 = 2;
Aclass.prototype.Method2 = function
{
    alert(2);
}
var obj = new Aclass();
alert(obj.Property2);
obj.Method2();
</script>

  例子八(): 可以在对象上改变属性。(这个是肯定的)也可以在对象上改变方法。(和普遍的面向对象的概念不同)

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>  
<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
    alert(2);
}
alert(obj.Property);
obj.Method();
</script>

  例子九(): 可以在对象上增加属性或方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>   
  19.           
<script type="text/javascript">
function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
    alert(2);
}
alert(obj.Property);
obj.Method();
</script>

  例子十(如何让一个类型继承于另一个类型): 这个例子说明了一个类型如何从另一个类型继承。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20.     
  21. var  obj =  new  AClass2();   
  22. alert(obj.Property);   
  23. obj.Method();   
  24. alert(obj.Property2);   
  25. obj.Method2();   
  26. </script>   
  27.           
<script type="text/javascript">
function AClass()
{
       this.Property = 1;
       this.Method = function()
       {
              alert(1);
       }
}
 
function AClass2()
{
       this.Property2 = 2;
       this.Method2 = function()
       {
              alert(2);
       }
}
AClass2.prototype = new AClass();
 
var obj = new AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2();
</script>

  例子十一(如何在子类中重新定义父类的成员): 这个例子说明了子类如何重写父类的属性或方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20. AClass2.prototype.Property = 3;   
  21. AClass2.prototype.Method =  function ()   
  22. {   
  23.        alert(4);   
  24. }   
  25. var  obj =  new  AClass2();   
  26. alert(obj.Property);   
  27. obj.Method();   
  28. </script>

 

分享到:
评论

相关推荐

    javascript类库prototype.js

    《Prototype.js:构建富客户端页面的关键工具》 Prototype.js 是一个强大的JavaScript类库,它为开发者提供...通过学习和掌握Prototype.js,开发者可以更好地应对复杂的前端项目,打造更具交互性和用户体验的Web应用。

    javascript prototype文档.rar

    在这个“javascript prototype文档”中,我们可以期待深入学习JavaScript原型的基本原理及其在实际编程中的应用。 首先,文档可能会解释什么是原型。在JavaScript中,每个函数都有一个`prototype`属性,这个属性是...

    Advanced JavaScript (closures,prototype,inheritance)

    JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...

    JavaScript_Prototype(源代码+中文手册).rar

    这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册,为学习和理解这一主题提供了丰富的资源。 JavaScript是一种动态类型的语言,其核心特性之一就是原型...

    Prototype学习笔记(一)(二)

    Prototype学习笔记(一)(二)涵盖了这一主题的深入探讨,旨在帮助开发者更好地理解和利用这个特性。在本篇文章中,我们将详细阐述Prototype的核心概念、作用以及如何在实际编程中应用。 首先,Prototype是...

    Prototype

    5. **文档支持**:Prototype.chm 文件是官方提供的离线帮助文档,包含了详细的API说明和使用示例,便于开发者查阅和学习。 总的来说,Prototype 是JavaScript开发的一个强大工具,它通过简洁的语法和丰富的功能,...

    javascript Prototype 对象扩展.docx

    通过本文的学习,我们深入了解了如何使用`prototype`来优化对象方法的存储,并学习了对象扩展和反射的基本原理及实际应用场景。这些技术不仅有助于提高代码的可维护性和性能,还能帮助我们在处理复杂数据结构时更加...

    Prototype_1.6 JavaScript代码和中文帮助手册

     prototype.js不仅是一个有很大实用价值的js库,而且有很高的学习价值。  ---  在prototype.js中,prototype对象是实现面向对象的一个重要机制。  每个函数就是一个对象(Function),函数对象都有一个子...

    Prototype.js学习从简单开始

    ### Prototype.js学习从简单开始:元素定位与DOM操作 #### 引言 随着Web开发的不断进化,Ajax技术成为提升用户体验的重要工具。Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了...

    Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools

    《Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools》是关于JavaScript框架的高级编程资源,包含了各种知名框架的源代码,这些框架包括Prototype、YUI(Yahoo! User Interface Library...

    JavaScript prototype属性详解

    JavaScript中的`prototype`属性是面向对象编程的关键特性之一,它关联了函数(特别是构造函数)与实例之间的继承关系。...理解并掌握`prototype`的工作原理是深入学习JavaScript面向对象编程的基础。

    prototype学习笔记

    在JavaScript中,`prototype`是一个核心...总的来说,这篇"prototype学习笔记"深入讲解了JavaScript中的原型和继承机制,结合源码分析和实用工具,帮助开发者更全面地掌握这一核心概念,并能够在实际项目中灵活运用。

    jQuery、Mootools、Prototype三大JavaScript框架中文手册

    JavaScript是Web开发中不可或缺的一部分,它为网页添加了动态交互性。然而,原生JavaScript的API庞大且不统一,为了简化开发,社区创造...学习和理解这些框架,可以提升开发效率,让JavaScript编程变得更加高效和愉快。

    prototype.js javaScript插件

    **JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言...不过要注意,随着现代前端框架的兴起,像React、Vue、Angular等,Prototype.js的使用逐渐减少,但它的设计理念和模式仍然值得学习和借鉴。

    了解JavaScript中的prototype (实例)

    JavaScript中的`prototype`是理解面向对象编程的关键概念之一。它是一种机制,允许对象共享属性和方法,从而实现代码复用。...理解`prototype`以及相关的原型链、继承和对象创建方式,对于深入学习JavaScript至关重要。

    深入学习JavaScript中的原型prototype

    javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下: 1.函数是first class object, 也就是说函数与对象具有相同的语言地位 2.没有...

    JavaScript中的prototype原型学习指南

    Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。 这句话根据前面所说的,...

    Prototype整理的学习资料

    这个压缩包中的"Prototype学习笔记.doc"很可能是对Prototype模式深入理解的详细文档。下面将从Prototype设计模式的基本概念、在JavaScript中的应用、与Ajax的关系以及如何与其他技术如Java和JavaScript库交互等方面...

    prototype_oop_javascript_ruby_prototype_

    标题 "prototype_oop_javascript_ruby_prototype_" 暗示了我们将探讨的是关于原型(Prototype)面向对象编程(Object-Oriented Programming, OOP)的概念,主要关注JavaScript和Ruby这两种语言之间的相似性和差异性...

Global site tag (gtag.js) - Google Analytics