面向对象编程精要-优快云博客

本文深入探讨了面向对象编程的基本概念，包括其核心思想、在JavaScript中的应用以及封装、继承和多态等三大特征。通过具体案例展示了面向对象与面向过程的区别，提供了优化代码结构的有效方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面向对象

面向对象是一种解决问题的思路，一种编程思想。

万事万物都是对象。

在 JavaScript 中，所谓的对象，就是键值对的集合

{ name:"张三", age:18, job:"Programe" }

面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现

面向对象则是关注的实现功能的一系列的对象

面向对象编程案例

设置页面中的 div 和 p标签的样式

方法一：使用函数进行封装优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面向对象</title>
		<style>
			*{padding: 0;margin: 10px;}
		</style>
		<script type="text/javascript">
		window.onload=function(){
		//通过标签方式获取元素
			function myTagName(myTag){		
				return document.getElementsByTagName(myTag);
			}
		//通过id方式获取元素
			function myById(myId){
				return document.getElementById(myId);
			}
		//通过class方式获取元素
			function myByClass(myClass){
				return document.getElementsByClassName(myClass);
			}
		//标签获取
			var div_01=myTagName('div');
//			alert(div_01);		//返回结果：[object HTMLCollection]	通过标签方式获取到 ，返回是一个集合
//			var p_01=myTagName('p');
		//id获取
//			var p_02=myById('pp_01');
//			alert(p_02);		//返回结果：[object HTMLParagraphElement]	通过id方式获取到，返回这个id的p标签
		//class获取
			var div_02=myByClass('div1');
			var p_03=myByClass('p1');
//			alert(div_02);		//返回结果：[object HTMLCollection]	通过class方式获取到 ，返回是一个集合
		//设置样式
		//定义一个函数，用来封装样式		传递元素进入到函数
			function myStyle(HtmlElem){		//HtmlElem是一个集合
				for (var i=0;i<HtmlElem.length;i++) {
					HtmlElem[i].style.width=200+'px';
					HtmlElem[i].style.height=200+'px';
					if (HtmlElem==div_02) {
						HtmlElem[i].style.background='pink';
						HtmlElem[i].style.borderRadius='50%';
						HtmlElem[i].style.float='left';
						HtmlElem[i].style.marginLeft=20+'px';
						if(i==0){
							HtmlElem[i].style.background='tomato';
							HtmlElem[i].style.borderRadius='0 50% 0 50%';
						}
					} else{
						HtmlElem[i].style.background='skyblue';
						HtmlElem[i].style.float='left';
						HtmlElem[i].style.marginLeft=20+'px';
						if (i==0) {
							HtmlElem[i].style.borderRadius='50% 0 50% 0';
							HtmlElem[i].style.background='greenyellow';
						}
					}
				}
			}
			myStyle(div_02);
//			myStyle(div_01);
			myStyle(p_03);
		}
		</script>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
		<p id="pp_01"></p>
		<p class="p1"></p>
		<p class="p1"></p>
	</body>
</html>

方法二：使用面向对象的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一周目</title>
		<script type="text/javascript">
			window.onload=function(){
				var Hi={
					getElem:{
						tag:function (TagNames){
							return document.getElementsByTagName(TagNames);
						},
						id:function(idsNames){
							return document.getElementById(idsNames);
						},
						clas:function(ClassNames){
							return document.getElementsByClassName(ClassNames);
						}
					},
					StyleCss:{
						MyStyle:function (MyGetElem){
							if(MyGetElem.length==undefined){
								MyGetElem.style.width=200+'px';
								MyGetElem.style.height=200+'px';
								MyGetElem.style.background='pink';
								MyGetElem.style.borderRadius='50%';
							}else{
								for (var i=0;i<MyGetElem.length;i++) {
									MyGetElem[i].style.width=200+'px';
									MyGetElem[i].style.height=200+'px';
									if (MyGetElem==divs) {
										MyGetElem[i].style.background='skyblue';
										MyGetElem[i].style.marginTop=10+'px';
										MyGetElem[i].style.borderRadius='50% 0 50% 0';
									} else{
										MyGetElem[i].style.background='tomato';
										MyGetElem[i].style.borderRadius='0 50% 0 50%';
									}
								}
							}
						}
					}
				}
				var divs=Hi.getElem.tag('div');
				var ps=Hi.getElem.tag('p');
				var div1=Hi.getElem.id('div1');
				var p1=Hi.getElem.id('p1');
				Hi.StyleCss.MyStyle(divs);
				Hi.StyleCss.MyStyle(ps);
				Hi.StyleCss.MyStyle(div1);
				Hi.StyleCss.MyStyle(p1);
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div></div>
		<div></div>
		<p id="p1"></p>
		<p></p>
		<p></p>
	</body>
</html>

基于 Object 对象

object:是所有对象的父类

//通过父类的构造函数Object()：创建函数
//实例化		创建一个空的对象
var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
alert(person.getName);		//返回：张三

对象字面量方式

var person = {
name : '张三',
age : 18,
run : function(){
alert('跑');
	}
}
person.run();

面向对象的三大特征

封装

减少代码的冗余，优化代码，可重复使用功能相同的代码，安全性，只有当前的对象才可以访问

代码的后期的可维护性，以及程序可重用性，以及安全和提高效率

继承

子类可以继承父类的特征。

多态

不同的类可以定义相同的方法或属性

在JS中创建构造函数

诸如 Object 和 Array 这样的原生构造函数，在运行时会自动出现在执行环境中。此外，我们也可以创建自定义的构造函数

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
//第一种方法
var person1 = new Person('Weiwei', 27, 'Student');
var person2 = new Person('Lily', 25, 'Doctor');
//第二种方法
var person1=Person()；
person1.name='张三';
person1.age=23;
person1.job='老师'；
alert(person1.name);		//显示结果为：张三