Javascript 继承机制的设计思想(原型链)


原型的来源

原始创建类
new 后面跟的不是类,而是构造函数

function Dog (name) {
  this.name = name;
}

var dogA = new Dog('大毛');
alert(dogA.name); //大毛

new 运算的缺点
用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法
例如:

function Dog (name) {
  this.name = name;
  this.species = '犬科';
}

然后生成两个实例对象:

var dogA = new Dog('大毛');
var dogB = new Dog('二毛');

这两个对象的species属性是独立的,修改其中一个,不会影响到另外一个。

dogA.species = '猫科';
alert(dogB.species); //显示"犬科",不受dogA的影响

缺点:每一个实例对象,都有自己的属性和方法的副本。这无法做到数据共享,极大的浪费了资源

prototype属性的引入
这个属性包含一个对象(检查prototype对象),所以实例对象需要共享的属性和方法,都放在这个对象里面,那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引入prototype对象的属性和方法。也就是说,实例对象的属性和方法,分为2种,一种是本地的,另一种是引用的。

  function Dog(name){
    this.name = name;
  }
  Dog.prototype = { species : '犬科' };

  var dogA = new DOG('大毛');
  var dogB = new DOG('二毛');
  alert(dogA.species); // 犬科
  alert(dogB.species); // 犬科

  Dog.prototype.species = '猫科'; //只要修改了prototype对象,就会同时影响2个实例对象
  alert(dogA.species); // 猫科
  alert(dogB.species); // 猫科

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

原型的详解

原型的使用方式
第一种:通过字面量的方式设定对象的原型

var Calculator = function (decimalDigits, tax) {
  this.decimalDigits = decimalDigits;
  this.tax = tax;
};

Calculator.prototype = {
  add: function (x, y) {
    return x + y;
  },
  subtract: function (x, y) {
    return x - y;
  }
};
//alert((new Calculator()).add(1, 3));

第二种:通过function立即执行的表达式来赋值

Calculator.prototype = function () {
  add = function (x, y) {
    return x + y;
  },
  subtract = function (x, y) {
    return x - y;
  }
  return {
    add: add,
    subtract: subtract
  }
} ();
//alert((new Calculator()).add(11, 3));

这种方式的好处:可以封装私有的function, 通过return的形式暴露出简单的使用名称,以达到public/private的效果。

第三种: 分步声明

var BaseCalculator = function () {
  //为每个实例都声明一个小数位数 
  this.decimalDigits = 2;
};

//使用原型给BaseCalculator扩展2个对象方法BaseCalculator.prototype.add = function (x, y) {
  return x + y;
};
BaseCalculator.prototype.subtract = function (x, y) {
  return x - y;
};

使用方式讲完了,接下来让我们开始(承接上面第三种方式的代码):

var Calculator = function () {
  //为每个实例都声明一个税收数字 
  this.tax = 5;
};
Calculator.prototype = new BaseCalculator();

我们可以看到Calculator的原型是指向到BaseCalculator的一个实例上,目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function,还有一点要说的是,由于它的原型是BaseCalculator的一个实例,所以不管你创建多少个Calculator对象实例,他们的原型指向的都是同一个实例。

var calc = new Calculator();alert(calc.add(1, 1));
//BaseCalculator 里声明的decimalDigits属性,在 Calculator里是可以访问到
alert(calc.decimalDigits);

上面的代码,运行后,我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的,所以可以访问他的decimalDigits属性值,那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值,那怎么办呢?这么办:

var Calculator = function () {this.tax= 5;};
Calculator.prototype = BaseCalculator.prototype;

通过将BaseCalculator的原型赋给Calculator的原型,这样你在Calculator的实例上就访问不到那个decimalDigits值了,如果你访问如下代码,那将会提升出错。

var calc = new Calculator();
alert(calc.add(1, 1));
alert(calc.decimalDigits);

重写原型
在使用第三方JS类库的时候,往往有时候他们定义的原型方法是不能满足我们的需要,但是又离不开这个类库,所以这时候我们就需要重写他们的原型中的一个或者多个属性或function,我们可以通过继续声明的同样的add代码的形式来达到覆盖重写前面的add功能,代码如下:

//覆盖前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {
  return x + y + this.tax;
};
var calc = new Calculator();alert(calc.add(1, 1));

原型链

JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻(优先搜对象),还会搜寻该对象的原型,以及该对象的原型的原型,以此层层向上搜,直到找到一个名字匹配的属性或到达原型链的末尾.

我们来看个例子:

function foo() {
  this.add = function (x, y) {
    return x + y;
  }
}

foo.prototype.add = function (x, y) {
  return x + y + 10;
}
Object.prototype.subtract = function (x, y) {
  return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //结果是3,而不是13 
alert(f.subtract(1, 2)); //结果是-1

参考文献:
http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

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

推荐阅读更多精彩内容