瞎扯.javascript面向对象

已经忘了多久没拿起javascirpt的书本了,无聊中拾起快被我遗忘在角落的书本<javascript高级程序设计>。

尼古拉斯竟然把这么奇葩的js面向对象说的这么好

从最原始的工厂模板说起

function createPerson(name,age){

 var o = new Object();

 o.name = name;

 o.age = age;

o.sayName = function(){

  console.log(this.name);

}

 return o;

}

这样,but...等等,如何知道创建的对象是什么类型的?

构造函数模式

function Person(name,age){

this.name = name;

this.age = age;

this.sayName = function(){

}

var person1 = new Person("三毛",25);

简洁了不少,问题又来了:难道我每次new一个对象,就要重新创建个sayName函数吗?为什么这么说?

函数也是对象,每次实例化Person时,都会实例化一个sayName Function。也就是说:每个Person的示例,都有一个不同的sayName Function实例。何必如此?

理解原型模式

原型模式很好的解决了上述问题,这么说吧,每个function都有一个prototype属性(我们叫原型),指向一个原型对象。

所以,我们可以把公共的方法属性都加到它上面。

function Person(){

}

Person.prototype.name = "三毛";

Person.prototype.age = 25;

Person.prototype.sayName = function(){

 console.log(this.name);

}

把属性方法加到了函数的prototype(实际上也是个对象)上,后续创建的实例对象都从这个原型对象上继承了属性和方法。

然而,它也不是完美的。原型对象的问题也是显而易见的:由于所有的实例都是共享原型对象的方法属性,那么意思就是说所有的实例共享了一份属性方法!那创建的实例还有个毛用?

联想到前面我们提过的构造函数模式,我们可以把构造函数+原型模式结合起来。

构造函数负责自有的属性,而原型对象负责公共的方法,一种新的模式应运而生:

组合模式

Person.prototype.sayName = function(){

console.log(this.name);

}

完美解决了构造函数模式和原型模式的问题。

再谈谈javascript继承

在“理解原型模式”中,已经谈到了js的原型模式,而js的继承就是依靠原型链来实现的。

js原型链

我们来简单回顾下前面讲过的内容:

1 每个构造函数都有一个原型对象;

2 原型对象包含一个指向构造函数的指针(证明自己是从哪来的);

3 构造函数的实例(这么说可能有点不准确)包含一个指向原型对象的指针。

有点晕,感觉有点像三角恋,看个实例:

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

 return this.property;

}

function SubType(){

 this.subproperty = false;

}

//继承,使SubType的原型指向SuperType的原型

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){

 return this.subproperty;

}

var instance = new SubType();

console.log(instance.getSuperValue());//true,实际上是SuperType的值

看以看出,单独使用原型链实现继承,实际上生成的实例都是共享一份属性或者方法的。

那么,实例就没有意义了。

那如果借用构造函数呢?

我们知道,构造函数只能实现对实例属性的继承,没办法实现方法的继承,所以如果单独使用构造函数模式,方法就需要都写在构造函数里面,函数复用就无从谈起了。

组合继承

组合继承借用了原型链实现原型属性和方法的继承,又可以通过构造函数实现实例属性的继承。可以说既实现了函数复用,又保证每个实例都有自己的属性。

function SuperType(name){

 this.name = name;

 this.colors = ["red", "blue"];

}

SuperType.prototype.sayName = function(){

 console.log(this.name);

}

function SubType(name,age){

 SuperType.call(this,name);//在当前实例环境下执行SuperType构造函数->2

 this.age = age;

}

SubType.prototype = new SuperType();//->1

SubType.prototype.sayAge = function(){

 console.log(this.age);

}

看以看到,这种模式结合了两者的优点,又弥补了相互的不足。可以说,是一种不错的用于实现继承的方法。

但是,这种方法并不是最好的,我们来详细看一下:

1 为了实现继承,第一点调用了SuperType的构造函数,这样SubType.prototype继承了两个属性

2 SubType构造函数内部,又调用了一次SubType构造函数,显得有些多余了

寄生组合继承

通过借用构造函数来继承属性,通过原型链来继承方法。

function object(super){

 var func = function(){};

 func.prototype = super;

 var o = new func();

 return o;

}

function inheritPrototype(sub,super){

 var prototype = object(super.prototype);

 prototype.constructor = sub;

 sub.prototype = prototype;

}

这是寄生组合继承的简单形式。

通过接受子构造函数和父构造函数,第一步创建父类型原型的一个副本;

第二步为副本添加constructor属性,最后再把新的原型赋给子原型,完美实现了继承关系。

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

推荐阅读更多精彩内容