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程序设计的内容能对读者有所帮助。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
