HTML5學堂：面向對象、原型、繼承應該說是屬於JavaScript最底層的知識和概念，對於這些知識，在咱們沒有觸碰的時候的確以爲是比較困難的，包括在學習的過程當中，也以爲摸不到頭腦，可是當走過以後，發現也沒有那麼難。面向對象，從認識對象開始。爲了方便你們學習和查看，因此特地控制了文章的篇幅，將面向對象寫成了多篇連續博文的方式，也方便你們根據本身具體狀況進行選擇性的學習。html
在本身最初學習面向對象的時候，一直陷入了一個誤區。當時本身知道this和麪向對象相關，也知道原型prototype和麪向對象相關，因而，在最初進行面向對象代碼書寫的時候，直接就使用this開始書寫，可是邏輯上倒是錯亂的。同時，面向對象這個東西一般是用於一些模塊化開發當中，在接觸到一個比較通用模塊以前，本身並不清楚面向對象在JS中的用法。前端
隨着時間的推移，和對面向對象的理解的逐步深刻，本身也就慢慢捋順了面向對象的代碼開發的實際順序和邏輯。在此書寫出來，但願各位不要像我同樣繞彎路。web
對象命名空間
在講解面向對象以前，先來說解一下對象命名空間。咱們常說，常見避免js命名衝突的方法有三種，分別是匿名函數、協同命名以及對象命名空間。那麼這個對象命名空間究竟是個什麼玩意兒呢？來看下面這段代碼：微信
<!doctype html>模塊化
<html>函數
<head>學習
<meta charset="UTF-8">this
<title>面向對象-獨行冰海</title>spa
</head>.net
<body>
<script>
var username = '獨行冰海';
</script>
</body>
</html>
全局做用域
咱們在全局做用域定義了一個變量，變量名爲username。在以前的博文中咱們曾經介紹過，在全局做用域指的是window。那麼在全局做用域定義的變量或者函數均可以看作是window的屬性（變量）或方法（函數），那麼此時window其實就是username這個屬性的對象。也就是說：username 等價於 window.username;來看下面這段代碼：
歡迎溝通交流~HTML5學堂
<!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這個對象下的屬性和方法的數量大大的減小了，那也就不難理解所謂的「儘量的防止全局做用域被污染，減小命名衝突」這句話了。
HTML5學堂技術交流羣
（長按二維碼）
本文分享自微信公衆號 - HTML5 WEB前端分享（h5course-com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。