转载自:http://blog.csdn.net/chaojie2009/article/details/6719353(也是转载的。鄙视一下此人转载不著名出处。)

注意:必须带着怀疑的态度去看这篇文章,里面部分描述有些微问题。顺便要看看评论。
ps:可以把prototype当作一个成员变量,思考js语法的特性造成的搜索成员的顺序.


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)

4楼 lvzhuyiyi4 2012-07-18 13:23发表 [回复]
第7个例子,
在外部不能通过prototype改变自定义类型的属性或方法。这个好像写错了,不是不能,而是obj.Method();
它是先在自己找有没有这个方法,如果有,就执行,如果没有就到prototype中去找。
不能,表述上像是禁止,但这段程序没有报错!其实是优先级问题!
3楼 tongkaihong 2012-04-11 20:45发表 [回复]
第十条貌似有点儿问题。
AClass2.prototype = new AClass();之后貌似应该加上:
AClass2.prototype.constructor = AClass2;
2楼 foreal3 2012-02-21 14:23发表 [回复] [引用] [举报]
例子挺好的,不过
第七条说的我感觉不是很准确,虽然对,但是容易给人造成误解
“在外部不能通过prototype改变自定义类型的属性或方法。” 其实内部自定义类型的属性或方法 和 prototype自定义类型的属性或方法就是两个东西,只是调用的时候选先在内部自定义中的寻找而已。
Re: xiaoxinmiao 2012-03-27 16:11发表 [回复]
回复foreal3:如果你认为是2个东西的话 怎么解释第6条呢

(转)js prototype 详解的更多相关文章

  1. [转] js prototype详解

    JavaScript能够实现的面向对象的特征有:·公有属性(public field)·公有方法(public Method)·私有属性(private field)·私有方法(private fie ...

  2. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  3. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  4. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  5. JS 面向对象详解

    面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 值得收藏的js原型详解

    从虚无到Object 起初,地是空虚混沌,渊面黑暗:这时候一切还是null 神说,要有原型,于是就有了prototype 原型从凭空产生,于是需要一个指向于null的特征,人们把这种特征叫做隐式原型, ...

  7. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  8. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  9. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

随机推荐

  1. 从Android Handler内部类到WeakReference的知识关联

    Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...

  2. [Python笔记][第三章Python选择与循环]

    1月28日学习 Python选择与循环 选择结构 多分枝选择结构 if 表达式 1: 语句块 1 elif 表达式 2: 语句块 2 elif 表达式 3: 语句块 3 ... else : 语句块 ...

  3. margin四个属性的顺序

    margin-top ,margin-right ,margin-bottom ,margin-left .方向为 上右下左,顺时针方向, 值可以是: 百分比(基于父对象总高度或宽度的百分比) 长度值 ...

  4. WinForm设置控件焦点(转)

    http://blog.csdn.net/zlwzlwzlw/article/details/8573921 winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种方法: ...

  5. delphi按钮控件的default属性

    delphi按钮控件的default属性用于设置默认命令按钮,.设置为true时,按[Enter键]相当于用鼠标单击了该按钮 .窗口中如果有多个按钮的default是true的话,就根据tabinde ...

  6. AdapterView及其子类之四:基于ListView及SimpleAdapter实现列表

    代码请见SimpleAdapterDemo.zip. 步骤如下: 1.创建主布局文件 <RelativeLayout xmlns:android="http://schemas.and ...

  7. 喷水装置(一)--nyoj题目6

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它为中 ...

  8. Square Coins(母函数)

    Square Coins 点我 Problem Description People in Silverland use square coins. Not only they have square ...

  9. IIS搭建的http文件服务器

    使用C#WebClient类访问(上传/下载/删除/列出文件目录)由IIS搭建的http文件服务器 前言 为什么要写这边博文呢?其实,就是使用C#WebClient类访问由IIS搭建的http文件服务 ...

  10. Java Script to Read, Write, and Delete cookies

    function writeCookie(name,value,days){ var expires = ""; if(days){ var date = new Date(); ...