再谈原型链，深刻理解原型及原型链（案例分析，详细图解，一目了然）

最新推荐文章于 2025-10-21 19:13:13 发布

原创

最新推荐文章于 2025-10-21 19:13:13 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原型链 #原型 #JavaScript #Object.create

本文详细探讨JavaScript原型链的概念，通过案例分析为何不直接使用`Student.prototype=Person.prototype`，而是采用`Student.prototype=Object.create(Person.prototype)`避免影响原型链。同时，文章展示了修改`Student.prototype`属性方法后的原型链结构变化，并提供了相关代码及图解，帮助读者深入理解原型和原型链的工作原理。

一、前言：这个案例稍微有些难度，需要掌握基本的原型、原型链、构造函数、继承等相关知识，如若还没有掌握，不妨看看我的这篇博客，详细介绍了这些知识及关系：http://blog.youkuaiyun.com/spicyboiledfish/article/details/71123162

二、首先看看这个案例，源代码附上：

function Person(name,age){
      this.name=name;
      this.age=age;
}
Person.prototype.hi=function(){
      console.log("Hi,my name is"+this.name+",I'm"+this.age+"years old now.");
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk= function () {
      console.log(this.name+"is walking...");
};

function Student(name,age,className){
      Person.call(this,name,age);
      this.className=className;
}
Student.prototype=Object.create(Person.prototype);
Student.prototype.constructor=Student;

Student.prototype.hi=function(){
      console.log("Hi,my name is "+this.name+" ,I'm "+ this.age+" years old now,and from "+this.className+"."