有时候,我们使用电脑的时候,并不知道它的原理是什么,但是就是会使用他,这就是面向对象。同样的,在JavaScript中也可使用这种原理,接下来就随我一起探索一下关于JavaScript面向对象的内容吧。
面向过程和面向对象编程概述
面向过程编程就是分析出解决问题的步骤,然后使用函数把这些步骤一步步实现,重心放在完成的每个过程上。
面向对象则是以封装的思想,将问题分析得到的数据封装成一个个的对象,然后通过对对象的操作来完成相应的功能。
举个栗子:厨师炒菜
以面向过程的思想来分析应该分为下面几个步骤:
?1.检查食材是否齐全2。如果不不够,去菜市场买菜3。洗菜4。开火5。按炒菜(按顺序放入相应的食材,调料等)6。出锅装盘
以面向对象的思想分析则是这样的:
?1.厨师,检查食材,炒菜2。采购员,去菜市场买菜3。墩子,洗菜,切菜,备菜
?通过调用上面对象中的行为方法即可完成炒菜的整个过程
从上面的例子可以看的出,面向对象和面向过程最大的不同在于,面向对象关心的是由哪些对象,每个对象应该有哪些功能,而面向过程关心的是实现过程中的每个步骤。
那么这两种思想到底孰优孰劣呢?从表面上看,貌似面向对象更好,为什么呢?因为它完全符合我们的正常思维方式,所以在接受度方面,面向对象的思想肯定是更好。但是面向过程也有他的优势,就是灵活便捷,而面向对象相对来说会更耗资源,更慢一点。
所以,至于以后使用哪一种,这就需要看我们的具体需求,根据不同的需求做不同的选择。
面向对象编程的相关概念
通过上面的分析,我们知道面向对象的重点在于功能分析和对象的封装上,那么最终我们得到的对象的结构是怎样的,我们继续往下学习。
比如,我通过对人的分析得到,每个人都有姓名,年龄,性别等属性,同时也有吃饭睡觉等行为,那么用JS可以做如下的封装:
var p={
的名字:“小歌”,
年龄:10,
性:1,
吃:函数(){
console.log(吃“饭”);
},
睡眠:函数(){
console.log(“睡觉”);
}
} console.log (p.name);//访问对象的属性
p.eat();//访问对象的方法
上面的p则表示一个对象,其中的名称/年龄/性别称之为对象的属性,吃/睡眠称之为对象的方法,我们通过访问该对象的属性或者方法达到相应的目的即可。
DOM操作相关知识点复习
在学习了html之后我们发现,html文档中的内容其实就是由一堆的标签组成,由于在后面的课程中需要使用到html,所以我们先大致的回顾一下它的结构。
H5-JS面向对象
div h4:元素节点id类:属性节点H5-JS面向对象:文本节点一个html文档主要由这三部分组成,DOM(文档对象模型)是对操作这些元素的属性或者方法进行了封装,从而达到方便快捷的操作html的目的。获取元素对象:. getelementbyid (“div1")访问元素的属性:div1。className访问元素的文本内容:div1。innerText增实现删改元素:div1.appendChild (newNode)下的面,我们就通过这些API来讲解说明面向对象相关的内容。创建并设置标签(面向过程)需求1:创建三个div元素,并设置边框,背景色,文本及字体颜色的(var=0;我& lt;3;我+ +){var div=document.createElement (“div");div.innerText=癲iv" + i;div.style.backgroundColor=癵reen";div.style.border=? px固体# 000“;div.style.color=皐hite";document.body.appendChild (div);}
需求2:为页面中存在的三个p元素设置边框,背景色,文本及字体颜色
我是P1
我是P2
我是P3
需求3:获取页面上三个班=安馐浴钡脑?设置边框,背景色,文本及字体颜色
我是标题1
我是标题2
我是标题3
上面的代码是以面向过程的思想完成的,可以看的到,两个需求中的每个步骤都是我们一步一步完成的,问题很明显,代码大量的冗余,这种代码后期不好维护。
创建并设置标签(函数封装)
对于上面重复的代码,我们可以使用函数对其进行封装
封装了三个函数:
setStype (el,背景):为元素设置样式
el:哪些元素
告诉我们:背景色
getElementsByTagName (tagName):根据元素名称获取指定的元素
tagName:元素名
getElementsByClassName(名称):根据类属性名获取指定的元素
