面向对象系列讲解—认识对象

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这个对象下的属性和方法的数量大大的减少了,那也就不难理解所谓的“尽可能的防止全局作用域被污染,减少命名冲突”这句话了。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-02-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏学习力

《Java从入门到放弃》JavaSE入门篇:异常

1743
来自专栏木可大大

【福利】全网最热Python3入门+进阶 更快上手实际开发

最近有不少朋友问我该如何学习Python,因此,本期为大家分享的福利是 " 全网最热Python3入门+进阶 更快上手实际开发"课程,该课程将带你从基础入门Py...

7488
来自专栏Java学习网

编程基础知识:函数签名学习

编程功能的基本单位。你建立你的程序一个函数(或方法)。最小的东西您可以测试在单元测试是一个函数。也是最小的一个函数的代码名称,因此可以创建一个新的抽象。函数的目...

3065
来自专栏java学习

Java每日一练(2017/7/25)

最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

2565
来自专栏ThoughtWorks

Scala中的语言特性是如何实现的?

image.png #思特沃克好声音# (图片:网络) 我们学东西不止要知其然,还要知其所以然。成都办公室的崔鹏飞在学Scala的时候,不止学习如何使用Scal...

3047
来自专栏java一日一条

请不要再说 Java 中 final 方法比非 final 性能更好了

总结:你说final的性能比非final有没有提升呢?可以说有,但几乎可以忽略不计。如果单纯地追求性能,而将所有的方法修改为 final 的话,我认为这样子是不...

792
来自专栏栗霖积跬步之旅

一天一个设计模式:工厂方法模式

  随着实际需要的工厂数量增加,简单工厂模式体积会迅速膨胀,代码迅速臃肿严重。   补充:工厂方法模式是针对一类产品的工厂

1695
来自专栏web前端

JavaScript之对数组中元素进行增删改

JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂。从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并...

18610
来自专栏java学习

Java每日一练(2017/7/16)

最新通知 ●回复"每日一练"获取以前的题目! ●【新】Ajax知识点视频更新了!(回复【学习视频】获取下载链接) ●答案公布时间:为每期发布题目的第二天 ★【新...

2907
来自专栏Java技术分享圈

杨老师课堂_Java教程第五篇之函数运用

今天主要是讲解以下知识点: 1、方法基础知识 2、方法高级内容 3、方法案例

872

扫码关注云+社区