JavaScript 原型链与继承机制详解

作者:纸飞机

时间:2026-10-25

浏览:225

本文详细解析JavaScript中prototype原型对象的工作原理及原型链机制。通过构造函数、原型方法添加及继承示例,说明对象属性查找过程。涵盖基类与子类的原型关系、方法覆盖及原型链末端Object对象的作用,帮助开发者掌握JS面向对象编程核心概念。

文章目录

JavaScript 原型链与继承机制详解

代码示例如下:

//var People={name:"xiong",age:15};
//var Person=function(user,age){
// this.name=user;
// this.age=age;
// this.say=function(){alert("I am "+this.name+"\n"+this.age);}
//} 
//var Chairman=function(name,salary){
// Person.call(this,name);
//    } 
//var Bill=new Person("Bill",15);
//var Hu=new Chairman("Hu Jintao");
//Person.prototype.eat=function(){
// alert("I'm eating");
//    } 
//Bill.eat();
function Person(name) //基类构造函数
{ 
this.name = name;
}; 
Person.prototype.SayHello = function() //给基类构造函数的 prototype 添加方法
{ 
alert("Hello, I'm " + this.name);
}; 
function Employee(name, salary) //子类构造函数
{ 
Person.call(this, name); //调用基类构造函数
this.salary = salary;
}; 
function Xiong(name,age){
Employee.call(this,name);
        } 
Employee.prototype = new Person(); //建一个基类的对象作为子类原型的原型,这里很有意思
Xiong.prototype=new Employee();
Employee.prototype.ShowMeTheMoney = function() //给子类添构造函数的 prototype 添加方法
{ 
alert(this.name + " $" + this.salary);
}; 
var BillGates = new Person("Bill Gates"); //创建基类 Person 的 BillGates 对象
var SteveJobs = new Employee("Steve Jobs", 1234); //创建子类 Employee 的 SteveJobs对象
var hiakuotiankong=new Xiong("海阔天空");
var benbenxiong=new Xiong("笨笨熊");
// BillGates.SayHello(); //通过对象直接调用到 prototype 的方法
// hiakuotiankong.SayHello(); //通过子类对象直接调用基类 prototype 的方法,关注!
benbenxiong.SayHello=function(){ //掩盖了原型的 SayHello 方法
alert("haha,I'm"+this.name);
} 
benbenxiong.SayHello();
// SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类 prototype 的方法
// alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true,表明 prototype 的方法是共享的
Xiong.prototype.Goodbye=function(){
alert(this.name+"Bye-bye");
        } 
benbenxiong.Goodbye();

在 JavaScript 中,prototype 不仅使对象能够共享资源,还具备追溯机制,


使得祖先的遗产得以传承。当访问对象的属性或方法时,若对象自身未定义,


引擎会查找其关联的 prototype 对象;若仍未找到,则继续向上层 prototype 查找,


直至找到目标或遍历结束。



JavaScript 内部通过 prototype 链实现属性和方法的追溯机制。使用 new


操作符创建对象时,构造函数的 prototype 会被指派为新对象的内置原型对象。


该内置原型通常对外不可见,尽管部分浏览器(如 Firefox)允许访问,


但不建议这样做。由于内置原型也是对象,它同样拥有关联的原型,


从而构成了原型链。



原型链的终点是 Object 构造函数 prototype 指向的原型对象。该对象是


所有对象的最古老祖先,实现了 toString 等所有对象共有的方法。其他内置


构造函数(如 Function, Boolean, String, Date 和 RegExp)的 prototype 均源自该祖先,


但它们各自定义了特有属性和方法,从而使其子类表现出特定宗族的特征。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章