`
keron
  • 浏览: 30942 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

javascript prototype介绍的文章

阅读更多

JavaScript是基于对象的,任何元素都可以看成对象。然而,类型和对象是不同的。本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型。毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的。
网上对于prototype的文章很多,一直没明白核心的思想。最后写了很多例子代码后才明白:prototype只能用在类型上。
以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系:
 
  例子代码 说明
1 Object.prototype.Property = 1;
Object.prototype.Method = function ()
{
    alert(1);
}
 
var obj = new Object();
alert(obj.Property);
obj.Method();

可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。

JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
2 var obj = new Object();
obj.prototype.Property = 1; //Error
//Error
obj.prototype.Method = function()
{
    alert(1);
}

在实例上不能使用prototype,否则发生编译错误
3 Object.Property = 1;
Object.Method = function()
{
    alert(1);
}
 
alert(Object.Property);
Object.Method();

可以为类型定义“静态”的属性和方法,直接在类型上调用即可
4 Object.Property = 1;
Object.Method = function()
{
    alert(1);
}
var obj = new Object();
alert(obj.Property); //Error
obj.Method(); //Error

实例不能调用类型的静态属性或方法,否则发生对象未定义的错误。
5 function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();

这个例子演示了通常的在JavaScript中定义一个类型的方法
6 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();

可以在外部使用prototype为自定义的类型添加属性和方法。
7 function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
Aclass.prototype.Property = 2;
Aclass.prototype.Method = function
{
    alert(2);
}
var obj = new Aclass();
alert(obj.Property);
obj.Method();

 在外部不能通过prototype改变自定义类型的属性或方法。
该例子可以看到:调用的属性和方法仍是最初定义的结果。
8 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();

可以在对象上改变属性。(这个是肯定的)
也可以在对象上改变方法。(和普遍的面向对象的概念不同)
9 function Aclass()
{
this.Property = 1;
this.Method = function()
{
    alert(1);
}
}
var obj = new Aclass();
obj.Property2 = 2;
obj.Method2 = function()
{
    alert(2);
}
alert(obj.Property2);
obj.Method2();

可以在对象上增加属性或方法
10 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();

 这个例子说明了一个类型如何从另一个类型继承。
11 function AClass()
{
       this.Property = 1;
       this.Method = function()
       {
              alert(1);
       }
}
 
function AClass2()
{
       this.Property2 = 2;
       this.Method2 = function()
       {
              alert(2);
       }
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function()
{
       alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method(); 这个例子说明了子类如何重写父类的属性或方法。

 
   以上例子中,关于通过类型实现重用方面,重要的有:
·例子1:JavaScript中允许添加行为的类型
·例子2:prototype使用的限制
·例子3:如何定义类型上的静态成员
·例子7:prototype在重定义类型的成员上的限制
·例子10:如何让一个类型继承于另一个类型
·例子11:如何在子类中重新定义父类的成员
  
可见JavaScript能够实现的面向对象的特征有:
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/czh_friend/archive/2007/04/16/1566319.aspx

分享到:
评论

相关推荐

    Prototype学习笔记(一)(二)

    在本篇文章中,我们将详细阐述Prototype的核心概念、作用以及如何在实际编程中应用。 首先,Prototype是JavaScript中的一个内置属性,它连接了对象与其构造函数之间的关系。每个函数都有一个prototype属性,这个...

    prototype.js 说明文档.doc

    在学习Prototype时,可以参考高级JavaScript指南等关联文章,以深入理解JavaScript的基础知识和高级特性,这将有助于更好地利用Prototype库。 1.3. 通用性方法 Prototype.js提供了一系列预定义的通用方法,旨在减少...

    prototype开发笔记.doc

    Prototype 是一个广泛使用的JavaScript库,由Sam Stephenson创建,旨在简化和增强JavaScript的原生功能,特别是对于构建富客户端Web应用程序。它通过提供强大的对象扩展、DOM操作、以及Ajax交互等工具,使得开发者...

    prototype.js手册

    prototype.js是什么? 万一你没有使用过... 相关文章 Advanced JavaScript guide. 一些实用的函数 这个类库带有很多预定义的对象和实用函数,这些东东的目的显然是把你从一些重复的打字中解放出来 。

    javascript面向对象之共享成员属性与方法及prototype关键字用法.docx

    本篇文章将深入探讨JavaScript中如何通过`prototype`关键字实现共享成员属性与方法,并分析其原理与使用技巧。 #### 二、`prototype`关键字简介 在JavaScript中,每一个函数都有一个`prototype`属性,该属性是一个...

    prototype1.4旧中文版

    prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高的...

    常用JS大全,Javascript技术文章

    理解`new`关键字、`this`指向、原型(`__proto__`和`prototype`)以及闭包对于深入学习JavaScript至关重要。 3. **异步编程**:JavaScript 是单线程的,但通过事件循环和回调函数、Promise、async/await等机制实现...

    JS Ajax XML 处理 (prototype)

    本篇文章将深入探讨如何在Prototype中处理XML数据,以及相关的源码分析。** **一、Prototype库中的Ajax基础** Prototype是一个流行的JavaScript库,它为JavaScript提供了许多实用的工具和扩展,包括Ajax功能。在...

    JavaScript中的prototype原型学习指南

    JavaScript中的prototype原型学习指南主要涵盖了JavaScript语言中一个核心概念——原型(prototype)。原型是理解JavaScript继承机制的关键,它涉及到原型链、原型对象、函数的prototype属性以及__proto__属性等。 ...

    Litebox 无刷新图片放大显示插件(Prototype)

    Litebox是一款基于Prototype JavaScript库的无刷新图片放大显示插件,它允许用户在网页上预览图片时无需离开当前页面,提供了一种便捷且用户体验良好的图片查看方式。这个插件的核心理念是通过JavaScript动态创建一...

    javascript经典特效---多篇文章的处理.rar

    3. **排序功能**:JavaScript的`Array.prototype.sort()`函数可以对文章数组进行排序。例如,按标题排序: ```javascript articles.sort((a, b) => a.title.localeCompare(b.title)); ``` 4. **搜索功能**:可以...

    Javascript面向对象编程.

    这篇博客文章可能详细讨论了如何在JavaScript中实现面向对象编程。 在JavaScript中,面向对象主要通过以下三种方式实现: 1. **构造函数(Constructor)**:构造函数是一种特殊的函数,用于创建和初始化对象。我们...

    Prototype 1.6.0.3中文参考手册chm.rar

    开始的时候不过是想学一个 JavaScript 的开发框架,在 Prototype 和 jQuery 之间犹豫了许久,后来选中了 Prototype,原因是 Prototype 显得更复杂:)并且全面。在我的思维中,由复杂到简单,那简单的那一份大致相当...

    ProtoType-Demo.rar

    ProtoType是一个JavaScript库,它扩展了JavaScript的基本对象,并提供了强大的DOM操作、事件处理以及 AJAX 功能,使得JavaScript编程更加简洁高效。RAR是一种常见的文件压缩格式,用于打包多个文件或目录为一个单一...

    JavaScript server 简单入门

    我们还需要创建一个 posts 子文件夹,用于存放博客文章。 修改 index.html 页面 最后,我们需要修改 index.html 页面以显示发表的内容。我们需要将它重命名为“blog.html”,然后更新页面的标题和页头。我们还需要...

    AJAX篇(一) <Prototype>

    "AJAX篇(一) &lt;Prototype&gt;" 这个标题表明我们将探讨的是AJAX技术的一个系列文章的第一部分,重点是Prototype这个JavaScript库。Prototype是一个流行的JavaScript框架,它为开发人员提供了处理AJAX请求、DOM操作、...

    prototype.js开发笔记

    这篇文章可能会介绍更多的 JavaScript 高级概念和技术细节,帮助开发者更好地理解 Prototype.js 的设计原理和使用技巧。 #### 1.3 通用性方法 - **$() 方法**:这是一个非常实用的方法,用于获取 DOM 元素。相比于...

    javaScript语句大全2015

    本篇文章将深入探讨2015年JavaScript中的关键语句,帮助开发者掌握这一时期的JavaScript核心技术。 首先,我们要理解JavaScript的基础——变量声明。在2015年的JavaScript中,`var`关键字被广泛用于声明变量,但`...

    JavaScript实现继承的几种方式

    本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被...

    javascript 面向对象程序设计博客文章

    JavaScript是一种广泛应用于Web开发的动态编程语言,尤其以其强大的面向对象特性著称。面向对象程序设计(Object-Oriented Programming,简称OOP)是软件工程中的一个重要概念,它通过类和对象来组织代码,实现数据...

Global site tag (gtag.js) - Google Analytics