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

来源：互联网发布：银河麒麟软件下载编辑：程序博客网时间：2024/06/05 12:07

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

本文参考状态模式（js）

rainbow.prototype.init = function(){self = this;console.log(this);//<span style="color:#ff0000;">this1</span>this.button.onclick=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.onclick=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>

0 0