面向对象与基于对象--几乎每个开发人员都有面向对象语言(比如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();

在页面上看到的效果

讲述Javascript 实现继承的方式(基础知识)_Javascript