JavaScript构造函数与原型对象详解

作者:拾光

时间:2026-10-21

浏览:472

本文详细解析JavaScript中构造函数的定义与实例化过程,深入探讨原型对象(prototype)的作用机制。通过字面量方式创建原型对象时需注意constructor指向问题,并介绍如何通过__proto__访问原型。文章还讲解了属性查找的就近原则、isPrototypeOf方法的使用以及实例属性对原型属性的覆盖逻辑,帮助开发者掌握对象共享与内存优化技巧。

文章目录

构造函数与实例化基础

以下展示一个构造函数的具体示例。

若方法定义在实例上,每次实例化时,各实例引用的地址均不相同,具有唯一性。


//定义一个构造函数
 function People(name,age){
  this.name=name;
  this.age=age;
  this.dothings=function(){
   retrun this.name+this.age;
   }
 }
 var people1 = new People("panda1",25);
 var people2 = new People("panda2",26);
 alert(people1.name==people2.name) //false

另一种编写原型对象的方式是采用字面量形式,即使用{}创建对象。此处{}即为Object类型,new Object()与{}在功能上等效。

原型对象的创建与Constructor属性


 People.prototype={
 constructor:People //强制指向People
  name:"panda",
  age:25,
  dothings:function(){
   return this.name+this.age;
  }
}
var people = new People();
alert(people.constructor); //function People(){}

采用字面量方式创建对象时,其constructor属性不再指向实例,而是指向Object。

每个创建的函数都拥有prototype(原型)属性,该属性本身是一个对象。原型的用途在于包含由特定类型的所有实例共享的属性和方法。换言之,prototype是通过调用构造函数而创建的那个对象的原型对象。

原型对象的优势在于:它使所有对象实例共享其所包含的属性和方法,无需在构造函数中逐一定义对象信息,而是可以直接将这些内容添加到原型中。

原型共享与访问机制


//声明一个构造函数
 function People(){}
 //在原型添加属性
 People.prototype.name="panda";
 People.prototype.age=25;
 people.prototype.dothings=function(){
  return this.name+this.age;
 }  
 //实例化构造函数
 var people1 = new People();
 var people2 = new People();
 alert(people1.name==perople2.name) //true 因为都是原型里的方法,它们的地址是共享的,大家都来自同一地方。

通过对象实例无法直接访问prototype,因为prototype属性是一个对象。若要访问原型对象,可通过people.__proto__来访问,或者使用构造函数名(对象名)People.prototype。需要注意的是,该属性在IE浏览器中不支持(返回undefined)。__proto__是指向原型对象的一个指针。

此外还有一个constructor属性,这是一个构造属性,用于获取构造函数本身。其作用是:被原型指针定位,从而得到构造函数本身,即体现对象实例对应原型对象的作用。

判断一个对象是否指向该构造函数的原型对象,可以使用isPrototypeOf方法进行测试。

People.prototype.isPrototypeOf(people1)  //true

如果实例与原型中同时存在相同的属性,例如示例中People下的name属性。

属性查找与覆盖逻辑


var people = new People();
people.name="bear";
alert(people.name); //bear
alert(people1.name); //panda

实例属性并不会重新原型属性,实例的对象采用就近原则进行查找。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章