JavaScript面向对象class_class b ip oo cont-CSDN博客

本文链接：https://blog.csdn.net/oooooouoChanl_/article/details/104761818

JavaScript面向对象class

本周逆战班学习的主题是“面向对象”，很多人觉得面向对象很难理解，但其实我们早就在面向对象的思想之中了，今天就让我们再重新认识一下他，主要介绍一下ES6中新增的class类…

面向对象是一种高级的编程思想OO（Object Oriented）

从最开始面向二进制，面向指令，面向自然语言编程，到现如今的面向对象，顾名思义，对象“Object”就是整个思想的中心。面向对象其实就是一种符合我们人类思维习惯的编程思想。

提到面向对象，自然就会想到面向过程，面向过程就分析解决问题所需要的步骤，例如将大象装入冰箱，需要几步，需要哪几步，按照步骤用函数将这些一一实现，而面向对象就是将需要解决的问题分解成多个独立的对象，通过调用对象的方法来解决问题。这样子当程序发生改变，我们只要找到相对应的对象进行修改，就方便的多。

1、面向对象的特点：封装性（忽略细节，选择执行，重复使用）、继承性（方便的扩展，子拿父）和多态性（多种形态，可以实现动态的扩展）；
2、面向对象的优势：信息的查找速度快，信息的传播速度快

★3、js面向对象class

随着ES6中关键词class的出现，使得定义类变得更加的简单。
语法格式：

//class CreatePerson{
    //     constructor ( ){ }
    //     自定义方法名( ){ }
// }
// new CreatePerson( );

首先用函数实现CreatePerson的方法：

function CreatePerson(n,a){
        this.name = n;
        this.age = a;
    }
    CreatePerson.prototype.show = function(){
        console.log(this.name + "---" + this.age);
    }

如果用class关键字来写CreatePerson，

class CreatePerson{
        constructor(n,a){
            this.name = n;
            this.age = a;
        }
        show(){
            console.log(this.name + "---" + this.age);
        }
    }

var p1 = new CreatePerson("admin",18);
p1.show();

尽管看上去代码变长了，但是仔细观察，我们会发现结构变得更加的清晰,我们可以发现CreatePerson等价于构造函数的名字，
constructor( ){ }等价于构造函数的函数体，
自定义方法名( ){ }等价于绑定在构造函数原型上的方法。

我们可以看一个选项卡的例子来加深一下印象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#box{height: 400px;width:550px;border: 2px solid #000;margin: 20px auto;}
			ul{display: flex;}
			ul li{flex: 1;height:40px;border-right:2px solid #000 ;list-style: none;font:18px/40px "";text-align: center;}
			ul li:last-child{border-right:none;}
			ul li.active{background: #9370DB;color: #F0F;}
			.cont div{height: 360px;width:550px;display: none;}
			.cont .cont1{background: #00FF00;display:block;}
			.cont .cont2{background: #008000;}
			.cont .cont3{background: #555555;}
	</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div class="cont">
				<div class="cont1"></div>
				<div class="cont2"></div>
				<div class="cont3"></div>
			</div>
		</div>
	</body>
	<script>
		// 选项卡分析：
	        // 1.选择元素（属性）
	        // 2.绑定事件（方法）
	        // 3.样式的改变（方法）
		class Tab{
			constructor(){
				// 1.选择元素（属性）
				this.li=document.querySelectorAll("#box li");
				this.div=document.querySelectorAll(".cont div");
			}
			addEvent(){
				// 2.绑定事件（方法）
				var that=this;
				for(let i=0;i<this.li.length;i++){
					this.li[i].onclick=function(){
						that.change(i);	
					}
				}
			}
			change(a){
				// 3.样式的改变(方法)
				for(var i=0;i<this.li.length;i++){
					this.li[i].className="";
					this.div[i].style.display="none";
				}
				this.li[a].className="active";
				this.div[a].style.display="block";
			}
		}
		var t=new Tab();
		t.addEvent();
	</script>
</html>