转载自: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. Elasticlunr.js 简单介绍

    Elasticlunr.js 项目地址:http://elasticlunr.com/ 代码地址:https://github.com/weixsong/elasticlunr.js 文档地址:htt ...

  2. Android设备定制为永不锁屏

    Android系统的锁屏时间存放在Setting数据库中,字段为Settings.System.SCREEN_OFF_TIMEOUT.查看 DatabaseHelper.java文件可以找到: fra ...

  3. java学习笔记day06---匿名内部类

    1.匿名内部类:其实就是内部类的简化形式,它所体现的就是一个类或者接口的子类对象.前提:     内部类必须继承或实现外部类或接口. 格式:    new 父类&接口(){};    其实就是 ...

  4. Velocity.js发布:更快的动画切换速度

    Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...

  5. Unity Layout碰撞检测

    第一次看到LayerMask根本不知道是什么东东,后来问问度娘,看了几篇文章,终于看明白一点点,在网上看到各路大神的解释,终于明白了,LayerMask实际上是一个位码操作,在Unity3d中Laye ...

  6. Mac系统杂项 (持续更新)

    一.调整LaunchPad的图标显示列数和行数 .调整每一列显示图标数量.在我的电脑上(1366 * 768),每列7个个人觉得比较不错 defaults write com.apple.dock s ...

  7. core-site.xml配置项:hadoop.tmp.dir

    hadoop.tmp.dir:A base for other temporary directories. 集群运行后,修改该配置项后,发现类似错误: -- ::, INFO org.apache. ...

  8. HDU 1070 - Milk

    给每种牛奶价格和量 要求买最便宜的牛奶 #include <iostream> using namespace std; int t,n; ][]; ],v[]; int main() { ...

  9. javaSE读取Properties文件的六种方法

    使用JavaSEAPI读取Properties文件的六种方法 1.使用java.util.Properties类的load()方法 示例:InputStreamin=lnewBufferedInput ...

  10. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...