javascript

位置:IT落伍者 >> javascript >> 浏览文章

Javascript 继承实现方式


发布日期:2020年05月31日
 
Javascript 继承实现方式

面向对象与基于对象

几乎每个开发人员都有面向对象语言(比如C++C#Java)的开发经验 在传统面向对象的语言中有两个非常重要的概念 类和实例 类定义了一类事物公共的行为和方法而实例则是类的一个具体实现 我们还知道面向对象编程有三个重要的概念 封装继承和多态

但是在JavaScript的世界中所有的这一切特性似乎都不存在 因为JavaScript本身不是面向对象的语言而是基于对象的语言 这里面就有一些有趣的特性比如JavaScript中所有事物都是对象 包括字符串数组日期数字甚至是函数比如下面这个例子

var doc; //定义了一个doc基类

doc=(function(){

var _d;

function doc(){

this_d=windowdocument;

}

docprototypeecho=function(){

this_dwrite(hell world

return ;

} //定义了一个属性echo

return doc;

})()

使用

var mydoc=new doc()

mydocecho() //在页面显示hell world

模拟JavaScript中类和继承

/*

* 作者杨贤喜

* 开发时间

* 联系方式

*/

//原自typescript 思路

var __extends = this__extends || function(ab){

function __(){ nstructor=a;}

__prototype=bprototype;

aprototype=new __()

}

这就需要引入另外一个概念 原型(prototype)我们可以简单的把prototype看做是一个模版新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接只不过这种链接是不可见给人们的感觉好像是拷贝)

实现类的继承

//DocMulit 继承doc

var DocMulit=(function(_doc){

__extends(DocMulit_doc)

var txtbut;

function DocMulit(){

_doccall(this)

txt= this_dcreateElement(input

but=this_dcreateElement(button

butinnerText=单击这里;

butonclick=function(){

if(txtvalue==) {

txtfocus() //consolelog(txt)

}else{

var doc_p=new DocP(txtvalue)

doc_pecho()

}

}

}

//重写父类的 echo 的方法

DocMulitprototypeecho=function(){

_docprototypeechocall(this)//调用父类的echo方法

this_dbodyappendChild(txt)

this_dbodyappendChild(but)

}

return DocMulit;

})(doc)

//DocP 继承doc

var DocP=(function(_doc){

__extends(DocP_doc)

var p_tar;

function DocP(tar){

_doccall(this)

this_d=windowdocument;

thisp_tar=this_dcreateElement(p

thisp_tarinnerText=tar;

thisp_tarsetAttribute(titleClick here of delete

thisp_tarsetAttribute(stylecursor:pointer;

thisp_taronclick=function(){

if(confirm(You are delete?)){

windowdocumentbodyremoveChild(this)

}

}

}

//重写父类的echo方法

DocPprototypeecho=function(){

this_dbodyappendChild(thisp_tar)

}

return DocP;

})(doc)

//实例化doc继承类DocMulit

var mydoc=new DocMulit()

mydocecho()

在页面上看到的效果

上一篇:javascript的几种排序方法

下一篇:JavaScript对象与数组参考大全2