javascript代码封装

js并不是一种面向对象的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类,

但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.

这个函数中定义了两个方法:show和init 需要注意的是这里用到的是this来声明,而不是var,因为var是用来定义私有方法的

function shapeBase(){

this.show = function(){

alert("shapeBase show");

};

this.init = function(){

alert("shapeBase init")

};

}

// 我们也可以用prototype来定义shape方法  prototype可以理解为一个类方法(相当于css里面的一个类)

ShapeBase.prototype.show=function()

{

alert("ShapeBase show");

}

ShapeBase.prototype.init=function()

{

alert("ShapeBase init");

}

//上面这种方法不太直观

ShapeBase.prototype={

show:function(){

alert("ShapeBase show");

},

init:function() {

alert("ShapeBase init");

}

};

// 现在, 类是写好了, 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?

//代码如下:

function test(src){

var s=new ShapeBase();

s.init();

s.show();

}

//调用的方式和c#一模一样 但还只是实例方法 如何实现c#中的静态方法呢?

//代码如下;

//静态方法

ShapeBase.StaticDraw = function()

{

alert("method draw is static");

}

// 2>实现js类的继承

// 同样, js中也不支持类继承机制,但我们可以通过将父类prototype中的成员方法复制到子类的prototype中来实现.

// 和类的继承一样,JavaScript也没有任何机制用于支持抽象类.但利用JavaScript语言本身的性质.可以实现自己的抽象类.

// 首先来看看js中的虚方法, 在传统语言中虚方法是要先定义的, 而包含虚方法的类就是抽象类,不能被实例化,而在JavaScript中,虚方法就可以看作该类中没有定义的方法,但已经通过this指针使用了.

// 和传统面向对象不同的是,这里虚方法不需经过声明,而直接使用了, 并且类也可以被实例化.

// 先定义object的extend方法, 一个为静态方法,一个为实例方法, 这两个方法用于实现继承的prototype复制

// 代码如下:

Object.extend = function(destination, source) {

for (property in source) {

destination[property] = source[property];

}

return destination;

}

Object.prototype.extend = function(object) {

return Object.extend.apply(this, [this, object]);

}

// 接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。

// 代码如下:

function Rect() { }

Rect.prototype = ShapeBase.prototype; //只这一句就行了

//扩充新的方法

Rect.prototype.add=function() {

alert("Rect add");

}

// 这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址.

// 如果上面也定义了:

Rect.prototype.show=function() {

alert("Rect show");

}

//那么执行结果如下:

function test(){

var s=new ShapeBase();

s.show(); //结果:Rect show

var r=new Rect();

r.show(); //结果:Rect show

r.add();

}

// 我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下:

// 代码如下:

ShapeBase.prototype={

show:function()

{

alert("ShapeBase show");

},

initialize:function () {

this.oninit();

}

};

// 实现Rect类继承.

// 代码如下:

Rect.prototype=(new ShapeBase).extend({

//添加新的方法

add:function() {

alert("Rect add");

},

//使用这种方法可以重写show方法

show:function() {

alert("Rect show");

},

//实现虚方法

oninit:function() {

alert("Rect oninit");

}

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,140评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,716评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,054评论 1 10
  • 洪荒之初,天地尚分,有一灵婴吸天地之灵气诞生于八荒之间。霎时间,地动山摇,四方大世界六方小世界皆受波及…… ...
    三尺寒鸦阅读 179评论 0 0
  • 823fdd1d51c4阅读 154评论 0 1