JavaScript 继承的两种核心方式:原型链与构造函数借用

作者:纸飞机时间:2026-10-29 18:24:38浏览:653

本文深入解析JavaScript中两种最基础的继承机制。第一种是通过原型(prototype)链实现属性与方法共享;第二种是利用call或apply方法借用构造函数,实现实例属性的独立继承。文章通过具体代码示例对比了两种方式的实现细节、适用场景及局限性,帮助开发者理解不同继承模式对实例对象的影响。

JavaScript 继承的两种核心机制

JavaScript 实现继承的核心机制主要包含两种:一是基于原型(prototype)链的继承,二是通过借用构造函数并结合 call 或 apply 方法实现的继承。

基于原型链的继承实现


function Body(name,age){// 创建一个Body类
  this.name = name;// 赋予基础属性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象

function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex

第二种方式被称为借用构造函数(也可视为组合继承的一部分),其核心在于利用 call 方法。

基于 call 的构造函数继承


function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22

另一种等效实现是使用 apply 方法。

基于 apply 的构造函数继承


function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222

继承方式的局限性与适用场景

在 JavaScript 中,上述两种是最主要的继承手段。尽管还存在其他继承变体,但部分方式在修改实例的属性和方法时,会直接污染原型上的对应成员。这种设计通常缺乏实际意义,除非业务场景有特定的共享需求,否则一般不推荐采用。

以上内容涵盖了 JavaScript 继承方式的主要介绍,旨在为读者的学习提供有益参考。

作者最新文章