JS扩展类、克隆对象和混合类实例分析

本文介绍JS扩展类、克隆对象和混合类：

1。类型的扩展名
editinplacefield / * * /
扩展函数*
功能扩展（子类，父类）{
Var（f =函数）{ }；
f.prototype = superclass.prototype；
subclass.prototype =新的f（）；
subclass.prototype.constructor =子类；
subclass.superclass = superclass.prototype；
如果（superclass.prototype.constructor = =对象。原型。构造函数）{
superclass.prototype.constructor =父类；
}
}
函数的EditInPlaceField（ID，家长，值）{ / /构造函数
this.id = ID；
this.value = value'default价值| |；
this.parentelement =母；
this.createelements（这个ID）；
this.attachevents（）；
}；
editinplacefield.prototype = { {
CreateElements：功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'span）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
This.fieldElement = document.createElement ('input');
this.fieldelement.type =中；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}，
attachevents：函数（）{
var =；
AddEvent（这个。staticelement，听到咔哒声，函数（）{ that.converttoeditable（）；}）；
AddEvent（这个。savebutton，听到咔哒声，函数（）{ that.save（）；}）；
AddEvent（这。点击，听到咔哒声，函数（）{ that.cancel（）；}）；
}，
converttoeditable：函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display = '内联'；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}，
保存：函数（）{
this.value = this.getvalue（）；
var =；
var回调{ {
成功：函数（）{ that.converttotext（）；}，
失败：函数（）{ alert（错误节约价值。'）；}
}；
AjaxRequest（' '，保存。phpid = + + = + this.value this.id币值，回调）；
}，
取消：函数（）{
This.convertToText（）；
}，
converttotext：函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display = '内联'；
This.setValue（的价值）；
}，
设定值：函数（值）{
this.fieldelement.value =价值；
this.staticelement.innerhtml =价值；
}，
GetValue：函数（）{
返回this.fieldelement.value；
}
}；
无功titleclassical =新editinplacefield（'titleclassical，$（'doc '），标题下面）；
无功currenttitletext = titleclassical.getvalue（）；
editinplacearea / * * /
功能editinplacearea（ID，家长，值）{
editinplacearea.superclass.constructor.call（这个ID，母公司的价值）；
}；
（editinplacearea延伸，EditInPlaceField）；
一定的方法。重写
editinplacearea.prototype.createelements =功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'p'）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
this.fieldelement = document.createelement（'textarea）；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}；
editinplacearea.prototype.converttoeditable =函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display =阻止；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}；
editinplacearea.prototype.converttotext =函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display =阻止；
This.setValue（的价值）；
}；

2。对象的克隆
editinplacefield / * * /
克隆函数*
函数克隆（对象）{
函数（f）{ }
f.prototype =对象；
返回新f；
}
无功editinplacefield = { {
配置：函数（id，父，值）{
this.id = ID；
this.value = value'default价值| |；
this.parentelement =母；
this.createelements（这个ID）；
this.attachevents（）；
}，
CreateElements：功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'span）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
this.fieldelement = document.createelement（输入的）；
this.fieldelement.type =中；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}，
attachevents：函数（）{
var =；
AddEvent（这个。staticelement，听到咔哒声，函数（）{ that.converttoeditable（）；}）；
AddEvent（这个。savebutton，听到咔哒声，函数（）{ that.save（）；}）；
AddEvent（这。点击，听到咔哒声，函数（）{ that.cancel（）；}）；
}，
converttoeditable：函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display = '内联'；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}，
保存：函数（）{
this.value = this.getvalue（）；
var =；
var回调{ {
成功：函数（）{ that.converttotext（）；}，
失败：函数（）{ alert（错误节约价值。'）；}
}；
AjaxRequest（' '，保存。phpid = + + = + this.value this.id币值，回调）；
}，
取消：函数（）{
This.convertToText（）；
}，
converttotext：函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display = '内联'；
This.setValue（的价值）；
}，
设定值：函数（值）{
this.fieldelement.value =价值；
this.staticelement.innerhtml =价值；
}，
GetValue：函数（）{
返回this.fieldelement.value；
}
}；
无功titleprototypal =克隆（editinplacefield）；
titleprototypal.configure（'titleprototypal，$（'doc '），标题下面）；
无功currenttitletext = titleprototypal.getvalue（）；
editinplacearea / * * /
无功editinplacearea =克隆（editinplacefield）；
一定的方法。重写
editinplacearea.createelements =功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'p'）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
this.fieldelement = document.createelement（'textarea）；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}；
editinplacearea.converttoeditable =函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display =阻止；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}；
editinplacearea.converttotext =函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display =阻止；
This.setValue（的价值）；
}；

三.混合班
混合类
混合函数*
功能扩展（receivingclass，givingclass）{
对于（在givingclass。原型methodename）{
如果（！ReceivingClass。原型{语句}）{
ReceivingClass。原型{语句} = { } givingclass原型语句；
}
}
}
*改进的递增函数。
功能扩展（receivingclass，givingclass）{
如果（参数{ 2 }给定某些），则只使用方法。
对于（var i = 2，len = arguments.length；我< len；i++）{
ReceivingClass。样机参数{我} } = { givingclass。原型参数{我} { }；
}
}
否则所有方法。{给予
对于（在givingclass。原型methodename）{
如果（！ReceivingClass。原型{语句}）{
ReceivingClass。原型{语句} = { } givingclass原型语句；
}
}
}
}
Var（editinplacemixin =功能）{ }；
editinplacemixin.prototype = { {
CreateElements：功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'span）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
this.fieldelement = document.createelement（输入的）；
this.fieldelement.type =中；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}，
attachevents：函数（）{
var =；
AddEvent（这个。staticelement，听到咔哒声，函数（）{ that.converttoeditable（）；}）；
AddEvent（这个。savebutton，听到咔哒声，函数（）{ that.save（）；}）；
AddEvent（这。点击，听到咔哒声，函数（）{ that.cancel（）；}）；
}，
converttoeditable：函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display = '内联'；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}，
保存：函数（）{
this.value = this.getvalue（）；
var =；
var回调{ {
Success: function () {that.convertToText ();},
失败：函数（）{ alert（错误节约价值。'）；}
}；
AjaxRequest（' '，保存。phpid = + + = + this.value this.id币值，回调）；
}，
取消：函数（）{
This.convertToText（）；
}，
converttotext：函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display = '内联'；
This.setValue（的价值）；
}，
设定值：函数（值）{
this.fieldelement.value =价值；
this.staticelement.innerhtml =价值；
}，
GetValue：函数（）{
返回this.fieldelement.value；
}
}；
editinplacefield类。
函数的EditInPlaceField（ID，家长，值）{
this.id = ID；
this.value = value'default价值| |；
this.parentelement =母；
this.createelements（这个ID）；
this.attachevents（）；
}；
增加（editinplacefield，EditInPlaceMixin）；
editinplacearea类。
功能editinplacearea（ID，家长，值）{
this.id = ID；
this.value = value'default价值| |；
this.parentelement =母；
this.createelements（这个ID）；
this.attachevents（）；
}；
添加某些方法，以增加/不包括它们。
editinplacearea.prototype.createelements =功能（ID）{
this.containerelement = document.createelement（'div）；
this.parentelement.appendchild（这个。containerelement）；
this.staticelement = document.createelement（'p'）；
this.containerelement.appendchild（这个。staticelement）；
this.staticelement.innerhtml = this.value；
this.fieldelement = document.createelement（'textarea）；
this.fieldelement.value = this.value；
this.containerelement.appendchild（这个。fieldelement）；
this.savebutton = document.createelement（输入的）；
this.savebutton.type =按钮；
this.savebutton.value =保存；
this.containerelement.appendchild（这个。savebutton）；
this.cancelbutton = document.createelement（输入的）；
this.cancelbutton.type =按钮；
this.cancelbutton.value = 'cancel；
（这this.containerelement.appendchild。点击）；
This.convertToText（）；
}；
editinplacearea.prototype.converttoeditable =函数（）{
this.staticelement.style.display =不关；
this.fieldelement.style.display =阻止；
this.savebutton.style.display = '内联'；
this.cancelbutton.style.display = '内联'；
This.setValue（的价值）；
}；
editinplacearea.prototype.converttotext =函数（）{
this.fieldelement.style.display =不关；
this.savebutton.style.display =不关；
this.cancelbutton.style.display =不关；
this.staticelement.style.display =阻止；
This.setValue（的价值）；
}；
增加（editinplacearea，EditInPlaceMixin）；

点评：uff1a

js分为类、对象和函数。

它还包含各种形式、属性、数组属性、函数、私有函数、公共函数、静态函数。

小的基本方法可以有大的用途，如扩展方法、克隆方法和增强方法。

更多有关Javaｓｃｒｉｐｔ相关内容的内容可以查看站点：

希望本文能对javaｓｃｒｉｐｔ程序设计有所帮助。