面向物件系列講解—認識物件
HTML5學堂：面向物件、原型、繼承應該說是屬於JavaScript最底層的知識和概念，對於這些知識，在我們沒有觸碰的時候的確覺得是比較困難的，包括在學習的過程中，也覺得摸不到頭腦，但是當走過之後，發現也沒有那麼難。面向物件，從認識物件開始。為了方便大家學習和檢視，所以特意控制了文章的篇幅，將面向物件寫成了多篇連續博文的方式，也方便大家根據自己具體情況進行選擇性的學習。
在自己最初學習面向物件的時候，一直陷入了一個誤區。當時自己知道this和麵向物件相關，也知道原型prototype和麵向物件相關，於是，在最初進行面向物件程式碼書寫的時候，直接就使用this開始書寫，但是邏輯上卻是錯亂的。同時，面向物件這個東西通常是用於一些模組化開發當中，在接觸到一個比較通用模組之前，自己並不清楚面向物件在JS中的用法。
隨著時間的推移，和對面向物件的理解的逐步深入，自己也就慢慢捋順了面向物件的程式碼開發的實際順序和邏輯。在此書寫出來，希望各位不要像我一樣繞彎路。
物件名稱空間
在講解面向物件之前，先來講解一下物件名稱空間。我們常說，常見避免js命名衝突的方法有三種，分別是匿名函式、協同命名以及物件名稱空間。那麼這個物件名稱空間到底是個什麼玩意兒呢？來看下面這段程式碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>面向物件-獨行冰海</title> </head> <body> <script> var username = '獨行冰海'; </script> </body> </html>
全域性作用域
我們在全域性作用域定義了一個變數，變數名為username。在之前的博文中我們曾經介紹過，在全域性作用域指的是window。那麼在全域性作用域定義的變數或者函式都可以看做是window的屬性（變數）或方法（函式），那麼此時window其實就是username這個屬性的物件。也就是說：username 等價於 window.username;來看下面這段程式碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>面向物件-獨行冰海</title> </head> <body> <script> var username = '獨行冰海'; window.username = '獨行冰海'; // 與上面一行等價 alert(username); </script> </body> </html>
防止全域性作用域被汙染
接下來我們以一個小例子為例，看看如何用物件名稱空間的方式進行程式碼的書寫，同時也再理解一下所謂的“防止全域性作用域被汙染”。首先採用普通建立的方法，實現一個使用者名稱、部落格地址、微博地址等基本資訊的建立，同時建立一個函式，功能是將這個人的基本資訊展示出來，書寫方法如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>面向物件-獨行冰海</title>
</head>
<body>
<script>
var username = '獨行冰海';
var blogsrc = 'http://blog.163.com/hongshaoguoguo@126';
var weibo = 'http://weibo.com/u/2706684357';
function showInf(){
alert('姓名:'+username+'n部落格地址:'+blogsrc+'n微博地址:'+weibo);
}
showInf();
</script>
</body>
</html>當前相當於在全域性作用域下建立了3個變數，1個函式，它們四個都屬於window物件，接下來我們來思考一下，如果我們的工作夥伴在書寫js程式碼的時候，也使用了username或者showing此類的變數名或函式名，再將我們的程式碼進行整合，之後會出現什麼問題？——必然會發生變數或函式的覆蓋，從而導致程式碼出現問題。那麼物件名稱空間就是解決這個衝突的好辦法。我們使用一個物件進行這一系列屬性和方法的儲存，讓它們都屬於某一個物件，來看程式碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>面向物件-獨行冰海</title>
</head>
<body>
<script>
var obj = {};
obj.username = '獨行冰海';
obj.blogsrc = 'http://blog.163.com/hongshaoguoguo@126';
obj.weibo = 'http://weibo.com/u/2706684357';
obj.showInf = function (){
alert('姓名:'+obj.username+'n部落格地址:'+obj.blogsrc+'n微博地址:'+obj.weibo);
}
obj.showInf();
</script>
</body>
</html>此時，只有obj這個變數屬於window，而username、blogsrc、weibo、showing都屬於obj，那麼此時如果我們的工作小夥伴們也需要使用到username等屬性或方法，那麼他只需再建立一個屬於他自己的物件，再將這些屬性和方法放置於物件之下，即obj2.username等。
從上面的效果不難看出，如此操作之後，附屬於window這個物件下的屬性和方法的數量大大的減少了，那也就不難理解所謂的“儘可能的防止全域性作用域被汙染，減少命名衝突”這句話了。