javascript

悟透JavaScript

Posted on 2008-02-25 13:32 李战阅读(26130) 评论(249) 编辑收藏所属分类: 软件思想

引子

    编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

    数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总想改变这个世界。

   你看，数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的，如果没有代码来施加外力，她总保持自己原来的状态。而代码就象能量，他存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下，数据可以转变为代码，而代码却又有可能被转变为数据，或许还存在一个类似E=MC2形式的数码转换方程呢。然而，就是在数据和代码间这种即矛盾又统一的运转中，总能体现出计算机世界的规律，这些规律正是我们编写的程序逻辑。

    不过，由于不同程序员有着不同的世界观，这些数据和代码看起来也就不尽相同。于是，不同世界观的程序员们运用各自的方法论，推动着编程世界的进化和发展。

    众所周知，当今最流行的编程思想莫过于面向对象编程的思想。为什么面向对象的思想能迅速风靡编程世界呢？因为面向对象的思想首次把数据和代码结合成统一体，并以一个简单的对象概念呈现给编程者。这一下子就将原来那些杂乱的算法与子程序，以及纠缠不清的复杂数据结构，划分成清晰而有序的对象结构，从而理清了数据与代码在我们心中那团乱麻般的结。我们又可以有一个更清晰的思维，在另一个思想高度上去探索更加浩瀚的编程世界了。

    在五祖弘忍讲授完《对象真经》之后的一天，他对众弟子们说：“经已讲完，想必尔等应该有所感悟，请各自写个偈子来看”。大弟子神秀是被大家公认为悟性最高的师兄，他的偈子写道：“身是对象树，心如类般明。朝朝勤拂拭，莫让惹尘埃！”。此偈一出，立即引起师兄弟们的轰动，大家都说写得太好了。只有火头僧慧能看后，轻轻地叹了口气，又随手在墙上写道：“对象本无根，类型亦无形。本来无一物，何处惹尘埃？”。然后摇了摇头，扬长而去。大家看了慧能的偈子都说：“写的什么乱七八糟的啊，看不懂”。师父弘忍看了神秀的诗偈也点头称赞，再看慧能的诗偈之后默然摇头。就在当天夜里，弘忍却悄悄把慧能叫到自己的禅房，将珍藏多年的软件真经传授于他，然后让他趁着月色连夜逃走...

    后来，慧能果然不负师父厚望，在南方开创了禅宗另一个广阔的天空。而慧能当年带走的软件真经中就有一本是《JavaScript真经》！

回归简单

    要理解JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。

    JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。这就好比中国古典的朴素唯物思想，把世界最基本的元素归为金木水火土，其他复杂的物质都是由这五种基本元素组成。

    JavaScript中的代码只体现为一种形式，就是function。

    注意：以上单词都是小写的，不要和Number, String, Object, Function等JavaScript内置函数混淆了。要知道，JavaScript语言是区分大小写的呀!

    任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种，也就typeof返回值表明的类型。除此之外没有其他类型了。

    先说说简单数据类型吧。

    undefined:   代表一切未知的事物，啥都没有，无法想象，代码也就更无法去处理了。
                      注意：typeof(undefined) 返回也是 undefined。
                              可以将undefined赋值给任何变量或属性，但并不意味了清除了该变量，反而会因此多了一个属性。

    null:            有那么一个概念，但没有东西。无中似有，有中还无。虽难以想象，但已经可以用代码来处理了。
                      注意：typeof(null)返回object，但null并非object，具有null值的变量也并非object。

    boolean:      是就是，非就非，没有疑义。对就对，错就错，绝对明确。既能被代码处理，也可以控制代码的流程。

    number:      线性的事物，大小和次序分明，多而不乱。便于代码进行批量处理，也控制代码的迭代和循环等。
                      注意：typeof(NaN)和typeof(Infinity)都返回number 。
                              NaN参与任何数值计算的结构都是NaN，而且 NaN != NaN 。
                              Infinity / Infinity = NaN 。

    string:         面向人类的理性事物，而不是机器信号。人机信息沟通，代码据此理解人的意图等等，都靠它了。

     简单类型都不是对象，JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。

    所谓“对象化”，就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力。

没有类

    object就是对象的类型。在JavaScript中不管多么复杂的数据和代码，都可以组织成object形式的对象。

    但JavaScript却没有 “类”的概念！

    对于许多面向对象的程序员来说，这恐怕是JavaScript中最难以理解的地方。是啊，几乎任何讲面向对象的书中，第一个要讲的就是“类”的概念，这可是面向对象的支柱。这突然没有了“类”，我们就象一下子没了精神支柱，感到六神无主。看来，要放下对象和类，达到“对象本无根，类型亦无形”的境界确实是件不容易的事情啊。

    这样，我们先来看一段JavaScript程序：

    这段JavaScript程序一开始产生了一个生命对象life，life诞生时只是一个光溜溜的对象，没有任何属性和方法。在第一次生命过程中，它有了一个身体属性body，并有了一个say方法，看起来是一个“卵细胞”。在第二次生命过程中，它又长出了“尾巴”和“腮”，有了tail和gill属性，显然它是一个“蝌蚪”。在第三次生命过程中，它的tail和gill属性消失了，但又长出了“四条腿”和“肺”，有了legs和lung属性，从而最终变成了“青蛙”。如果，你的想像力丰富的话，或许还能让它变成英俊的“王子”，娶个美丽的“公主”什么的。不过，在看完这段程序之后，请你思考一个问题：

    我们一定需要类吗？

    还记得儿时那个“小蝌蚪找妈妈”的童话吗？也许就在昨天晚，你的孩子刚好是在这个美丽的童话中进入梦乡的吧。可爱的小蝌蚪也就是在其自身类型不断演化过程中，逐渐变成了和妈妈一样的“类”，从而找到了自己的妈妈。这个童话故事中蕴含的编程哲理就是：对象的“类”是从无到有，又不断演化，最终又消失于无形之中的...

    “类”，的确可以帮助我们理解复杂的现实世界，这纷乱的现实世界也的确需要进行分类。但如果我们的思想被“类”束缚住了，“类”也就变成了“累”。想象一下，如果一个生命对象开始的时就被规定了固定的“类”，那么它还能演化吗？蝌蚪还能变成青蛙吗？还可以给孩子们讲小蝌蚪找妈妈的故事吗？

    所以，JavaScript中没有“类”，类已化于无形，与对象融为一体。正是由于放下了“类”这个概念，JavaScript的对象才有了其他编程语言所没有的活力。

    如果，此时你的内心深处开始有所感悟，那么你已经逐渐开始理解JavaScript的禅机了。

函数的魔力

    接下来，我们再讨论一下JavaScript函数的魔力吧。

    JavaScript的代码就只有function一种形式，function就是函数的类型。也许其他编程语言还有procedure或 method等代码概念，但在JavaScript里只有function一种形式。当我们写下一个函数的时候，只不过是建立了一个function类型的实体而已。请看下面的程序：

    function myfunc()
    {
        alert("hello");
    };

    alert(typeof(myfunc));

这个代码运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的，如果我们将其改写成下面的“变量式”的，就更容易理解了：

    var myfunc = function ()
        {
            alert("hello");
        };

    alert(typeof(myfunc));

    这里明确定义了一个变量myfunc，它的初始值被赋予了一个function的实体。因此，typeof(myfunc)返回的也是function。其实，这两种函数的写法是等价的，除了一点细微差别，其内部实现完全相同。也就是说，我们写的这些JavaScript函数只是一个命了名的变量而已，其变量类型即为function，变量的值就是我们编写的函数代码体。

    聪明的你或许立即会进一步的追问：既然函数只是变量，那么变量就可以被随意赋值并用到任意地方啰？

    我们来看看下面的代码：

    var myfunc = function ()
        {
            alert("hello");
        };
    myfunc(); //第一次调用myfunc，输出hello

    myfunc = function ()
        {
            alert("yeah");
        };
    myfunc(); //第二次调用myfunc，将输出yeah

这个程序运行的结果告诉我们：答案是肯定的！在第一次调用函数之后，函数变量又被赋予了新的函数代码体，使得第二次调用该函数时，出现了不同的输出。

好了，我们又来把上面的代码改成第一种定义式的函数形式：

    function myfunc ()
    {
        alert("hello");
    };
    myfunc(); //这里调用myfunc，输出yeah而不是hello

    function myfunc ()
    {
        alert("yeah");
    };
    myfunc(); //这里调用myfunc，当然输出yeah

    按理说，两个签名完全相同的函数，在其他编程语言中应该是非法的。但在JavaScript中，这没错。不过，程序运行之后却发现一个奇怪的现象：两次调用都只是最后那个函数里输出的值！显然第一个函数没有起到任何作用。这又是为什么呢？

    原来，JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且，在同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行。函数定义执行完之后，才会按顺序执行其他语句代码。也就是说，在第一次调用myfunc之前，第一个函数语句定义的代码逻辑，已被第二个函数定义语句覆盖了。所以，两次都调用都是执行最后一个函数逻辑了。

    如果把这个JavaScript代码分成两段，例如将它们写在一个html中，并用<script/>标签将其分成这样的两块：

    这时，输出才是各自按顺序来的，也证明了JavaScript的确是一段段地执行的。

    一段代码中的定义式函数语句会优先执行，这似乎有点象静态语言的编译概念。所以，这一特征也被有些人称为：JavaScript的“预编译”。

    大多数情况下，我们也没有必要去纠缠这些细节问题。只要你记住一点：JavaScript里的代码也是一种数据，同样可以被任意赋值和修改的，而它的值就是代码的逻辑。只是，与一般数据不同的是，函数是可以被调用执行的。

    不过，如果JavaScript函数仅仅只有这点道行的话，这与C++的函数指针，DELPHI的方法指针，C#的委托相比，又有啥稀奇嘛！然而，JavaScript函数的神奇之处还体现在另外两个方面：一是函数function类型本身也具有对象化的能力，二是函数function与对象 object超然的结合能力。

奇妙的对象

    先来说说函数的对象化能力。

    任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号“()”操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同。请看下面的代码：

    function Sing()
    {
        with(arguments.callee)
          alert(author + "：" + poem);
    };
    Sing.author = "李白";
    Sing.poem = "汉家秦地月，流影照明妃。一上玉关道，天涯去不归

";
    Sing();
    Sing.author = "李战";
    Sing.poem = "日出汉家天，月落阴山前。女儿琵琶怨，已唱三千年

";
Sing();

在这段代码中，Sing函数被定义后，又给Sing函数动态地增加了author和poem属性。将author和poem属性设为不同的作者和诗句，在调用Sing()时就能显示出不同的结果。这个示例用一种诗情画意的方式，让我们理解了JavaScript函数就是对象的本质，也感受到了JavaScript语言的优美。

好了，以上的讲述，我们应该算理解了function类型的东西都是和object类型一样的东西，这种东西被我们称为“对象”。我们的确可以这样去看待这些“对象”，因为它们既有“属性”也有“方法”嘛。但下面的代码又会让我们产生新的疑惑：

    var anObject = {};  //一个对象
    anObject.aProperty = "Property of object";  //对象的一个属性
    anObject.aMethod = function(){alert("Method of object")}; //对象的一个方法
    //主要看下面：
    alert(anObject["aProperty"]);   //可以将对象当数组以属性名作为下标来访问属性
    anObject["aMethod"]();          //可以将对象当数组以方法名作为下标来调用方法
    for( var s in anObject)           //遍历对象的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(anObject[s]));

同样对于function类型的对象也是一样：

    var aFunction = function() {};  //一个函数
    aFunction.aProperty = "Property of function";  //函数的一个属性
    aFunction.aMethod = function(){alert("Method of function")}; //函数的一个方法
    //主要看下面：
    alert(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
    aFunction["aMethod"]();          //可以将函数当数组以方法名作为下标来调用方法
    for( var s in aFunction)           //遍历函数的所有属性和方法进行迭代化处理
        alert(s + " is a " + typeof(aFunction[s]));

    是的，对象和函数可以象数组一样，用属性名或方法名作为下标来访问并处理。那么，它到底应该算是数组呢，还是算对象？

    我们知道，数组应该算是线性数据结构，线性数据结构一般有一定的规律，适合进行统一的批量迭代操作等，有点像波。而对象是离散数据结构，适合描述分散的和个性化的东西，有点像粒子。因此，我们也可以这样问：JavaScript里的对象到底是波还是粒子？

    如果存在对象量子论，那么答案一定是：波粒二象性！

    因此，JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”，一种可以任意伸缩的名称值对儿的集合。其实， object和function的内部实现就是一个字典结构，但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来解释和处理问题，而在另一些地方却用波来解释和处理问题。你也可以在需要的时候，自由选择用对象还是数组来解释和处理问题。只要善于把握JavaScript的这些奇妙特性，就可以编写出很多简洁而强大的代码来。

放下对象

    我们再来看看function与object的超然结合吧。

    在面向对象的编程世界里，数据与代码的有机结合就构成了对象的概念。自从有了对象，编程世界就被划分成两部分，一个是对象内的世界，一个是对象外的世界。对象天生具有自私的一面，外面的世界未经允许是不可访问对象内部的。对象也有大方的一面，它对外提供属性和方法，也为他人服务。不过，在这里我们要谈到一个有趣的问题，就是“对象的自我意识”。

    什么？没听错吧？对象有自我意识？

    可能对许多程序员来说，这的确是第一次听说。不过，请君看看C++、C#和Java的this，DELPHI的self，还有VB的me，或许你会恍然大悟！当然，也可能只是说句“不过如此”而已。

    然而，就在对象将世界划分为内外两部分的同时，对象的“自我”也就随之产生。“自我意识”是生命的最基本特征！正是由于对象这种强大的生命力，才使得编程世界充满无限的生机和活力。

    但对象的“自我意识”在带给我们快乐的同时也带来了痛苦和烦恼。我们给对象赋予了太多欲望，总希望它们能做更多的事情。然而，对象的自私使得它们互相争抢系统资源，对象的自负让对象变得复杂和臃肿，对象的自欺也往往带来挥之不去的错误和异常。我们为什么会有这么多的痛苦和烦恼呢？

    为此，有一个人，在对象树下，整整想了九九八十一天，终于悟出了生命的痛苦来自于欲望，但究其欲望的根源是来自于自我意识。于是他放下了“自我”，在对象树下成了佛，从此他开始普度众生，传播真经。他的名字就叫释迦摩尼，而《JavaScript真经》正是他所传经书中的一本。

    JavaScript中也有this，但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己，而 JavaScript的this却并不一定！this可能是我，也可能是你，可能是他，反正是我中有你，你中有我，这就不能用原来的那个“自我”来理解 JavaScript这个this的含义了。为此，我们必须首先放下原来对象的那个“自我”。

    我们来看下面的代码：

    从上面的代码可以看出，同一个函数可以从不同的角度来调用，this并不一定是函数本身所属的对象。this只是在任意对象和function元素结合时的一个概念，是种结合比起一般对象语言的默认结合更加灵活，显得更加超然和洒脱。

    在JavaScript函数中，你只能把this看成当前要服务的“这个”对象。this是一个特殊的内置参数，根据this参数，您可以访问到“这个”对象的属性和方法，但却不能给this参数赋值。在一般对象语言中，方法体代码中的this可以省略的，成员默认都首先是“自己”的。但JavaScript却不同，由于不存在“自我”，当访问“这个”对象时，this不可省略！

    JavaScript提供了传递this参数的多种形式和手段，其中，象BillGates.WhoAmI()和SteveJobs.WhoAmI()这种形式，是传递this参数最正规的形式，此时的this就是函数所属的对象本身。而大多数情况下，我们也几乎很少去采用那些借花仙佛的调用形式。但只我们要明白JavaScript的这个“自我”与其他编程语言的“自我”是不同的，这是一个放下了的“自我”，这就是JavaScript特有的世界观。

对象素描

    已经说了许多了许多话题了，但有一个很基本的问题我们忘了讨论，那就是：怎样建立对象？

    在前面的示例中，我们已经涉及到了对象的建立了。我们使用了一种被称为JavaScript Object Notation(缩写JSON)的形式，翻译为中文就是“JavaScript对象表示法”。

    JSON为创建对象提供了非常简单的方法。例如，
    创建一个没有任何属性的对象：

var o = {};

创建一个对象并设置属性及初始值：

var person = {name: "Angel", age: 18, married: false};

创建一个对象并设置属性和方法：

var speaker = {text: "Hello World", say: function(){alert(this.text)}};

创建一个更复杂的对象，嵌套其他对象和对象数组等：

    var company =
    {
        name: "Microsoft",
        product: "softwares",
        chairman: {name: "Bill Gates", age: 53, Married: true},
        employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}],
        readme: function() {document.write(this.name + " product " + this.product);}
    };

    JSON的形式就是用大括“{}”号包括起来的项目列表，每一个项目间并用逗号“,”分隔，而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式，也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象，都可以被一句JSON代码来创建并赋值。

    其实，JSON就是JavaScript对象最好的序列化形式，它比XML更简洁也更省空间。对象可以作为一个JSON形式的字符串，在网络间自由传递和交换信息。而当需要将这个JSON字符串变成一个JavaScript对象时，只需要使用eval函数这个强大的数码转换引擎，就立即能得到一个JavaScript内存对象。正是由于JSON的这种简单朴素的天生丽质，才使得她在AJAX舞台上成为璀璨夺目的明星。

    JavaScript就是这样，把面向对象那些看似复杂的东西，用及其简洁的形式表达出来。卸下对象浮华的浓妆，还对象一个眉目清晰！

构造对象

    好了，接下我们来讨论一下对象的另一种创建方法。

    除JSON外，在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如：

function MyFunc() {}; //定义一个空函数
var anObj = new MyFunc(); //使用new操作符，借助MyFun函数，就创建了一个对象

JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？

其实，可以把上面的代码改写成这种等价形式：

    function MyFunc(){};
    var anObj = {};     //创建一个对象
    MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

我们就可以这样理解，JavaScript先用new操作符创建了一个对象，紧接着就将这个对象作为this参数调用了后面的函数。其实，JavaScript内部就是这么做的，而且任何函数都可以被这样调用！但从 “anObj = new MyFunc()” 这种形式，我们又看到一个熟悉的身影，C++和C#不就是这样创建对象的吗？原来，条条大路通灵山，殊途同归啊！

君看到此处也许会想，我们为什么不可以把这个MyFunc当作构造函数呢？恭喜你，答对了！JavaScript也是这么想的！请看下面的代码：

1     function Person(name)   //带参数的构造函数
2     {
3         this.name = name;   //将参数值赋给给this对象的属性
4         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。
5     };
6
7     function Employee(name, salary)     //子构造函数
8     {
9         Person.call(this, name);        //将this传给父构造函数
10         this.salary = salary;       //设置一个this的salary属性
11         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
12     };
13
14     var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
15     var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象
16
17     BillGates.SayHello();   //显示：I'm Bill Gates
18     SteveJobs.SayHello();   //显示：I'm Steve Jobs
19     SteveJobs.ShowMeTheMoney();   //显示：Steve Jobs $1234
20
21     alert(BillGates.constructor == Person);  //显示：true
22     alert(SteveJobs.constructor == Employee);  //显示：true
23
24     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：false

    这段代码表明，函数不但可以当作构造函数，而且还可以带参数，还可以为对象添加成员和方法。其中的第9行，Employee构造函数又将自己接收的this作为参数调用Person构造函数，这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思：BillGates是由Person构造的，而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数！

    其实，如果你愿意把函数当作“类”的话，她就是“类”，因为她本来就有“类”的那些特征。难道不是吗？她生出的儿子各个都有相同的特征，而且构造函数也与类同名嘛！

    但要注意的是，用构造函数操作this对象创建出来的每一个对象，不但具有各自的成员数据，而且还具有各自的方法数据。换句话说，方法的代码体(体现函数逻辑的数据)在每一个对象中都存在一个副本。尽管每一个代码副本的逻辑是相同的，但对象们确实是各自保存了一份代码体。上例中的最后一句说明了这一实事，这也解释了JavaScript中的函数就是对象的概念。

    同一类的对象各自有一份方法代码显然是一种浪费。在传统的对象语言中，方法函数并不象JavaScript那样是个对象概念。即使也有象函数指针、方法指针或委托那样的变化形式，但其实质也是对同一份代码的引用。一般的对象语言很难遇到这种情况。

    不过，JavaScript语言有大的灵活性。我们可以先定义一份唯一的方法函数体，并在构造this对象时使用这唯一的函数对象作为其方法，就能共享方法逻辑。例如：

    function SayHello()     //先定义一份SayHello函数代码
    {
        alert("Hello, I'm " + this.name);
    };

    function Person(name)   //带参数的构造函数
    {
        this.name = name;   //将参数值赋给给this对象的属性
        this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。
    };

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true

    其中，最后一行的输出结果表明两个对象确实共享了一个函数对象。虽然，这段程序达到了共享了一份方法代码的目的，但却不怎么优雅。因为，定义SayHello方法时反映不出其与Person类的关系。“优雅”这个词用来形容代码，也不知道是谁先提出来的。不过，这个词反映了程序员已经从追求代码的正确、高效、可靠和易读等基础上，向着追求代码的美观感觉和艺术境界的层次发展，程序人生又多了些浪漫色彩。

   显然，JavaScript早想到了这一问题，她的设计者们为此提供了一个有趣的prototype概念。

初看原型

    prototype源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript中的prototype概念恰如其分地反映了这个词的内含，我们不能将其理解为C++的prototype那种预先声明的概念。

    JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一群同类对象共享属性和方法的机制。

    我们先来看看下面的代码：

    function Person(name)
    {
        this.name = name;   //设置对象属性，每个对象各自一份属性数据
    };

    Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。
    {
        alert("Hello, I'm " + this.name);
    }

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

    alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true

    程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。

    那么，对于多层次类型的构造函数情况又如何呢？

    我们再来看下面的代码：

1     function Person(name)   //基类构造函数
2     {
3         this.name = name;
4     };
5
6     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法
7     {
8         alert("Hello, I'm " + this.name);
9     };
10
11     function Employee(name, salary) //子类构造函数
12     {
13         Person.call(this, name);    //调用基类构造函数
14         this.salary = salary;
15     };
16
17     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思
18
19     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法
20     {
21         alert(this.name + " $" + this.salary);
22     };
23
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
25     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象
26
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法
30
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的

    这段代码的第17行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28行，通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢？

    原来，在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

    在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

    在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

    这不就是“继承”吗？是的，这就是“继承”，是JavaScript特有的“原型继承”。

    “原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了：

对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。

然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码：

    阿弥佗佛，原型继承竟然可以玩出有这样的法术！

原型扩展

    想必君的悟性极高，可能你会这样想：如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性，是不是就能扩展JavaScript的功能呢？

    那么，恭喜你，你得到了！

    在AJAX技术迅猛发展的今天，许多成功的AJAX项目的JavaScript运行库都大量扩展了内置函数的prototype功能。比如微软的ASP.NET AJAX，就给这些内置函数及其prototype添加了大量的新特性，从而增强了JavaScript的功能。

    我们来看一段摘自MicrosoftAjax.debug.js中的代码：

String.prototype.trim = function String$trim() {
if (arguments.length !== 0) throw Error.parameterCount();
return this.replace(/^\s+|\s+$/g, '');
}

    这段代码就是给内置String函数的prototype扩展了一个trim方法，于是所有的String类对象都有了trim方法了。有了这个扩展，今后要去除字符串两段的空白，就不用再分别处理了，因为任何字符串都有了这个扩展功能，只要调用即可，真的很方便。

    当然，几乎很少有人去给Object的prototype添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。

    前两年，微软在设计AJAX类库的初期，用了一种被称为“闭包”(closure)的技术来模拟“类”。其大致模型如下：

    很显然，这种模型的类描述特别象C#语言的描述形式，在一个构造函数里依次定义了私有成员、公共属性和可用的方法，显得非常优雅嘛。特别是“闭包”机制可以模拟对私有成员的保护机制，做得非常漂亮。

    所谓的“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。的确很巧妙！

    但是前面我们说过，给每一个对象设置一份方法是一种很大的浪费。还有，“闭包”这种间接保持变量值的机制，往往会给JavaSript的垃圾回收器制造难题。特别是遇到对象间复杂的循环引用时，垃圾回收的判断逻辑非常复杂。无独有偶，IE浏览器早期版本确实存在JavaSript垃圾回收方面的内存泄漏问题。再加上“闭包”模型在性能测试方面的表现不佳，微软最终放弃了“闭包”模型，而改用“原型”模型。正所谓“有得必有失”嘛。

    原型模型需要一个构造函数来定义对象的成员，而方法却依附在该构造函数的原型上。大致写法如下：

    //定义构造函数
    function Person(name)
    {
        this.name = name;   //在构造函数中定义成员
    };

    //方法定义到构造函数的prototype上
    Person.prototype.SayHello = function()
    {
        alert("Hello, I'm " + this.name);
    };

    //子类构造函数
    function Employee(name, salary)
    {
        Person.call(this, name);    //调用上层构造函数
        this.salary = salary;       //扩展的成员
    };

    //子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念
    Employee.prototype = new Person()   //只需要其prototype的方法，此对象的成员没有任何意义！

    //子类方法也定义到构造函数之上
    Employee.prototype.ShowMeTheMoney = function()
    {
        alert(this.name + " $" + this.salary);
    };

    var BillGates = new Person("Bill Gates");
    BillGates.SayHello();

    var SteveJobs = new Employee("Steve Jobs", 1234);
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();

原型类模型虽然不能模拟真正的私有变量，而且也要分两部分来定义类，显得不怎么“优雅”。不过，对象间的方法是共享的，不会遇到垃圾回收问题，而且性能优于“闭包”模型。正所谓“有失必有得”嘛。

    在原型模型中，为了实现类继承，必须首先将子类构造函数的prototype设置为一个父类的对象实例。创建这个父类对象实例的目的就是为了构成原型链，以起到共享上层原型方法作用。但创建这个实例对象时，上层构造函数也会给它设置对象成员，这些对象成员对于继承来说是没有意义的。虽然，我们也没有给构造函数传递参数，但确实创建了若干没有用的成员，尽管其值是undefined，这也是一种浪费啊。

    唉！世界上没有完美的事情啊！

原型真谛

    正当我们感概万分时，天空中一道红光闪过，祥云中出现了观音菩萨。只见她手持玉净瓶，轻拂翠柳枝，洒下几滴甘露，顿时让JavaScript又添新的灵气。

    观音洒下的甘露在JavaScript的世界里凝结成块，成为了一种称为“语法甘露”的东西。这种语法甘露可以让我们编写的代码看起来更象对象语言。

    要想知道这“语法甘露”为何物，就请君侧耳细听。

    在理解这些语法甘露之前，我们需要重新再回顾一下JavaScript构造对象的过程。

    我们已经知道，用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步：第一步是建立一个新对象；第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象；第三步就是将该对象作为this参数调用构造函数，完成成员设置等初始化工作。对象建立之后，对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关，与构造函数再扯不上关系了。换句话说，构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用。

    那么，我们能否自己定义一个对象来当作原型，并在这个原型上描述类，然后将这个原型设置给新创建的对象，将其当作对象的类呢？我们又能否将这个原型中的一个方法当作构造函数，去初始化新建的对象呢？例如，我们定义这样一个原型对象：

    这个JSON形式的写法多么象一个C#的类啊！既有构造函数，又有各种方法。如果可以用某种形式来创建对象，并将对象的内置的原型设置为上面这个“类”对象，不就相当于创建该类的对象了吗？

    但遗憾的是，我们几乎不能访问到对象内置的原型属性！尽管有些浏览器可以访问到对象的内置原型，但这样做的话就只能限定了用户必须使用那种浏览器。这也几乎不可行。

    那么，我们可不可以通过一个函数对象来做媒介，利用该函数对象的prototype属性来中转这个原型，并用new操作符传递给新建的对象呢？

    其实，象这样的代码就可以实现这一目标：

    function anyfunc(){};           //定义一个函数躯壳
    anyfunc.prototype = Person;     //将原型对象放到中转站prototype
    var BillGates = new anyfunc();  //新建对象的内置原型将是我们期望的原型对象

不过，这个anyfunc函数只是一个躯壳，在使用过这个躯壳之后它就成了多余的东西了，而且这和直接使用构造函数来创建对象也没啥不同，有点不爽。

可是，如果我们将这些代码写成一个通用函数，而那个函数躯壳也就成了函数内的函数，这个内部函数不就可以在外层函数退出作用域后自动消亡吗？而且，我们可以将原型对象作为通用函数的参数，让通用函数返回创建的对象。我们需要的就是下面这个形式：

    这里的通用函数New()就是一个“语法甘露”！这个语法甘露不但中转了原型对象，还中转了构造函数逻辑及构造参数。

    有趣的是，每次创建完对象退出New函数作用域时，临时的new_函数对象会被自动释放。由于new_的prototype属性被设置为新的原型对象，其原来的原型对象和new_之间就已解开了引用链，临时函数及其原来的原型对象都会被正确回收了。上面代码的最后一句证明，新创建的对象的constructor属性返回的是Object函数。其实新建的对象自己及其原型里没有constructor属性，那返回的只是最顶层原型对象的构造函数，即Object。

    有了New这个语法甘露，类的定义就很像C#那些静态对象语言的形式了，这样的代码显得多么文静而优雅啊！

    当然，这个代码仅仅展示了“语法甘露”的概念。我们还需要多一些的语法甘露，才能实现用简洁而优雅的代码书写类层次及其继承关系。好了，我们再来看一个更丰富的示例吧：

    //语法甘露：
    var object =    //定义小写的object基本类，用于实现最基础的方法等
    {
        isA: function(aType)   //一个判断类与类之间以及对象与类之间关系的基础方法
        {
            var self = this;
            while(self)
            {
                if (self == aType)
                  return true;
                self = self.Type;
            };
            return false;
        }
    };

    function Class(aBaseClass, aClassDefine)    //创建类的函数，用于声明类及继承关系
    {
        function class_()   //创建类的临时函数壳
        {
            this.Type = aBaseClass;    //我们给每一个类约定一个Type属性，引用其继承的类
            for(var member in aClassDefine)
                this[member] = aClassDefine[member];    //复制类的全部定义到当前创建的类
        };
        class_.prototype = aBaseClass;
        return new class_();
    };

    function New(aClass, aParams)   //创建对象的函数，用于任意类的对象创建
    {
        function new_()     //创建对象的临时函数壳
        {
            this.Type = aClass;    //我们也给每一个对象约定一个Type属性，据此可以访问到对象所属的类
            if (aClass.Create)
              aClass.Create.apply(this, aParams);   //我们约定所有类的构造函数都叫Create，这和DELPHI比较相似
        };
        new_.prototype = aClass;
        return new new_();
    };

    //语法甘露的应用效果：
    var Person = Class(object,      //派生至object基本类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name + ", " + this.age + " years old.");
        }
    });

    var Employee = Class(Person,    //派生至Person类，是不是和一般对象语言很相似？
    {
        Create: function(name, age, salary)
        {
            Person.Create.call(this, name, age);  //调用基类的构造函数
            this.salary = salary;
        },
        ShowMeTheMoney: function()
        {
            alert(this.name + " $" + this.salary);
        }
    });

    var BillGates = New(Person, ["Bill Gates", 53]);
    var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
    BillGates.SayHello();
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();

    var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   //根据BillGate的类型创建LittleBill
    LittleBill.SayHello();

    alert(BillGates.isA(Person));       //true
    alert(BillGates.isA(Employee));     //false
    alert(SteveJobs.isA(Person));       //true
    alert(Person.isA(Employee));        //false
    alert(Employee.isA(Person));        //true

    “语法甘露”不用太多，只要那么一点点，就能改观整个代码的易读性和流畅性，从而让代码显得更优雅。有了这些语法甘露，JavaScript就很像一般对象语言了，写起代码了感觉也就爽多了！

    令人高兴的是，受这些甘露滋养的JavaScript程序效率会更高。因为其原型对象里既没有了毫无用处的那些对象级的成员，而且还不存在constructor属性体，少了与构造函数间的牵连，但依旧保持了方法的共享性。这让JavaScript在追溯原型链和搜索属性及方法时，少费许多工夫啊。

    我们就把这种形式称为“甘露模型”吧！其实，这种“甘露模型”的原型用法才是符合prototype概念的本意，才是的JavaScript原型的真谛！

    想必微软那些设计AJAX架构的工程师看到这个甘露模型时，肯定后悔没有早点把AJAX部门从美国搬到咱中国的观音庙来，错过了观音菩萨的点化。当然，我们也只能是在代码的示例中，把Bill Gates当作对象玩玩，真要让他放弃上帝转而皈依我佛肯定是不容易的，机缘未到啊！如果哪天你在微软新出的AJAX类库中看到这种甘露模型，那才是真正的缘分！

编程的快乐

    在软件工业迅猛发展的今天，各式各样的编程语言层出不穷，新语言的诞生，旧语言的演化，似乎已经让我们眼花缭乱。为了适应面向对象编程的潮流，JavaScript语言也在向完全面向对象的方向发展，新的JavaScript标准已经从语义上扩展了许多面向对象的新元素。与此相反的是，许多静态的对象语言也在向JavaScript的那种简洁而幽雅的方向发展。例如，新版本的C#语言就吸收了JSON那样的简洁表示法，以及一些其他形式的JavaScript特性。

    我们应该看到，随着RIA(强互联应用)的发展和普及，AJAX技术也将逐渐淡出江湖，JavaScript也将最终消失或演化成其他形式的语言。但不管编程语言如何发展和演化，编程世界永远都会在“数据”与“代码”这千丝万缕的纠缠中保持着无限的生机。只要我们能看透这一点，我们就能很容易地学习和理解软件世界的各种新事物。不管是已熟悉的过程式编程，还是正在发展的函数式编程，以及未来量子纠缠态的大规模并行式编程，我们都有足够的法力来化解一切复杂的难题。

    佛最后淡淡地说：只要我们放下那些表面的“类”，放下那些对象的“自我”，就能达到一种“对象本无根，类型亦无形”的境界，从而将自我融入到整个宇宙的生命轮循环中。我们将没有自我，也没有自私的欲望，你就是我，我就是你，你中有我，我中有你。这时，我们再看这生机勃勃的编程世界时，我们的内心将自然生起无限的慈爱之心，这种慈爱之心不是虚伪而是真诚的。关爱他人就是关爱自己，就是关爱这世界中的一切。那么，我们的心是永远快乐的，我们的程序是永远快乐的，我们的类是永远快乐的，我们的对象也是永远快乐的。这就是编程的极乐！

    说到这里，在座的比丘都犹如醍醐灌顶，心中豁然开朗。看看左边这位早已喜不自禁，再看看右边那位也是心花怒放。

    蓦然回首时，唯见君拈花微笑...

原著：李战(leadzen).深圳 2008-2-23
【转载请注明作者及出处】
CNDEV提供PDF 下载

Tag标签: AJAX,prototype,JavaScript

Feedback

#1楼  回复 引用 查看

2008-02-25 08:52 by zhuou [未注册用户]

楼主牛人啊。学习！

#2楼  回复 引用 查看

2008-02-25 08:58 by mapig [未注册用户]

同样对于function类型的对象也是一样：
var aFunction = {}; //一个函数

此处是否笔误？

#3楼  回复 引用 查看

2008-02-25 08:59 by Jeffrey Zhao

--引用--------------------------------------------------
光之追随者: 我已经打印下来随时带在身边，每天顶礼膜拜，流传后世。要是楼主早几年写这篇文章，一定可以刻在海盗号人造卫星上，向全宇宙传播这篇人类经典著作。
虽然现在才是2月，但是我已经敢预言，这是2008年博客园最佳文章莫属了。
--------------------------------------------------------
反对。
要对lz有信心，难道下面的日子里lz就写不出更好的了吗？

#4楼  回复 引用 查看

2008-02-25 08:59 by TerryLee

好久没看到这样的好文章了！

#5楼  回复 引用 查看

2008-02-25 09:04 by 留恋星空

先鼓掌后欣赏！

#6楼  回复 引用 查看

2008-02-25 09:06 by 深海无鱼 [未注册用户]

老大，加油！

#7楼  回复 引用 查看

2008-02-25 09:20 by yuanlf [未注册用户]

太强了,还有这样的好文!

#8楼  回复 引用 查看

2008-02-25 09:23 by 早班火车~

收藏！

#9楼  回复 引用 查看

2008-02-25 09:23 by 马可香蕉

这篇文章肯定花了LZ不少心思

#10楼  回复 引用 查看

2008-02-25 09:27 by BlueMountain

多谢lz分享

#11楼  回复 引用 查看

2008-02-25 09:39 by 阿多斯

飙悍的人生，不需要解释

#12楼  回复 引用 查看

2008-02-25 09:44 by NullNullNullNull [未注册用户]

意见同58楼

#13楼  回复 引用 查看

2008-02-25 09:47 by billao [未注册用户]

好文。学习。

#14楼  回复 引用 查看

2008-02-25 09:48 by FoolTime [未注册用户]

兄台妙文。

#15楼  回复 引用 查看

2008-02-25 09:49 by 清清爽爽

不错，不错。

#16楼  回复 引用 查看

2008-02-25 09:49 by jason_lb

大师芳龄？~

#17楼  回复 引用 查看

2008-02-25 09:54 by SMSStore [未注册用户]

好!

#18楼  回复 引用 查看

2008-02-25 10:03 by Solog

才看了一半,就忍不住鼓掌了.

#19楼  回复 引用 查看

2008-02-25 10:08 by 笑煞天

学习

#20楼  回复 引用 查看

2008-02-25 10:11 by 光之追随者

--引用--------------------------------------------------
Jeffrey Zhao: --引用--------------------------------------------------
光之追随者: 我已经打印下来随时带在身边，每天顶礼膜拜，流传后世。要是楼主早几年写这篇文章，一定可以刻在海盗号人造卫星上，向全宇宙传播这篇人类经典著作。
虽然现在才是2月，但是我已经敢预言，这是2008年博客园最佳文章莫属了。
--------------------------------------------------------
反对。
要对lz有信心，难道下面的日子里lz就写不出更好的了吗？
--------------------------------------------------------

对，说得对，楼主要写出比这篇文章更好的东西来。

#21楼  回复 引用 查看

2008-02-25 10:20 by 礼拜八wanlim [未注册用户]

潜水多年，今天见了楼主的文章终于憋不住了，冒个泡~~~~~~

#22楼  回复 引用 查看

2008-02-25 10:21 by 阳光沙滩海岸线

楼主，你还是出家吧~这红尘实在是太俗了。。哈哈~

PS：不是说typeof(undefined) 返回的是 object吗？

#23楼  回复 引用 查看

2008-02-25 10:28 by 远航

太好了

#24楼  回复 引用 查看

2008-02-25 10:31 by a——a_a [未注册用户]

闭包那里代码里面掉了几个_吧

#25楼  回复 引用 查看

2008-02-25 10:32 by works guo

good

#26楼  回复 引用 查看

2008-02-25 10:36 by carysun

very perfect

#27楼  回复 引用 查看

2008-02-25 10:38 by pk的眼泪

很好,很强大.

#28楼  回复 引用 查看

2008-02-25 10:43 by DataFlow

楼主真文武双全者也！在下佩服。

#29楼  回复 引用 查看

2008-02-25 10:44 by yanchao

恩写的真棒！

#30楼  回复 引用 查看

2008-02-25 10:51 by 笑煞天

很好很强大！

#31楼  回复 引用 查看

2008-02-25 10:54 by xbuilder [未注册用户]

偶证明，博主就是写DELPHI那个，老牛了。。。

#32楼  回复 引用 查看

2008-02-25 11:06 by floodpeak

看了一遍，不行，得收藏，还是不行，得回复
lz加油呀，期待下一篇妙文

#33楼  回复 引用 查看

2008-02-25 11:10 by lzppcc [未注册用户]

--引用--------------------------------------------------
mapig: 同样对于function类型的对象也是一样：
var aFunction = {}; //一个函数

此处是否笔误？
--------------------------------------------------------
这应不是笔误,只是一个例子,说明这时候把他当函数用.

#34楼  回复 引用 查看

2008-02-25 11:12 by heroboy [未注册用户]

我还没看到过区分null和undefined的js呢。
另，废话太多，纯属装b。

#35楼  回复 引用 查看

2008-02-25 11:13 by 成长的强强

强人,,,前辈,,你太了不起了,简直是我的偶像.,
还没来得及看完,收藏,,,,,,,,,,,,,,,,,,,,,,
学习....

#36楼  回复 引用 查看

2008-02-25 11:34 by mapig [未注册用户]

博主应该是想说
var anObject = {}; //一个对象
anObject.aProperty = "Property of object";
anObject.aMethod = function(){alert("Method of object")};
alert(anObject["aProperty"]);

var aFunction = function(){}; //一个函数
aFunction.aProperty = "Property of object";
aFunction.aMethod = function(){alert("Method of object")};
alert(aFunction ["aProperty"]);

对象和函数可以象数组一样，用属性名或方法名作为下标来访问并处理

---------------------------------------------------
同样对于function类型的对象也是一样：
var aFunction = {}; //一个函数
---------------------------------------------------
此处应该是笔误。

#37楼  回复 引用 查看

2008-02-25 11:41 by robot [未注册用户]

见过好的文章,没见过这么好的文章,期待楼主更好的文章.

#38楼  回复 引用 查看

2008-02-25 11:45 by 杨正祎

to 81楼
对于署名【未注册用户】的恶意评价，博客园的朋友想来是无视的。如果，你想反驳作者的意见，请留下姓名和更有力的论据。

to 楼主
这个绝对是值得打印出来好好看的文章。受教了。

#39楼  回复 引用 查看

2008-02-25 12:02 by Zhuang miao

哈，好多人留言啊，博主太牛了！我忍不住又来了！前两天才看了一下《javascript高级编程》有些地方没领悟，今天看了博主的文章，真的领悟了！收藏！收藏！！jeffer zhao dflying 等高人！赶快翻译成英文！发到infoQ等网站上！世界共勉！

#40楼  回复 引用 查看

2008-02-25 12:09 by dfsfsdfsdff [未注册用户]

原来菩萨们都用js..
难怪印度是最大的软件工厂..
难怪学计算机单身者这么多...
难怪现在的当和尚也需要本科毕业证...

#41楼  回复 引用 查看

2008-02-25 12:11 by 1-2-3

只看前几段就能感觉到不同。非常好的文章，学习了。
另：第五段有个错别字：<总>所周知……

#42楼  回复 引用 查看

2008-02-25 12:22 by chenge [未注册用户]

写的好啊！谢谢传道。的确是另类的语言。
建议作者写书度人，呵呵！

#43楼  回复 引用 查看

2008-02-25 12:25 by 专研.NET

很好，很强大
学习了，值得精读的好文。

#44楼  回复 引用 查看

2008-02-25 12:32 by 化石 [未注册用户]

文章不错，但是为什么一次一次地上出现在首页的rss里面呢？

#45楼  回复 引用 查看

2008-02-25 12:44 by 光之追随者

81楼的，你的发言只能证明无知的是你

#46楼  回复 引用 查看

2008-02-25 13:00 by PerfectDesign

mark，
太有才了！

#47楼  回复 引用 查看

2008-02-25 13:02 by Star.Mu

经典好文，多谢楼主解惑~！

#48楼  回复 引用 查看

2008-02-25 13:04 by 黑*马

耶，文笔不错嘛
可以太多了，一次看不完拉

#49楼  回复 引用 查看

2008-02-25 13:14 by zbh [未注册用户]

太长了!!
不过这些思想,
当年上学的时候学C语言就知道

#50楼  回复 引用 查看

2008-02-25 13:15 by 石牌村夫

81楼兄弟，面对这种好文，我们只有认真学习，你说他很多废话，可你能写的出来吗？

楼主，太厉害了，受教了。。。

#51楼  回复 引用 查看

2008-02-25 13:18 by progame

--引用--------------------------------------------------
PerfectDesign: mark，
太有才了！
--------------------------------------------------------

#52楼  回复 引用 查看

2008-02-25 13:20 by 无忧浪子

好,强列收藏.

#53楼 [楼主] 回复 引用 查看

2008-02-25 13:36 by 李战

多谢朋友们的鼓励和支持，也接受各位老师的批评，我会尽力改正错误。几处笔误已刚刚修改。

我一直在www.cndev.org混的。春节期间有些空闲时间，学了老赵那些关于AJAX的精彩课程，由此知道了博客园的各位大师们。我发现这里的学术气氛很浓，文章的质量都很高，就也想在这个园子里混混，也好多向各位讨教几招。

但我发现这里的博客不像其他网站那样随意可建，竟然是要申请的。我猜想，可能正是由于有了这个机制，才保证了博客园的高水准吧。果然，第一次申请我啥都没说，结果来了个回复，要我说明打算写些啥。于是，我说明了理由，很快获得批准。这样，就可以避免了许多死博客和垃圾博客的可能性。高！实在是高！

建立这个博客之后，乘着春节期间的闲暇，零零星星搬了些以前的东西上去。再加上CNDEV的坛子最近老漏水，经常灌不上，一个人守在办公室的时候，就开始构思这篇文章。

忽悠忽悠技术方面的东西嘛，我也算是老油条了。有朋友也提到了多年前那个半吊子的《悟透DELPHI》，回想起来这技术不过是过眼云烟。那么，沧海桑田之后，能否沉淀下来一些永恒的东西呢？可能没有人能回答这个问题。

我特别喜欢看一些既讲解简单道理，又有浅显的实例来试试的文章。因为很多新东西我不懂，给我看源码呢我又懒得去一句句琢磨。大道理讲得太玄了，我一时半时也领悟不过来，名词太专业呢，我的英文又不是很好。只能努力学习，提高自己。但有些老师的文章的确能让我兴奋，因为我既能读懂它，又能领悟到其中的道理。这种文章我就很喜欢。

其实，我没有编过多少JavaScript的代码，也只有一本讲JavaScript方面的书来当手册查。因为最近开始学习AJAX的时候，就在网上找了许多这方面的素材来提高一下自己的基本功。特别是看了老赵的AJAX视频课程，领悟很多。而且，老赵那种不辞辛劳一行一行敲代码的讲解风格，的确能让我们这些门外汉更容易理解AJAX的原理。

篇文章也是在空闲中零零星星拼凑而成，前后用了近两周时间，难免会有错误。我想，只要我站在一个初学者的角度，把自己学习的感想写出来，就当自己写给自己看好了。当然，也想顺便显摆一下自己的厨艺。于是，我先用以前的老火汤打底，放些好素材后生火，烧开后立即加入现编现写的鲜活例子，起锅时来点古典思想的五香调料那么一浇，盛盘即可！

当你写进去的时候，你会发现原来抒发感想也会产生一种快感，于是就会越写越兴奋。当我写完ASP.NET AJAX的简单介绍后，本想在世界不完美的感概中收尾，但此时灵感一闪，又引发了要试一试的冲动。这一试，我才发现自己可能找到了另一种模拟类的表示方法，并迅速实现了一个看起来还不错的模型。我想，冥冥中也许真的有观音菩萨在点化，于是，才有了“甘露模型”的那一段描写。

这时，我才深深理解了“教学相长”一词的真正含义。其实，当你把你学到的感悟表达出来的时候，你会发现自己还有很多没有理解的困惑，于是你必须去理解之后才能表达出来。但当你理解了那些困惑之后呢，又会有一种升华的感觉，甚至会在顿悟的刹那间引发新的灵感。

大家都来写吧，写自己的感想就行，也不用在乎人家怎么看，就当自己写给自己看嘛。人，难免会犯错误，不用太在乎，朋友指出了，就改过来就是。朋友对你的称赞，就当与大家同乐，朋友对你的批评，就当是自我反思嘛。

放下自我，拥有世界...

李战(leadzen).深圳 2008-2-25

#54楼  回复 引用 查看

2008-02-25 13:41 by Zhuang miao

@李战
学者！！

#55楼  回复 引用 查看

2008-02-25 13:49 by qqinxl [未注册用户]

老赵的AJAX视频课程

能给个连接吗?
大师都能受益的课程，一定要看的。

写的真的很精彩。

#56楼  回复 引用 查看

2008-02-25 14:02 by looklook [未注册用户]

写的太精彩了不得不得顶一下！

#57楼  回复 引用 查看

2008-02-25 14:29 by 壁虎

悟不透，不过学到很多。

#58楼  回复 引用 查看

2008-02-25 14:39 by A1 [未注册用户]

这种风格写技术文章真少呢，有意思。

#59楼  回复 引用 查看

2008-02-25 14:41 by 破曉之陽

@qqinxl
進他的博客啊。http://www.cnblogs.com/JeffreyZhao這個里面有
呵呵。路過。

#60楼  回复 引用 查看

2008-02-25 14:47 by wsky

@李战
学习了!

#61楼  回复 引用 查看

2008-02-25 14:50 by looklook [未注册用户]

蓦然回首时，唯见君拈花微笑...

#62楼  回复 引用 查看

2008-02-25 14:50 by a feng

我也顶一个

#63楼  回复 引用 查看

2008-02-25 15:02 by 蓝星空

老兄写得太好了，已经很久没有在博客园看到如此精彩的文字了。

#64楼  回复 引用 查看

2008-02-25 15:07 by marquee

经典.没有深厚的功底难作此文.太强了.

#65楼  回复 引用 查看

2008-02-25 15:11 by 银河

写得太好了！
支持楼主！

#66楼  回复 引用 查看

2008-02-25 15:31 by ludao [未注册用户]

虽然对js不熟悉
不过确实文笔好!!!

好!!!!

#67楼  回复 引用 查看

2008-02-25 15:55 by andysun888

強人！

#68楼  回复 引用 查看

2008-02-25 16:02 by 蜗牛赛跑

做個記號
有時間拜讀。

#69楼  回复 引用 查看

2008-02-25 16:04 by sor [未注册用户]

写的真好，深入浅出。

#70楼  回复 引用 查看

2008-02-25 16:09 by Lee.007 [未注册用户]

从此李站一炮而红

#71楼  回复 引用 查看

2008-02-25 16:33 by 驿路梨花

太...太...太-------长了。一口气看不完。楼主可以将此类长篇的文章分节成几篇文章，那样读者看起来不至于太累。

#72楼  回复 引用 查看

2008-02-25 16:40 by 面向对象是为了低耦合，高复用 [未注册用户]

写的很好，不过就是废话太多，对于面向对象产生的以及应用也有一些曲解

#73楼  回复 引用 查看

2008-02-25 16:46 by 张荣华

强人　
受教了

#74楼  回复 引用 查看

2008-02-25 16:52 by Such Cloud

好文章看了不顶不行啊！！！！

#75楼  回复 引用 查看

2008-02-25 17:04 by co-write [未注册用户]

没仔细看,但是很崇拜.
收藏,慢慢看.

#76楼  回复 引用 查看

2008-02-25 17:09 by 天涯个人居 [未注册用户]

令人耳目一新啊

#77楼  回复 引用 查看

2008-02-25 17:17 by Clark Zheng

强文，拜一下

#78楼  回复 引用 查看

2008-02-25 17:21 by 补丁

拖沓

#79楼  回复 引用 查看

2008-02-25 17:25 by NetMotor

我要去剃度

#80楼  回复 引用 查看

2008-02-25 17:34 by carysun

博主一篇文章就cnblogs的专家了

#81楼  回复 引用 查看

2008-02-25 17:34 by 过客11111 [未注册用户]

2008，让我为之一振的第一篇好文。

#82楼  回复 引用 查看

2008-02-25 17:39 by 刘昌平 [未注册用户]

太强了,顶!!

#83楼  回复 引用 查看

2008-02-25 17:44 by Kevin Shan

好文章，顶

#84楼  回复 引用 查看

2008-02-25 19:47 by whznut1 [未注册用户]

楼主,高手也. "释迦摩尼，而《JavaScript真经》正是他所传经书中的一本" ,
文章有点予教于乐....

#85楼  回复 引用 查看

2008-02-25 20:08 by jianyi0115

精彩！

#86楼  回复 引用 查看

2008-02-25 20:26 by tatung zhang

拜读了。写的真的不错。。。

#87楼  回复 引用 查看

2008-02-25 20:47 by 光之追随者

才一天，点击上4000了，这样的好文，坚决要求永久放置首页

#88楼  回复 引用 查看

2008-02-25 21:19 by whznut1 [未注册用户]

sorrry,写错了,不是高手是高人...,而且境界相当的高.

#89楼  回复 引用 查看

2008-02-25 21:26 by ak47009 [未注册用户]

好文章，文笔真好！

#90楼  回复 引用 查看

2008-02-25 22:04 by @高超

写的着实不错啊.好久没有看过这么好的文章了.今天晚上特地从头至尾看了遍.非常值得收藏.

#91楼  回复 引用 查看

2008-02-25 22:21 by 听雨 [未注册用户]

读君的文章,就像是在看一部电视.整个心都被你偷走了...而我原来以为,只有一个女孩可以把它偷走的..

#92楼  回复 引用 查看

2008-02-25 23:32 by pk的眼泪

似曾相识燕归来...

#93楼  回复 引用 查看

2008-02-25 23:37 by volnet（可以叫我大V）

入行多年却对脚本十分不感冒，导致这块成了空白，手头居然也用到了，许多高级的特性也会用，但是也没有系统理论地学习过，原本看到这篇文章的标题，还以为是标题党，就没进来看了，这么高深的东西居然也能悟透，明显骗人眼球。晚上在dudu的gtalk签名上“悟透JavaScript写的真是太棒了”(类似，他下线了，我看不到，哈哈)，就赶紧过来补课，果真是“行货”，用料好，质地精，虽然我无法鉴别是否有瑕疵，但着实事块美玉。捧着手里怕砸了，揣在兜里怕丢了，于是我将他们保存到我的邮箱、磁盘、WMobile上，我要在所有我想看到它的地方万无一失地保存着它。

#94楼  回复 引用 查看

2008-02-26 00:18 by ppchen

一口气看完了，写得真是好哦，工作中经常要写较多的javascript，虽然文章中的东西大都懂得用，但是还没有过一次这么清晰的认识，讲得太好了，非常的清晰易懂，想叫你一声老大！

#95楼  回复 引用 查看

2008-02-26 08:34 by 兵 [未注册用户]

不错！！！！！

#96楼  回复 引用 查看

2008-02-26 09:13 by Cindy [未注册用户]

一段“引子”非常引人入胜！
非常喜欢。

#97楼  回复 引用 查看

2008-02-26 09:16 by Anytao

不评论，不足以平民沸，好一个了得:-)

#98楼  回复 引用 查看

2008-02-26 09:17 by Cindy [未注册用户]

李战，你好！
我是图灵的陈兴璐，希望你能和我联系。
我的Email&Gtalk：xinglu.chen@gmail.com。

#99楼  回复 引用 查看

2008-02-26 09:33 by Cindy [未注册用户]

引言中的”世界观“和”说禅“这两段显得有点陡。

#100楼  回复 引用 查看

2008-02-26 09:37 by sxy [未注册用户]

有两天没关注博客园,竟然发生如此大事啦!不知博主能否将此文拓展出版成书,加入博文视点与博客园精心打造的"博客园开发者征途"系列中?有意请与我联系:)

#101楼  回复 引用 查看

2008-02-26 10:00 by 小兵a [未注册用户]

太有才了

#102楼  回复 引用 查看

2008-02-26 10:43 by mierxx [未注册用户]

第一次觉得Javascript的可爱！
楼主，你太历害啦！
顶！！！！

#103楼  回复 引用 查看

2008-02-26 10:48 by JustDI

收藏~~

#104楼  回复 引用 查看

2008-02-26 11:07 by 笑疯^_^

此牛文真是难得一见啊!~~

#105楼  回复 引用 查看

2008-02-26 11:56 by JackMa

文采超凡啊，也是顶了再看！要收藏兼下载啊！

#106楼  回复 引用 查看

2008-02-26 13:07 by charry

受益匪浅，学习了！

#107楼  回复 引用 查看

2008-02-26 14:54 by sady[] [未注册用户]

精彩，顶

另： var aFunction = {};
是否为：var aFunction = function(){}; ?

#108楼  回复 引用 查看

2008-02-26 15:09 by egmkang

强
不顶不行.

#109楼  回复 引用 查看

2008-02-26 15:28 by 饮酒买醉

收藏了这么多有关js对象的文章，我想只要有这篇其他的都用不着了。真是太棒了！

#110楼  回复 引用 查看

2008-02-26 16:22 by Justin

非常精彩的文章，刚刚仔细学习了一遍，十分感谢楼主的分享！
下面感觉有点笔误的地方：

function Person(firstName, lastName, age)

{

//私有变量：

var _firstName = firstName;

var _lastName = lastName;

//公共变量:

this.age = age;

//方法：

this.getName = function()

{

return(_firstName + " " + _lastName);

};

this.SayHello = function()

{

alert("Hello, I'm " + _firstName + " " + _lastName);

};

var BillGates = new Person("Bill", "Gates", 53);

var SteveJobs = new Person("Steve", "Jobs", 53);

BillGates.SayHello();

SteveJobs.SayHello();

alert(BillGates.getName() + " " + BillGates.age);

alert(BillGates._firstName); //这里不能访问到私有变量,返回 undefined

#111楼  回复 引用 查看

2008-02-26 18:53 by 李战大师门下弟子 [未注册用户]

ORZ.....

#112楼  回复 引用 查看

2008-02-26 19:39 by airwolf2026

放下自我，拥有世界...
-----------------------------------------------------------------
看来这篇文章宿舍电脑也要好好保存下来了.正打算,开始系统学习js呢.

另:楼主,园子里面偶尔会有类似81楼这样的...不必在意哈.博客园确实是个不错的学习环境,少了很多嘈杂...

#113楼  回复 引用 查看

2008-02-27 00:44 by ccyy [未注册用户]

不得不顶的好文!
很好很强大!
收藏!

#114楼 [楼主] 回复 引用 查看

2008-02-27 08:58 by 李战

再次感谢各位朋友。本来我是戴了钢盔来的，怕砖头太多砸破了头，没想到大家把我的屁股打肿了。

@一名物理老师
我是随便编的，物理一直没学好过，谢谢指正啊。

@abcde, @m
《悟透DELPHI》差不多是十年前的旧稿，写了个开头，没坚持下去，主要是太懒。喜欢吹牛的毛病也一直改不过来啊。

@光之追随者
这种标准的顶贴式早就看多了，但真把自己顶起来的时候真感觉受用啊。但我一看你的名字就警觉了，你那是用手电打了根光柱让我爬上去啊。等我上去了，你再一关电门，我就“啪叽”摔下来啊。不过，你那篇关于索引的思考对我有启发啊，谢了。

@mapig, @lzppcc
这里确实是笔误，改过了，多谢指正

@Jeffrey Zhao
老赵说话就是暗藏玄机啊，既提醒我别太张狂，又把我赶鸭子上架。你是我永远的偶像，就算剩下最后一个支持你的粉丝，那一定是我。

@阳光沙滩海岸线
俺也是俗人，喜欢大口吃肉，大碗喝酒，出家就不能看美女了啊。你提的问题也许是不同浏览器不一样，我测出来是undefined.

@heroboy
null和undefined从概念上应该区分吧，不过我可能误解了undefined的实现，多谢指正。你是研究过firefox源码的大牛，得道的高人。早该来给你拜拜山头，俺是个初学者，该向你学习啊。

@1-2-3
谢谢指出错别字，改了。

@Cindy
谢谢陈小姐，我现在桌上就有一本叫《CSS禅意花园》的书，是你们出的吧，我非常喜欢这种风格的书。

@Justin
俺又试了一下，好像这里没错。可能我没明白你说的错在哪里？能否多吐一点。没事，我脸皮厚。实在怕我挂不住，私下留言也可。

@Anytao
看你的名字就知道咱俩有缘，佛道不分家嘛。我得仔细拜读你博客里的每一篇文章，偷点灵感来充实自己，哈哈。

还有众多朋友，都再次谢过。

这件事就让它尽快过去吧，让大家都恢复正常的生活吧。

莫非要让我永远退出娱乐圈？

李战(leadzen) 2008-2-27

#115楼  回复 引用 查看

2008-02-27 09:55 by fzf [未注册用户]

强,实在是强!!
这不看不顶不是遗憾吗?

#116楼  回复 引用 查看

2008-02-27 11:24 by kmfree

我对你的景仰之情有如长江黄河之水滔滔不绝....

#117楼  回复 引用 查看

2008-02-27 11:57 by 月影 [未注册用户]

不得不赞一个……
只恨来晚了 :P

#118楼  回复 引用 查看

2008-02-28 00:00 by Justin

@李战
不是说原文的程序有错误，从上下文的语义看。留言里黄色高亮部分，我感觉你的本意是想写成“_firstName”和“_lastName”，即在函数内部声明的这两个私有变量，而原文中漏掉了“_”，否则你在内部声明这两个私有变量还有何意义呢？

---------------------------
//私有变量：
var _firstName = firstName;
var _lastName = lastName;
---------------------------

#119楼  回复 引用 查看

2008-02-28 08:49 by gfdsgfsd [未注册用户]

不然我就永远退出...
______________________
你也太狂妄了吧

#120楼  回复 引用 查看

2008-02-28 09:22 by peace

品了两三天终于品完了受益悱浅
非常感谢！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

#121楼 [楼主] 回复 引用 查看

2008-02-28 09:37 by 李战

@Justin
明白了，回头我再修改一下示例，说得更清楚些。多谢大牛指正，我一直后悔没参加上春联比赛呢。

@gfdsgfsd
牛皮还是吹破了。我本意是想开个玩笑，现在改了最后一句话，看看行不，不行我再改。在CNDEV里，我是最调皮的一个，检讨书也写了一堆，但还是改不了坏毛病。不能再写了，否则又说错话了，呜呜。

#122楼  回复 引用 查看

2008-02-28 09:41 by Jeason

强人啊，非常不错，

#123楼  回复 引用 查看

2008-02-28 10:09 by peace

经君一指点现恍然大悟

#124楼  回复 引用 查看

2008-02-28 10:47 by 巴西球星

看此文前，准备去尿尿的，
越看越没尿了

#125楼  回复 引用 查看

2008-02-28 11:34 by peace

var BillGates = New(Person, ["Bill Gates", 53]); //调用通用函数创建对象，并以数组形式传递构造参数
BillGates.SayHello();
BillGates.HowOld();

alert(BillGates.constructor == Object); //输出：true

var BillGates = New(Person, ["Bill Gates", 53]);
var BillGates = new New(Person, ["Bill Gates", 53]); 试了下都可以

#126楼  回复 引用 查看

2008-02-28 18:13 by 零度的火

我JavaScript比较菜。请教个问题，这种写法：
Employee.protoType = new Person();
Employee.protoType.ShowMeTheMoney = function()
{
// .....
}
这么写为何不会导致Person也添加了ShowMeTheMoney函数？
难道我中OO的毒太深？

------------非技术的分割线-----------------
楼主玩不玩《星级争霸》？
ShowMeTheMoney让我想起了星级争霸初期怎么虐电脑……
呵呵

#127楼  回复 引用 查看

2008-02-28 21:07 by 零度的火

博主，我已经反应过来了，不需要劳你解答了，谢谢，呵呵

#128楼 [楼主] 回复 引用 查看

2008-02-29 09:14 by 李战

@零度的火

这个玄机被你看出来了，君一定是喜欢刨根问底的人。当年为了搞清为啥要用“black sheep wall”作暗语，结果知道了不少背景故事，有趣啊

。

#129楼  回复 引用 查看

2008-03-04 17:18 by 早班火车~

又看了一遍博主的文章，
思考之中带着感动，
后面的甘露模型感觉自己功底不够还得好好实践才能算真正掌握，
再次感谢分享！

#130楼  回复 引用 查看

2008-03-05 09:55 by michaelshi [未注册用户]

不错,精品

#131楼  回复 引用 查看

2008-03-05 16:23 by 知秋 [未注册用户]

看君一文章，胜自想半年，至少半个月啊！
受教了！

#132楼  回复 引用 查看

2008-03-05 16:24 by 知秋 [未注册用户]

还有就是问一下，那要时RIA流行起来了，那我们这些搞网络编程的岂不要失业了！

#133楼  回复 引用 查看

2008-03-05 18:00 by jasonoiu

真是好文，让我这样的懒人不得不收藏和拜读。

希望楼主以后的文更加精彩。

#134楼  回复 引用 查看

2008-03-05 23:26 by Jerome [未注册用户]

实属好文章
受益了不敢不留言！

这样的文章要支持啊

#135楼  回复 引用 查看

2008-03-06 15:28 by Perry.Yin [未注册用户]

你真的学有所感，我也颇有受益。

#136楼  回复 引用 查看

2008-03-07 11:53 by xfan1982 [未注册用户]

牛啊，彻底理解prototype

#137楼  回复 引用 查看

2008-03-07 12:36 by hpan11 [未注册用户]

真是一篇让人兴奋的文章，必须得感慨一下！！！

#138楼  回复 引用 查看

2008-03-10 17:54 by leening

我看了一遍了,还想继续看下去......

#139楼  回复 引用 查看

2008-03-11 10:21 by 蓝星空

楼主写书吧！

一定要买，还要多买几本送人！

#140楼  回复 引用 查看

2008-03-11 23:55 by ljy [未注册用户]

受益匪浅。。

#141楼  回复 引用 查看

2008-03-14 08:40 by 小科

讲的很详细，很透彻，谢谢了。

#142楼  回复 引用 查看

2008-03-14 17:12 by 不知如何爱你

大雁留聲，走過必留下痕跡！

#143楼  回复 引用 查看

2008-03-15 01:35 by shucha

经典当然要收藏啦！

#144楼  回复 引用 查看

2008-03-15 16:18 by BAsil

赞楼主一个，园子里需要这样的原创性文章

#145楼  回复 引用 查看

2008-03-28 09:23 by 孤星赶月 [未注册用户]

高深啊~~~顶

#146楼  回复 引用 查看

2008-03-28 17:50 by weny.hn [未注册用户]

看了大家都说好

#147楼  回复 引用 查看

2008-03-28 22:03 by TerryLi

能写出这么好的文章绝对不易，文笔优雅，技术得体，有种佛的淡定。

#148楼  回复 引用 查看

2008-03-31 14:52 by Freewind

受益非浅!
就是甘露模型理解不了,郁闷..

#149楼  回复 引用 查看

2008-03-31 18:55 by 脚本之家 [未注册用户]

对于上面的内容真是太好了，为了方便学习，我都给加上运行功能了，更方便测试，整理后的文章链接地址：http://www.jb51.net/article/14005.htm

#150楼  回复 引用 查看

2008-04-01 16:53 by 弋小小 [未注册用户]

无语,只有两个字形容,真好

#151楼  回复 引用 查看

2008-04-06 22:44 by 代码娇妻 [未注册用户]

真的太经典了，我都感动得流泪了，楼主，我可以为你生小孩吗？我希望我们的小孩也能有你这样的能耐，今天过后，其他男人对来说都是浮云，楼主，我永远是属于你的。

#152楼  回复 引用 查看

2008-04-07 13:57 by 蓝星空

198楼的太强悍了！

#153楼  回复 引用 查看

2008-04-07 15:46 by 狼Robot

很早前看过了，今天又回来再看了一遍。

#154楼  回复 引用 查看

2008-04-07 15:52 by 狼Robot

想问楼主一个问题.
function Hello(name){this.name = name;}
Hello.prototype.Start = function(){setTimeout("?.Show()",8000)}
Hello.prototype.Show = function(){alert(this.name);}

实际上我就是想实现8秒后执行对象的Show方法，但是我不知道问号(?)那里到底要怎么写，setTimeout后，this所代表的不是当前对象了，如果用this就会出错，望楼主能指点一下。万分感激。

#155楼 [楼主] 回复 引用 查看

2008-04-07 20:06 by 李战

@代码娇妻
上次到了青龙山，又说你去歌乐山了，师太，你找得我好苦啊！

@狼Robot

施主可能被代码困住了，请看好：

不好意思，胡乱写了一段

，我自己都看不懂，天书啊！

望施主帮俺理一下。

@dudu
俺发现，博客园里不能象CNDEV那样建高楼，楼层超过200之后，楼号就不对了，第二页又从头开始了。不知道是否是BUG。
俺保证，俺真的不是无意的！

#156楼  回复 引用 查看

2008-04-07 21:56 by 狼Robot

高人就是高人，效果实现了，但我看了N遍试了N遍，就是悟不出其中的哲理，不知道楼主能不能再点化一下？
setTimeout(function(me){
return function(){
me.Show()
}
}(this), 5000);
这里我实在是看不明白。
开始我以为楼主是把Show的方法转换成一个字符串传给setTimeout,但是我试了一下，如果在Start后，没有输出alert期间，再改变name的值，最后的结果也是会变的。其中的奥妙，估计只有楼主明白。

#157楼  回复 引用 查看

2008-04-07 22:25 by 天好蓝-崇崇

顶200楼

#158楼  回复 引用 查看

2008-04-07 22:44 by 狼Robot

看来dudu得看看楼层的问题了，呵呵。

@天好蓝-崇崇
刚刚我看到的是你自己顶自己，现在你顶的是你发回复时的将来了。

#159楼  回复 引用 查看

2008-04-07 22:52 by 狼Robot

楼主，我等你等得好苦哇，上cndev也没看到你。

找了些资料，说setTimeout的第一个参数可以传function,但是我直接传this.Show的话，执行时的结果是空的。越来越迷糊了，楼主给我指个方向吧。苦海明灯啊。

#160楼  回复 引用 查看

2008-04-08 00:13 by 狼Robot

#161楼 [楼主] 回复 引用 查看

2008-04-08 09:17 by 李战

@狼Robot

嗯，嗯，嗯，

setTimeout和setInterval的第一个参数既可以传函数对象也可以传字符串，如果传字符串实际上也是相当于构造了一个匿名函数。

要让某个代码记住某个数据，并不留下痕迹的话，就是将该代码和该数据形成一个闭包。也就是把该代码写成函数内的一个函数，而该数据作为外层函数参数，这些数据又被内部函数引用了。当内部函数被当作返回值出来时，外层函数脱壳之后就消失了，而返回的函数还引用着原来的代码并间接引用着原来的数据，这就形成了闭包。

但在内层函数中，不能使用this，外层函数的那个this并没有隐含传递给内层函数，内层函数的this实际是window对象。因此，要给通过一个明确定义的参数来传this，比如me。

直接setTimeout(this.Show, 8000)呢，这个只是把this.Show函数体给了setTimeout，setTimeout又不会帮你记住this。所以，当时间条件触发时，执行引擎仅仅是调用Show()，而不是this.Show()，这时this是window对象，window对象确实有个name属性，但默认是“”,而不是undefined。

累死我了，一大早来回这么个长贴。

施主，化俺一顿斋饭吧。

#162楼  回复 引用 查看

2008-04-08 10:42 by 李涛

学习javascript,这篇文章足以!
李战,拜读你的大作了。
继续努力哦，希望有更好的文章出来，期待！

#163楼  回复 引用 查看

2008-04-08 11:42 by 狼Robot

看着楼主内层外层的，把我给弄得晕头转向了，但是依稀找到了些方向。先谢楼主了。呵呵。

#164楼  回复 引用 查看

2008-04-08 11:51 by 狼Robot

用楼主教的东西写的个简单的东西，晚上传个Demo给大家看看，代码就暂时不贴了，有些占版面。

#165楼  回复 引用 查看

2008-04-08 11:51 by 狼Robot

再次感谢楼主不吝赐教，在下感激不尽啊，斋饭就不在话下了，若楼主哪天有幸光临寒舍，我定亲自主厨，送楼主一餐美味。当然，前提是不能吃了之后赖着不走了，呵呵。我对自己的厨艺还是蛮有信心的。

#166楼  回复 引用 查看

2008-04-15 00:09 by Flyingis

上次看过忘记留言，好文！

#167楼  回复 引用 查看

2008-04-15 11:41 by Frank2008 [未注册用户]

受教了.
虽然在有的地方卡壳了..我想再研究一下...应该能过去....

哈哈..谢了..

#168楼  回复 引用 查看

2008-04-15 13:20 by Confach

收藏先！

#169楼  回复 引用 查看

2008-04-16 10:23 by 王孟军!

好文,毕竟精通JS的少

#170楼  回复 引用 查看

2008-04-16 14:41 by e旋风

太佩服了。

很久没有看到这么精彩的文章了

#171楼  回复 引用 查看

2008-04-16 15:48 by 红色枫叶

好东西,收藏了

#172楼  回复 引用 查看

2008-04-21 17:41 by 多了一点 [未注册用户]

这家伙...
这文章太好了。谢谢楼主的分享..

#173楼  回复 引用 查看

2008-04-22 09:46 by pigIdear [未注册用户]

众里寻他千百度，原来你在这里住

#174楼  回复 引用 查看

2008-04-23 15:21 by ys_go

好文章,好学问.

#175楼  回复 引用 查看

2008-04-23 19:09 by Tank [未注册用户]

這篇文章寫得太好了,使我明白了很多關於javascript對象的東西 ,謝謝!!

#176楼  回复 引用 查看

2008-04-26 00:33 by 超晨

终于把这篇文章看完了，只讲JS的本质，大呼过瘾啊，感觉自己基础差了些。原型还明白，到了甘露就看不下去了。看来需要找个例子来实践一下，要不光是B/S上简单的写个FUNCTION,两下又要忘了。

#177楼  回复 引用 查看

2008-04-26 15:52 by 花非花

先下个拜帖，起码的礼数还是要的。

#178楼  回复 引用 查看

2008-04-29 16:00 by Phinecos(洞庭散人)

还没涉及到自定义事件，还不够深入，继续努力

#179楼 [楼主] 回复 引用 查看

2008-04-29 19:42 by 李战

@Phinecos(洞庭散人)

您的教诲就是俺前进的动力。

#180楼  回复 引用 查看

2008-04-29 21:18 by Phinecos(洞庭散人)

@李战
惭愧，我也是近来读ThunderBird的源代码才发现人家把javascript用到如此地步，而我知道的不过皮毛而已

#181楼  回复 引用 查看

2008-04-30 09:18 by 狼Robot

期待李老师您的<悟透Javascript>正式出版.我一直在关注.哈哈.

#182楼  回复 引用 查看

2008-04-30 14:50 by 乔木 [未注册用户]

很幸运能够来到您的博客，
由衷的佩服您这种大话技术的风格，而且还可以把人带到了一个不可企及的地方，看完您的文章，有一种豁然开朗的感觉。
谢谢，希望您能够写出更好的文章，不断学习中。支持。。。

#183楼  回复 引用 查看

2008-05-07 17:09 by 陈镇 [未注册用户]

楼主真是高人，光是看了，楼主写的引子就受益匪浅，我正在学习JavaScript谢谢楼主的共享!!!!

#184楼  回复 引用 查看

2008-05-09 09:59 by music000

期待此书...

#185楼  回复 引用 查看

2008-05-10 11:41 by 登山小熊

太牛了,"甘露模型",谢谢楼主啊!

#186楼  回复 引用 查看

2008-05-10 19:33 by 小神啊 [未注册用户]

#187楼  回复 引用 查看

2008-05-11 14:38 by 小神啊 [未注册用户]

嘿嘿
我想明白了
真的很佩服 LZ
你的那句
用水云般自在的禅心，书写诗情画意的程序人生...
很 good
才知道程序也可以诗情画意

#188楼  回复 引用 查看

2008-05-12 15:59 by 镜涛

讲解的深刻透彻，文笔顺畅，几近完美！！

#189楼  回复 引用 查看

2008-05-14 01:14 by xiaobaov2

受教了

#190楼  回复 引用 查看

2008-05-18 15:22 by wanglei341125 [未注册用户]

绝了```

#191楼  回复 引用 查看

2008-05-22 02:38 by KevinDiao

楼主强人呀！！

#192楼  回复 引用 查看

2008-05-24 10:56 by 情缘

#193楼  回复 引用 查看

2008-05-28 17:58 by KymoWang

pdf太漂亮了！

#194楼  回复 引用 查看

2008-05-30 00:15 by 体彩 [未注册用户]

写的真精辟，受教了！

#195楼  回复 引用 查看

2008-06-01 16:17 by javascript爱好者 [未注册用户]

if (arguments.length !== 0) throw Error.parameterCount();

#196楼  回复 引用 查看

2008-06-02 09:35 by 中华八爪

PhoenixClass = {
/**
* Phoenix自定义Class，用于类的定义和继承定义。
* @param {Class} 基类（若无基类用于继承可省略）
* @param {Functions} 类成员集合
* @return {Class}
*/
create: function(){
var Class = function(){
return(this.initialize.apply(this, arguments));
};

var extended = {};
var parent;
for (var i = 0; i < arguments.length; ++i) {
if (typeof arguments[i] == "function") {
// 获取基类的prototype
parent = arguments[i].prototype;
/**
* 保存继承来源树
*/
extended.baseClass = arguments[i];
}
else {
parent = arguments[i];
}
SpatialBrowser.Class.extend(extended, parent);
}
Class.prototype = extended;
return Class;
},

/**
* 将来源对象的公开成员复制到目标对象
* @param {Class} destination
* @param {Class} source
* @return {Class}
*/
extend: function(destination, source){
if (destination && source) {
for (var property in source) {
destination[property] = source[property];
}
/**
* 对包含toString方法的特殊处理
*/
if (source.hasOwnProperty && source.hasOwnProperty('toString')) {
destination.toString = source.toString;
}
}
return destination;
}
};

Admire = PhoenixClass.create({
hello:"",
sayHello:function(){alert(this.hello);},
//构造函数
initialize:function(){}
});

AdmireLZ = PhoenixClass.create(Admire,{
hello:"LZ,PFPF!:)"
});

var admireLZ = new AdmireLZ();
admireLZ.sayHello();

#197楼  回复 引用 查看

2008-06-02 09:38 by 中华八爪

呵呵，不好意思上面有一个笔误：
SpatialBrowser.Class.extend(extended, parent);
->
PhoenixClass.extend(extended, parent);

#198楼 [楼主] 回复 引用 查看

2008-06-02 14:50 by 李战

//完美语法甘露：

function Class()

{

var aDefine = arguments[arguments.length-1]; //最后一个参数是类定义

if(!aDefine) return;

var aBase = arguments.length>1 ? arguments[0] : object; //解析基类

function prototype_(){}; //构造prototype的临时函数

prototype_.prototype = aBase.prototype; //准备传递prototype

var aPrototype = new prototype_(); //构造本类prototype

for(var member in aDefine) //复制类定义到当前类的prototype

if(member!="Create")

aPrototype[member] = aDefine[member];

aPrototype.prototype = aBase.prototype; //设置基类型，以便追溯类型继承关系

var aType = aDefine.Create || function()

{

this.base();

};

aType.prototype = aPrototype; //设置类(构造函数)的prototype

aType.prototype.Type = aType; //为本类对象扩展一个Type属性

return aType; //返回构造函数作为类

};

@中华八爪

以上是《悟透JavaScript》一书中的高级甘露模型的语法甘露，希望能看明白。

posted on 2008-06-04 09:27 执着追梦人阅读(269) 评论(0) 编辑收藏举报

Feedback

#53楼 [楼主] 回复 引用 查看

#114楼 [楼主] 回复 引用 查看

#121楼 [楼主] 回复 引用 查看

#128楼 [楼主] 回复 引用 查看

#53楼 [楼主] 回复引用查看

#114楼 [楼主] 回复引用查看

#121楼 [楼主] 回复引用查看

#128楼 [楼主] 回复引用查看