JavaScript原型链中的数据共享与方法共享实现
作者:异步漫步时间:2026-10-24 10:35:32浏览:348
本文详细解析JavaScript中如何利用原型对象实现数据与方法共享。通过对比构造函数与原型属性的分配策略,演示了如何区分个体差异数据与公共数据,并介绍了简化原型定义的写法。同时,通过Animal类示例展示了原型方法间的相互调用机制,帮助开发者理解原型链的核心价值。
数据共享
什么样的数据适合放在原型中?
凡是需要在所有实例间共享的数据,都可以定义在原型中。
原型的一个重要作用是实现数据共享。
不仅数据可以共享,方法同样可以共享:
- 不需要共享的、具有个体差异的数据应定义在构造函数中。
- 需要共享的、所有实例共有的数据应定义在原型中。
接下来通过一个具体案例进行说明。
数据共享案例
每个学生的姓名、年龄和性别都是独特的,这些属于个体差异,应当单独设置。
所有学生的身高均为188,体重均为55。此外,所有学生每天需要写500行代码,并且每天要吃一个10斤重的西瓜。
因此,可以将这些共有数据写入原型对象中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
function Student(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
// 所有学生的身高都是188,所有人的体重都是55
// 所有学生都要每天写500行代码
// 所有学生每天都要吃一个10斤的西瓜
//原型对象
Student.prototype.height="188";
Student.prototype.weight="55kg";
Student.prototype.study=function () {
console.log("学习,写500行代码,小菜一碟");
};
Student.prototype.eat=function () {
console.log("吃一个10斤的西瓜");
};
//实例化对象,并初始化
var stu=new Student("晨光",57,"女");
console.dir(Student);
console.dir(stu);
// stu.eat();
// stu.study();
</script>
</head>
<body>
</body>
</html>
运行代码后的打印结果如下所示。

原型的简化写法
原型还有一种更简洁的写法,以下是对上述案例的修改版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
function Student(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
//简单的原型写法
Student.prototype = {
//手动修改构造器的指向
constructor:Student,
height: "188",
weight: "55kg",
study: function () {
console.log("学习好开心啊");
},
eat: function () {
console.log("我要吃好吃的");
}
};
var stu=new Student("鼎鼎大名",20,"男");
stu.eat();
stu.study();
console.dir(Student);
console.dir(stu);
</script>
</head>
<body>
</body>
</html>

原型方法共享
例如定义方法:吃完饭后玩耍,玩耍结束后睡觉。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//原型中的方法,是可以相互访问的
function Animal(name,age) {
this.name=name;
this.age=age;
}
//原型中添加方法
// 吃完了就玩
Animal.prototype.eat=function () {
console.log("动物吃东西");
this.play();
};
// 玩完了就睡
Animal.prototype.play=function () {
console.log("玩球");
this.sleep();
};
Animal.prototype.sleep=function () {
console.log("睡觉了");
};
var dog=new Animal("小苏",20);
dog.eat();
//原型对象中的方法,可以相互调用
</script>
</head>
<body>
</body>
</html>
至此,关于探究JavaScript原型数据共享与方法共享实现的文章介绍完毕,更多相关内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!
作者最新文章
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
