用jq学写了一个改css样式的插件却报错

今天新学jq写插件,定义了对象用prototype给对象加方法时却报错未定义是怎么回事啊,以下是我的代码和报错情况。
<!DOCTYPE html>



修改css样式的插件

<br> $(function() {<br> //先定义Haorooms对象<br> var Haorooms = function(element, option) {<br> this.$element = element;<br> //defaluts方法用于存储原有的样式<br> this.defaults = {<br> &quot;color&quot;: &quot;red&quot;,<br> &quot;fontSize&quot;: &quot;12px&quot;,<br> &quot;textDecoration&quot;: &quot;none&quot;<br> },<br> //extend方法能合并$element和option并获得结果,所以option属性保存了调用这个方法的对象和要修改的样式<br> this.option = $.extend({}, this.$element, option);<br> }<br> //给Haorooms对象加上方法changecss<br> Haorooms.prototype.changecss = function(){<br> return this.$element.css({<br> &#39;color&#39;: this.options.color,<br> &#39;fontSize&#39;: this.options.fontSize,<br> &#39;textDecoration&#39;: this.options.textDecoration<br> });<br> };</p> <pre><code> //用$.fn为jq拓展方法,使所有的标签都能使用这个方法 $.fn.myPlugin = function(option) { var haoRooms = Haorooms(this, option); console.log(&quot;样式为:&quot;+haoRooms.changecss()); return haoRooms.changecss(); }; //调用方法,修改样式 $(function() { $(&quot;a&quot;).myPlugin({ &quot;color&quot;: &quot;blue&quot;, &quot;fontSize&quot;: &quot;20px&quot; }); }) }); &lt;/script&gt; </code></pre> <p></head></p> <p><body></p> <h1>这里有一个修改样式的插件</h1> <p></body></p> <p></html><br> <img src="https://img-ask.csdn.net/upload/201703/09/1489062078_582541.png" alt="图片说明"></p>

http://bbs.csdn.net/topics/390512167