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源创计划”，欢迎正在阅读的你也加入，一块儿分享。