面向对象与基于对象
几乎每个开发人员都有面向对象语言（比如C++、C#、Java）的开发经验。 在传统面向对象的语言中，有两个非常重要的概念 - 类和实例。 类定义了一类事物公共的行为和方法；而实例则是类的一个具体实现。 我们还知道，面向对象编程有三个重要的概念 - 封装、继承和多态。
但是在JavaScript的世界中，所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言，而是基于对象的语言。 这里面就有一些有趣的特性，比如JavaScript中所有事物都是对象， 包括字符串、数组、日期、数字，甚至是函数，比如下面这个例子：
| var doc; //定义了一个doc基类 doc=(function(){ var _d; function doc(){ this._d=window.document; } doc.prototype.echo=function(){ this._d.write("hell world"); return 1; } //定义了一个属性echo return doc; })(); |
使用：
| var mydoc=new doc(); mydoc.echo(); //在页面显示hell world |
模拟JavaScript中类和继承
| /* * 作者：杨贤喜 * 开发时间：2012-10-18 * 联系方式：120715852@qq.com */ //原自typescript 思路 var __extends = this.__extends || function(a,b){ function __(){ this.constructor=a;} __.prototype=b.prototype; a.prototype=new __(); } |
这就需要引入另外一个概念 - 原型（prototype），我们可以简单的把prototype看做是一个模版，新创建的自定义对象都是这个模版（prototype）的一个拷贝 （实际上不是拷贝而是链接，只不过这种链接是不可见，给人们的感觉好像是拷贝）。
实现类的继承
| //DocMulit 继承doc var DocMulit=(function(_doc){ __extends(DocMulit,_doc); var txt,but; function DocMulit(){ _doc.call(this); txt= this._d.createElement("input"); but=this._d.createElement("button"); but.innerText="单击这里"; but.onclick=function(){ if(txt.value=='') { txt.focus(); //console.log(txt); }else{ var doc_p=new DocP(txt.value); doc_p.echo(); } } } //重写父类的 echo 的方法 DocMulit.prototype.echo=function(){ _doc.prototype.echo.call(this);//调用父类的echo方法 this._d.body.appendChild(txt); this._d.body.appendChild(but); } return DocMulit; })(doc); //DocP 继承doc var DocP=(function(_doc){ __extends(DocP,_doc); var p_tar; function DocP(tar){ _doc.call(this); this._d=window.document; this.p_tar=this._d.createElement("p"); this.p_tar.innerText=tar; this.p_tar.setAttribute("title","Click here of delete"); this.p_tar.setAttribute("style","cursor:pointer;"); this.p_tar.onclick=function(){ if(confirm('You are delete?')){ window.document.body.removeChild(this); } } } //重写父类的echo方法 DocP.prototype.echo=function(){ this._d.body.appendChild(this.p_tar); } return DocP; })(doc); //实例化doc继承类DocMulit var mydoc=new DocMulit(); mydoc.echo(); |
在页面上看到的效果
