javascript面向对象系列讲解之认识对象



javascript面向对象系列讲解之认识对象  。声明：为了方便大家学习和查看，所以特意控制了文章的篇幅，将面向对象写成了多篇连续博文的方式，也方便大家根据自己具体情况进行选择性的学习

在自己最初学习面向对象的时候，一直陷入了一个误区。当时自己知道this和面向对象相关，也知道原型prototype和面向对象相关，于是，在最初进行面向对象代码书写的时候，直接就使用this开始书写，但是逻辑上却是错乱的。同时，面向对象这个东西通常是用于一些模块化开发当中，在接触到一个比较通用模块之前，自己并不清楚面向对象在JS中的用法。

随着时间的推移，和对面向对象的理解的逐步深入，自己也就慢慢捋顺了面向对象的代码开发的实际顺序和逻辑。在此书写出来，希望各位不要像我一样绕弯路。

对象命名空间

在讲解面向对象之前，先来讲解一下对象命名空间。我们常说，常见避免js命名冲突的方法有三种，分别是匿名函数、协同命名以及对象命名空间。那么这个对象命名空间到底是个什么玩意儿呢？

来看下面这段代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var username = ‘独行冰海’;
  10.     </script>
  11. </body>
  12. </html>

我们在全局作用域定义了一个变量，变量名为username。在之前的博文中我们曾经介绍过，在全局作用域指的是window。那么在全局作用域定义的变量或者函数都可以看做是window的属性（变量）或方法（函数），那么此时window其实就是username这个属性的对象。也就是说：username 等价于 window.username;

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var username = ‘独行冰海’;
  10.         window.username = ‘独行冰海’;         // 与上面一行等价
  11.         alert(username);
  12.     </script>
  13. </body>
  14. </html>

接下来我们以一个小例子为例，看看如何用对象命名空间的方式进行代码的书写，同时也再理解一下所谓的“防止全局作用域被污染”


首先采用普通创建的方法，实现一个用户名、博客地址、微博地址等基本信息的创建，同时创建一个函数，功能是将这个人的基本信息展示出来，书写方法如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var username = ‘独行冰海’;
  10.         var blogsrc = ‘http://blog.163.com/hongshaoguoguo@126′;
  11.         var weibo = ‘http://weibo.com/u/2706684357′;
  12.         function showInf(){
  13.             alert(‘姓名:’+username+’\n博客地址:’+blogsrc+’\n微博地址:’+weibo);
  14.         }
  15.         showInf();
  16.     </script>
  17. </body>
  18. </html>

当前相当于在全局作用域下创建了3个变量，1个函数，它们四个都属于window对象，接下来我们来思考一下，如果我们的工作伙伴在书写js代码的时候，也使用了username或者showing此类的变量名或函数名，再将我们的代码进行整合，之后会出现什么问题？——必然会发生变量或函数的覆盖，从而导致代码出现问题。那么对象命名空间就是解决这个冲突的好办法。

我们使用一个对象进行这一系列属性和方法的存储，让它们都属于某一个对象，来看代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var obj = {};
  10.         obj.username = ‘独行冰海’;
  11.         obj.blogsrc = ‘http://blog.163.com/hongshaoguoguo@126′;
  12.         obj.weibo = ‘http://weibo.com/u/2706684357′;
  13.         obj.showInf = function (){
  14.             alert(‘姓名:’+obj.username+’\n博客地址:’+obj.blogsrc+’\n微博地址:’+obj.weibo);
  15.         }
  16.         obj.showInf();
  17.     </script>
  18. </body>
  19. </html>

此时，只有obj这个变量属于window，而username、blogsrc、weibo、showing都属于obj，那么此时如果我们的工作小伙伴们也需要使用到username等属性或方法，那么他只需再创建一个属于他自己的对象，再将这些属性和方法放置于对象之下，即obj2.username等。

从上面的效果不难看出，如此操作之后，附属于window这个对象下的属性和方法的数量大大的减少了，那也就不难理解所谓的“尽可能的防止全局作用域被污染，减少命名冲突”这句话了。

我们理解了所谓的对象命名空间，理解了对象，那么为何要使用面向对象，而不用面向过程呢？面向对象又有什么好处，能够帮我们做些什么？基本的面向对象的代码又应当如何书写？请看面向对象系列讲解——面向对象的含义&工厂模式