JavaScript面向对象-基于原型链和函数伪装组合的方式实现继承

上文提到我们不会单独使用基于函数伪造的方式实现继承,而是会使用基于原型链和函数伪装组合的方式实现继承。这种继承方式也叫伪经典继承,它的思想是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个实例都有它自己的属性。

来看下面的例子,我们先列出基于原型链和函数伪装组合的方式实现继承完整的代码,然后再对代码中的每一步做内存模型分析。

// 第一部分
function Parent(name){
   this .color = [ "red" , "blue" ];
   this .name = name;
}
Parent.prototype.talk = function (){
   alert( this .name+ "[" + this .color+ "]" );
}
 
// 第二部分
function Child(name,age){
   //函数伪造继承
   Parent.call( this ,name);
   this .age = age;
}
 
// 原型链继承
Child.prototype = new Parent();
 
Child.prototype.say = function (){
   alert( this .name+ "," + this .color);
}
 
//第三部分
var c1 = new Child( "Leon" ,22);
c1.color.push( "green" );
c1.say();     // 输出:Leon[red,blue,green]
var c2 = new Child( "Ada" ,25);
c2.say();     // 输出:Ada[red,blue]                           

我们先来看代码中的第一部分,在这段代码中,我们创建了父类Parent,并为它添加了2个属性。然后在Parent的原型中添加一个方法talk()。此时的内存模型如下图所示:

基于原型链和函数伪装组合的方式实现继承内存模型图-1

接下来在代码的第二部分,我们创建了子类Child,在子类Child内部使用函数伪造的方式继承父类的属性。然后通过原型链继承的方式使子类的原型指向父类对象,并在新的子类原型上添加了一个say()方法。此时的内存模型如下图所示:

基于原型链和函数伪装组合的方式实现继承内存模型图-2

最后,在第三部分代码中,我们分别创建了两个子类对象c1和c2。然后为c1对象的color属性添加一个新的颜色,并调用c1的say()方法,对于c2同样也调用它的say()方法。此时的内存模型如下图所示:

基于原型链和函数伪装组合的方式实现继承内存模型图-3

我们可以看到,为对象的引用类型属性设置值是在它自己的空间中完成的,这样每一个对象都有它自己独立的属性,互不干扰。

以上就是基于原型链和函数伪装组合的方式实现继承的完整代码和内存模型分析,也是我们在JavaScript中最常用的一种实现继承的方式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值