JavaScript原型模式详解与代码示例

作者:青柠时间:2026-10-29 10:34:52浏览:261

本文详解JavaScript原型模式的定义与核心作用。通过对比工厂模式与构造函数模式的弊端,阐述如何利用prototype属性实现属性和方法的共享,避免重复创建实例方法。文中包含完整的Person类原型定义及属性读写测试代码,帮助开发者理解原型链机制并优化对象设计。

JavaScript原型模式概述

本文通过具体实例解析JavaScript原型模式的实际应用,旨在为读者提供清晰的参考与学习思路。

在深入理解工厂模式和构造函数模式的局限性后,便能明白引入原型模式的必要性。原型模式的核心定义在于:每个函数都拥有一个名为prototype(原型)的属性,该属性指向一个对象,其作用是存储特定类型所有实例所共享的属性和方法。以构造函数模型中的sayInformation()方法为例,若不使用原型模式,每创建一个实例都会重新构造该方法,造成资源浪费;而将方法声明为原型属性后,所有实例即可共享同一份方法定义,无需重复创建。这一机制有效解决了代码冗余问题,比网络上部分模糊的解释更为直观易懂。

原型模式代码实现与测试


function Person(){}
Person.prototype.name="jack";
Person.prototype.age=10;
Person.prototype.sayInformation=function()
{
  console.log("my name is"+this.name+" age is"+this.age);
}
var person1 = new Person();
person1.sayInformation();
console.info(person1.name);
//来自原型的属性name
person1.name="Greg";
//修改实例的name属性
console.info(person1.name);
//来自实例的属性name
delete person1.name ;
//来自实例的属性,这里删除的是实例的属性,但是原型的属性依然存在
console.info(person1.name);
//来自原型的属性name
var person2 = new Person();
person2.sayInformation();
console.info(person1.hasOwnProperty("name"));
//hasOwnProperty检查属性是属于实例还是原型中,如果是实例中就返回true
console.info(person1.name==person2.name);
console.info(person1.sayInformation==person2.sayInformation);
console.info(person1.constructor);
//指向person1的构造函数
//原型更加简便的写法
function Person2(){}
Person2.prototype={
  name:"jack",
  age:29,
  sayInformationfunction:function()
    {
      console.log("my name is"+this.name+" age is"+this.age);
    }
}

希望上述关于JavaScript程序设计的内容能对读者有所帮助。

作者最新文章