悟透javascript(可以说一文点破JS啊！ )

难得一见的好文，对拥有OOP基础，又想快速学习JavaScript的程序员而言，这篇文章让人醍醐灌顶，茅塞顿开。如同虚竹被无涯子灌输了70年的内力一般，可以说一文点破JS啊！

引子

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

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

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

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

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

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

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

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

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

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

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

放下对象

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

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

Js代码

1. function WhoAmI() //定义一个函数WhoAmI
2. {
3. alert("I'm " + this.name + " of " + typeof(this));

4. };

   WhoAmI(); //此时是this当前这段代码的全局对象，在浏览器中就是window对象，其name属性为空字符串。输出：I'm of object
   Js代码

5. var BillGates = {name: "Bill Gates"};
6. BillGates.WhoAmI = WhoAmI; //将函数WhoAmI作为BillGates的方法。
7. BillGates.WhoAmI(); //此时的this是BillGates。输出：I'm Bill Gates of object
9. var SteveJobs = {name: "Steve Jobs"};
10. SteveJobs.WhoAmI = WhoAmI; //将函数WhoAmI作为SteveJobs的方法。
11. SteveJobs.WhoAmI(); //此时的this是SteveJobs。输出：I'm Steve Jobs of object
13. WhoAmI.call(BillGates); //直接将BillGates作为this，调用WhoAmI。输出：I'm Bill Gates of object
14. WhoAmI.call(SteveJobs); //直接将SteveJobs作为this，调用WhoAmI。输出：I'm Steve Jobs of object
16. BillGates.WhoAmI.call(SteveJobs); //将SteveJobs作为this，却调用BillGates的WhoAmI方法。输出：I'm Steve Jobs of object
17. SteveJobs.WhoAmI.call(BillGates); //将BillGates作为this，却调用SteveJobs的WhoAmI方法。输出：I'm Bill Gates of object
19. WhoAmI.WhoAmI = WhoAmI; //将WhoAmI函数设置为自身的方法。
20. WhoAmI.name = "WhoAmI";
21. WhoAmI.WhoAmI(); //此时的this是WhoAmI函数自己。输出：I'm WhoAmI of function

23. ({name: "nobody", WhoAmI: WhoAmI}).WhoAmI(); //临时创建一个匿名对象并设置属性后调用WhoAmI方法。输出：I'm nobody of object

    从上面的代码可以看出，同一个函数可以从不同的角度来调用，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为创建对象提供了非常简单的方法。例如， 
创建一个没有任何属性的对象： 

Js代码

1. var o = {};

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

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

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

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

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

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

11. };

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

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

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

构造对象

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

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

Js代码

1. function MyFunc() {}; //定义一个空函数

2. var anObj = new MyFunc(); //使用new操作符，借助MyFun函数，就创建了一个对象

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

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

3. function MyFunc(){};
4. var anObj = {}; //创建一个对象

5. MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

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

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

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

29. 24 alert(BillGates.SayHello == SteveJobs.SayHello); //显示：false

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

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

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

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

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

30. function SayHello() //先定义一份SayHello函数代码
31. {
32. alert("Hello, I'm " + this.name);
33. };
35. function Person(name) //带参数的构造函数
36. {
37. this.name = name; //将参数值赋给给this对象的属性
38. this.SayHello = SayHello; //给this对象SayHello方法赋值为前面那份SayHello代码。
39. };
41. var BillGates = new Person("Bill Gates"); //创建BillGates对象
42. var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs对象

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

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

初看原型

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

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

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

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