本文详解JavaScript中Prototype原型的概念与作用。通过构造函数、原型对象及实例间[[Prototype]]指针的关系,结合代码实例分析原型重置对属性访问的影响,帮助理解对象继承机制。
JavaScript Prototype原型详解
JavaScript中的Prototype原型是一个核心概念,必须熟练掌握。若无法深入理解此概念,后续的高级应用与深入学习将难以实现。该概念具有一定难度,初学者可能感到困惑,下文将通过代码示例简要介绍其用法。
基本概念
一、基本概念:
每个函数都拥有prototype属性。该属性是一个指针,指向一个对象,此对象会被由构造函数创建的所有对象实例共享,即实例会继承该对象。总结而言,prototype指向的对象由构造函数创建的所有实例共同共享。每个创建的对象实例内部都有一个[[Prototype]]属性,它是一个指针,指向构造函数prototype所指向的对象。以下代码可供参考:
<script>
function antzone(name,age){
this.webname=name;
this.age=age;
}
antzone.prototype.getName=function(){
return this.webname;
}
var oantzone=new antzone("本站",10);
console.log(oantzone.getName());
</script>
运行效果如下:

示意图如下:

代码实例
上述图片基本展示了prototype的作用。二、代码实例:实例一:
function antzone(name,age){
this.webname=name;
this.age=age;
}
var obj={
address:"江苏省徐州"
}
var oantzone=new antzone("本站",10);
antzone.prototype=obj;
console.log(oantzone.address);
阅读以上代码,部分读者可能预期输出为“江苏省徐州”,但实际输出结果为undefined。原因在于,在使用构造函数创建对象oantzone时,oantzone内部属性[[Prototype]]指向antzone()构造函数prototype所指向的原始对象。随后执行antzone.prototype=obj重置了构造函数的原型,但oantzone的[[Prototype]]仍指向原对象,因此oantzone.address为undefined。
<script>
function antzone(name,age){
this.webname=name;
this.age=age;
}
var obj={
address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("本站",10);
console.log(oantzone.webname+oantzone.address);
</script>
实例二:此代码与上一段代码的唯一区别在于第八行和第九行的顺序进行了交换,从而能够输出“江苏省徐州”。这不难理解,因为对象实例是在重置原型之后创建的。
function antzone(name,age){
this.webname=name;
this.age=age;
}
var obj={
address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("本站",10);
console.log(oantzone.add.address);
实例三:以上代码仅修改对象原型,并未重置对象原型。