面向对象编程-状态模式（js）

最新推荐文章于 2022-09-28 14:18:23 发布

alvyang

最新推荐文章于 2022-09-28 14:18:23 发布

阅读量759

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Alvyang/article/details/50729540

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

面向对象编程-状态模式（js）

本文参考状态模式（js）

rainbow.prototype.init = function(){
	self = this;
	console.log(this);//<span style="color:#ff0000;">this1</span>
	this.button.οnclick=function(){
		console.log(this);//<span style="color:#ff0000;">this2</span>
		self.currentColor.buttonPress.call(self);
	}
};

在以上代码中this1和this2不是同一个this。this1为rainbow创建的对象，this2为点击事件this.button。所有才有self=this代码。

var rainbow = function(){
	this.currentColor = COLOR.red;
	this.button = document.getElementsByClassName("circle")[0];
};
rainbow.prototype.init = function(c){
	self = this;
	this.button.οnclick=function(){
		self.currentColor.buttonPress.call(self);
	}
};
var COLOR = {
	red:{
		buttonPress:function (){
			document.getElementsByClassName("circle")[0].style.backgroundColor = "orange";
			this.currentColor = COLOR.orange;
		}
	},
	orange:{
		buttonPress:function (){
			document.getElementsByClassName("circle")[0].style.backgroundColor = "yellow";
			this.currentColor = COLOR.yellow;
		}
	},
	yellow:{
		buttonPress:function (){
			document.getElementsByClassName("circle")[0].style.backgroundColor = "red";
			this.currentColor = COLOR.red;
		}
	}
};
new rainbow().init("circle");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="../css/style.css" />
		<title>状态模式</title>
		<style>
			.circle{
				width:100px;
				height:100px;
				border-radius: 50%;
				background-color: red;
			    margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class="return_nav">
			<div class="return_nav_img" onClick="javascript:window.location.href='../index.html'"></div>
			状态模式
		</div>
		<div class="circle" ontouchend=""></div>
	</body>
	<script src="index.js"></script>
</html>