当前位置： 首页 > news >正文

JavaScript对象继承

news 来源：原创 2025/5/24 6:27:36

1.继承

继承是面向对象编程中讨论最多的话题,很多面向对象语言都支持两种继承:接口继承和实现继承,前者只继承方法签名,后者继承实际的方法,接口继承在ECMAScript中是不可能的,因为函数没有签名,实现继承是js唯一支持的继承方式,而这主要是通过原型链实现的 

2.原型链 

其基本思想就是通过原型继承多个引用类型的属性和方法,重温一下构造函数,原型和实例的关系: 每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型,如果原型是另一个类型的实例呢?那就以为着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数,这样就在就在实例和原型之间构造成了一条原型链,这就是原型链的基本构想

// 父类构造函数
function SuperType(){this.property = true; 
}// 父类原型方法
SuperType.prototype.getSuperValue = function(){return this.property; 
}// 子类构造函数
function SubType(){this.subproperty = false;
}// 子类继承父类（原型继承）实例
SubType.prototype = new SuperType();// 子类原型方法
SubType.prototype.getSubValue = function(){return this.subproperty;
}; // 创建子类实例
let instance = new SubType();// 调用父类方法，验证继承成功
console.log(instance.getSuperValue()); // true

SubType通过创建SuperType的实例并将其赋值给自己的原型SubType.prototype实现了对SuperType的继承,这个复制重写了SuperType最初的原型,将其替换为SuperType的实例

这意味着,SuperType 实例可以访问的所有属性和方法也会存在于SubType.prototype

执行 SubType.prototype = new SuperType() 后：

instance --> SubType.prototype --> SuperType.prototype --> Object.prototype 

在js中,实现继承的关键在于子类不再使用默认的原型对象,而是将其原型替换为父类的一个实例

SubType.prototype=new SuperType(); 

这行代码的核心作用是: 

  • 让SubType.prototype成为一个SuperType的实例,从而具备了父类实例的属性; 
  • 同时这个实例的原型(即_proto_)指向SuperType.prototype,继而实现了对父类原型的继承

 注意: 方法getSuperValue()存在于SuperType.prototype上(因为是定义在原型上的方法),而属性property存在于SubType.prototype上(因为它是通过new SuperType())创建的实例 

属性查找过程

当我们调用: 

instance.getSuperValue()

引擎会按照以下顺序查找属性 : 

  1. 现在instance自身查找;
  2. 没有找到,则进入其原型SubType.prototype; 
  3. 再进入其原型的原型SuperType.prototype; 
  4. 最终在SuperType.prototype中找到方法并执行

这个过程就叫做原型链查找机制,它贯穿了js的继承模型 

3. 默认原型

默认情况下,所有引用类型都继承自Object.这也是通过原型链实现的,任何函数的默认原型都是一个Object的实例,这意味着这个实例有一个内部指针指向Object.prototype, 这也是为什么自定义类型能够继承包括toString(),valueOf()在内的所有默认方法的原因,因此前面的例子还有额外一层继承关系

 SubType继承SuperType,而SuperType继承Object,在调用instance.toString()时,实际调用的是保存在Object.prototype上的方法  

4.原型与继承的关系

原型与实例的关系可以通过两种方式来确定,

1. 是用instanceof操作符,如果一个实例的原型链中出现过相应的构造函数,则instanceof 返回true 

console.log(instance instanceof Object); //true 

conosle.log(instance instanceof SuperType); //true 

console.log(instance instanceof SubType); // true

从技术上讲， instance 是 Object、 SuperType 和 SubType 的实例，因为 instance 的原型链中包含这些构造函数的原型。结果就是 instanceof 对所有这些构造函数都返回 true。


 2. isPrototypeOf()方法。原型链中的每个原型都可以调用这个方法，如下例所示，只要原型链中包含这个原型，这个方法就返回 true

console.log(Object.prototype.isPrototypeOf(instance)); // true console.log(SuperType.prototype.isPrototypeOf(instance)); // true console.log(SubType.prototype.isPrototypeOf(instance)); // true

 5.关于方法

子类有时候需要覆盖父类的方法,或者增加父类没有的方法,为此,这些方法必须在原型赋值之后再添加到原型上

//父
function SuperType() {this.property = true;
}SuperType.prototype.getSuperValue = function() {return this.property;
};//子 
function SubType() {this.subproperty = false;
}
// 继承 SuperType
SubType.prototype = new SuperType();// 新方法
SubType.prototype.getSubValue = function () {return this.subproperty;
};
// 覆盖已有的方法
SubType.prototype.getSuperValue = function () {return false;
};
let instance = new SubType();
console.log(instance.getSuperValue()); // false

第一个方法getSubValue()是subType的新方法,而第二个方法getSuperValue()是原型链上已经存在但在这里别遮蔽的方法,后面在SubType实例上调用getSuperValue()时调用的是这个方法,而SuperType的实例仍然会调用最初的方法,重点在于上述两个方法都是把原型赋值为SuperType的实例之后定义的

另外一个要理解的重点是,以对象字面量方式创建原型方法会破坏之前的原型链,因为这相当于重写了原型链

//继承SuperType 

SubType.prototype=new SuperType(); 


//通过对象字面量添加新方法,这会导致上一行无效 

SubType.prototype={

    getSubValue(){

        return this.subproperty;

    }

}

let instance =new SubType(); 

console.log(instance.getSuperValue()); //出错! 

这段代码中,子类的原型在被赋值为SuperType的实例后,又被一个对象字面量覆盖了,覆盖后的原型是一个Object的实例,而不再是SuperType的实例,因此之前的原型链就断了,SubType和SuperType之间也没有关系了 

6.原型链的问题

  1. 问题一:  引用类型的属性被共享 

    当父类构造函数中定义了引用类型的属性(如数组,对象),子类通过原型链继承后,这写属性会被所有实例共享,互相影响
    function SuperType() {this.colors = ["red", "blue", "green"];
}function SubType() {}// 子类通过原型链继承父类
SubType.prototype = new SuperType();let instance1 = new SubType();
instance1.colors.push("black");let instance2 = new SubType();
console.log(instance2.colors); // ["red", "blue", "green", "black"]
    为什么会这样?
    1. SubType.prototype=new SuperType()这行代码的意思是: SubType的原型对象是一个SuperType的实例,因此,SubType.prototype.colors是一个共享的数组,所有的new SubType()创建的实例,都会共享这个数组 
  2. 问题二 : 无法给父类构造函数传参 , 在使用原型链继承时,父类的构造函数是在子类定义原型时被调用的,而不是在子类实例化时调用的,因此无法传递参数给父类构造函数

7.盗用构造函数

为了解决原型包含引用值导致的继承问题,一种叫作"盗用构造函数"的技术在开发社区流行起来(这种技术有时也称作"对象伪装"或"经典继承"). 基本思路很简单: 在子类构造函数中调用父类的构造函数 , 因为毕竟函数就是特定上下文中执行代码的简单对象,所以可以使用apply( )和call( )方法以新创建的对象为上下文执行构造函数,来看下面的例子:  

//父类
function SuperType(){this.colors=['red','blue','green'];
}//子类
function SubType(){//继承SuperType SuperType.call(this);  //这句话调用了SuperType构造函数,并把当前this(指向新创建的子类实例)传进去//也就是说: SuperType内部的this.colors=[...]其实//是往SubType的当前实例上添加一个全新的属性副本 
}let instancel=new SubType(); instancel.colors.push('black'); 
console.log(instance1.colors); // "red,blue,green,black"let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green"

通过使用call( )或apply()方法,SuperType构造函数在为SubType的实例创建的新对象的上下文中执行了,这相当于新的SubType对象上运行了SuperType()函数中的所有初始化代码.结果就是每个实例都会有自己的colors属性  

1.传递参数  

相比于使用原型链,盗用构造函数的一个优点就是可以在子类构造函数中向父类构造函数传参,来看下面的例子

//父类 
function SuperType(name){this.name = name;
}//子类 
function SubType(){//继承SuperType并传参 SuperType.call(this,'Nicholas');//实例属性this.age=29;
}let instance=new SubType(); 
console.log(instance.name);  //'Nicholas'; 
console.log(instance.age);  //29

在SubType构造函数中调用SuperType构造函数时传入这个参数,实际上会在SubType的实例上定义name属性,为确保SuperType构造函数不会覆盖SubType定义的属性,可以在调用父类构造函数之后再给子类实例添加额外的属性 

2.盗用构造函数的问题

盗用构造函数的主要缺点,也是使用构造函数模式自定义类型的问题: 必须在构造函数中定义方法, 因此,函数不能重用,此外,子类也不能访问父类原型上定义的方法,因此所有类型只能使用构造函数模式,由于存在这些问题,盗用构造函数基本上也不能单独使用

8.组合继承

组合继承(有时候也叫伪经典继承)综合了原型链和盗用构造函数,将两者的优点集中了起来,基本的思路是使用原型链继承原型上的属性和方法,而通过盗用构造函数继承实例属性,这样既可以把方法定义在原型上以实现重用,又可以让每个实例都有自己的属性,来看下面的例子: 

//父
function SuperType(name){this.name=name; this.color=['red','blue','green']; 
}
//父原型
SuperType.prototype.sayName=function(){console.log(this.name);
}//子
function SubType(name,age){//继承属性SuperType.call(this,name) this.age=age; 
}//继承方法 
SubType.prototype=new SuperType(); SubType.prototype.sayAge=function(){console.log(this.age);
}let instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); // "red,blue,green,black"
instance1.sayName(); // "Nicholas";let instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // "red,blue,green"
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27

在这个例子中,SuperType构造函数定义了两个属性,name和colors,原型上也定义了sayName( )

SubType构造函数调用了SuperType构造函数,传入name参数,定义了自己的属性age,此外,SubType.prototype也被赋值为SuperType的实例,原型赋值之后,又在这个原型上添加了新方法sayAge( ). 这样,就可以创建两个SubType实例,让着这两个实例都有自己的属性,包括colors.同时还共享相同的方法 

组合继承弥补了原型链和盗用构造函数的不足,是js中使用最多的继承模式, 而且组合继承也保留了instanceof操作符和isPrototypeOf( )方法识别合成对象的能力 

9.原型式继承

一种不涉及严格意义上构造函数的继承方法,它的出发点是即使不自定义类型也可以通过原型实现对象之间的信息共享,文章最终给出了一个函数:  

function object(o){function F(){}F.prototype=o;return new F()
}

这个Object( )函数会创建一个临时构造函数,将传入的对象赋值给这个构造函数的原型,然后返回这个临时类型的一个实例,本质上,Object是对传入的对象执行了一次浅复制 

let person={name:'Nicholas',friends:["shelby",'Court','Van']
}; let anotherPerson=object(person); //或者 let anotherPerson=Object.create(person);anotherPerson.name='Greg'; 
anotherPerson.friends.push('Rob'); let yetAnotherPerson = object(person); //或者 let yetAnotherPerson=Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");onsole.log(person.friends); // "Shelby,Court,Van,Rob,Barbie"

这种原型继承使用的情况: 你有一个对象,想在它的基础上再创建一个新对象,你需要把这个对象先传给object(),然后再对返回的对象进行适当修改,在这个例子中,person对象定义了另一个对象也应该共享的信息,把它传给Object()之后会返回一个新对象,这个新对象的原型是person,意味着它的原型上既有原始值属性又有引用值属性,这也意味着person.friends不仅是person的属性,也会跟anotherPerson和yetAnotherPerson共享,这里实际上克隆了两个person  

es5通过增加Object.create()方法将原型式继承的概念规范化了,这个方法接收两个参数: 作为新对象原型的对象,以及给新对象定义额外属性的对象,在只有一个参数时,Object.create()与这里的object()方法效果相同: 

Object.create( )的第二个参数与Object.defineProperties( )的第二个参数一样: 每个新增属性都通过各自的描述符来描述,以这种方式添加的属性会遮蔽原型对象上的同名属性 

let person={
  name:'Nicholas',
  friends:["shelby",'Court','Van']
}; 

let anotherPerson=Object.create(Person,{

   name:{

      value: 'Greg'

   }

});

原型式继承非常适合不需要单独创建构造函数,但仍然需要再对象间共享信息的场合,但要记住,属性中包含的引用值始终会在相关对象间共享,跟使用原型模式是一样的 

10.寄生式继承 

与原型继承比较接近的一种继承方式是寄生式继承(parasitic inheritance),也是Crockford首倡的一种模式,寄生式继承背后的思路类似于寄生构造函数和工厂模式: 创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象,基本的寄生继承模式如下: 

function createAnother(original){let clone=object(original); //通过调用函数创建一个新对象clone.sayHi=function(){console.log('hi');};return clone; //返回这个对象
}

在这段代码中,createAnother( )函数接收一个参数,就是新对象的基准对象,这个对象original会被传给object()函数,然后将返回的新对象赋值给clone,接着给clone对象添加一个新方法sayHi(). 最后返回这个对象,可以像下面这样使用createAnother()函数: 

let person={

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

}; 
let anotherPerson=createAnother(person); 

anotherPerson.sayHi(); //'hi' 

这个例子基于person对象返回了一个新对象,新返回的anotherPerson对象具有person的所有属性和方法,还有一个新方法叫sayHi( );

寄生式继承同样适合主要关注对象,而不在乎类型和构造函数的场景,object()函数不是寄生式继承所必需的,任何返回新对象的函数都可以在这里使用

注意: 通过寄生式继承给对象添加函数会导致函数难以重用,与构造函数模式类似 

10.1 寄生式组合继承 

组合继承其实也存在效率问题,最主要的效率问题就是父类构造函数始终会被调用两次: 一次在是创建子类原型时调用,另一次是在子类构造函数中调用,本质上,子类原型最终是要包含超类对象的所有实例对象,子类构造函数只要在执行时重写自己的原型就行了
 

function SuperType(name){this.name=name; this.colors=['red','blue','green'];
}SuperType.prototype.sayName=function(){console.log(this.name);
}function SubType(name,age){SuperType.call(this,name); //第二次调用SuperType( )//第二次调用: 让每个子类实例拥有独立的属性副本,避免共享问题//相当于新的SubType对象上运行了SuperTYpe()函数中的所有初始化代码,//等价于下面这行代码被复制粘贴进来了 //this.name=name; //this.colors=['red','blue','green']this.age=age;}//继承父类方法: 子类原型被替换成了父类的实例,父类的实例constructor指向父类构造函数  
SubType.prototype=new SuperType(); //第一次调用SuperType()console.log(SubType.prototype.constrctor===SuperType); //true//修正子类原型对象的constructor指向子类构造函数本身
SubType.prototype.constructor=SubType; 
SubType.prototype.sayAge=function(){console.log(this.age);
}

在上面的代码执行后,SubType.prototype上会有两个属性: name和colors ,他们都是SuperType的实例属性,但现在成为了SubType的原型属性. 在调用SubType构造函数时,也会调用SuperType构造函数,这一次会在新对象上创建实例属性name和colors,这两个实例属性会遮蔽原型上同名的属性 

有两组name和colors属性: 一组在实力上,另一组在SubType的原型上,这是调用两次SuperType构造函数的结果 

寄生式组合继承通过盗用构造函数继承属性,但使用混合式原型链继承方法,基本思路是不通过调用父类构造函数给子类原型赋值,而是取得父类原型的一个副本,说到底就是使用寄生式继承来继承父类原型,然后将返回的新对象赋值给子类原型,寄生式组合继承的基本模式: 

function inheritPrototype(subType,superType){

  let prorortype=object(superType.prototype); //创建对象

  prototype.constructor=subType; //增强对象

  subType.prototype=prototype; //赋值对象

}

 这个inheritPrototype( )函数实现了寄生式组合继承的核心逻辑,这个函数接收两个参数: 子类构造函数和父类构造函数,在这个函数内部,第一步是创建父类原型的一个副本,然后,更黑返回的prototype对象设置constructor属性,解决由于重写原型导致默认constructor丢失的问题,最后将新创建的对象赋值给子类型的原型,如下例所示,调用inheritPrototype( )就可以实现前面例子中的子类原型赋值: 

function SuperType(name){

  this.name=name;

  this.colors=['red','blue','green'];

} 
 

SuperType.prorotytpe.sayName=function(){

   console.log(this.name);

}

function SubType(name,age){

   SuperType.call(this,name);

    this.age=age;

}

inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge=function(){

   console.log(this.age);

}

这里只调用了一次SuperType构造函数,避免了SubType.prototype上不必要也用不到的属性,因此可以说这个例子的效率更高,而且,原型链仍然保持不变,因此instance操作符和isPrototypeOf()方法正常有效,寄生式组合继承可以算是引用类型继承的最佳模式 

相关文章：

  • Git 分支管理：merge、rebase、cherry-pick 的用法与规范
  • 鸿蒙进阶——Framework之Want 隐式匹配机制概述
  • Windows开机时间过长的原因
  • Python的FastApi随笔记
  • ReAct 与 CoAct：AI 代理的推理与行动之旅
  • 如果请求体不是JSON格式，UserController层会怎样？
  • 【FastAPI】--基础教程
  • 精益数据分析（80/126）：病毒式传播系数实战计算与增长策略优化
  • 【八股战神篇】RabbitMQ高频面试题
  • 动态规划经典三题_完全平方数
  • Pysnmp使用指南
  • 持续更新 ，GPT-4o 风格提示词案例大全！附使用方式
  • leetcode513.找树左下角的值：递归深度优先搜索中的最左节点追踪之道
  • AWS EC2实例安全远程访问最佳实践
  • FreeGPT+内网穿透外网远程连接使用，搞定ChatGPT访问难题！
  • 跟Gemini学做PPT：汇报背景图寻找指南
  • React+MapBox GL JS引入URL服务地址实现自定义图标标记地点、区域绘制功能
  • react+Mapbox GL实现标记地点、区域的功能
  • PostGIS实现栅格数据导出TIFF应用实践【ST_AsTiff】
  • RK3399 Android13设备插拔无线鼠标键盘设备出现APP或系统界面刷新现象
  • 简洁网站设计/图片优化
  • 两人做性视频网站/品牌营销战略
  • 电商排名/seo关键词优化推广外包
  • 网站主题推荐/seo包括哪些方面
  • 安徽网站制作/网络营销的定义是什么
  • 组织建设方面存在的问题/漯河seo推广