JavaScript中prototype的使用详解
本文详细解析JavaScript中prototype原型属性的核心用法。通过Machine与Car类的示例,阐述如何将方法绑定至原型以实现对象共享,解释prototype面向实例而非类的特性,并演示利用原型链实现继承的具体代码逻辑与注意事项。
prototype基本用法与对象方法绑定
首先观察以下代码片段:
function Machine(ecode, horsepower) {
this.ecode = ecode;
this.horsepower = horsepower;
}
function showme() {
alert(this.name + " " + this.ecode + " " + this.horsepower);
}
var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme = showme;
machine.showme();
上述代码虽然创建了Machine对象,并通过machine.showme = showme将showme函数赋值给该实例,使其成为machine的一个方法,但这种写法存在局限。
此时,构造函数与普通方法之间缺乏内在联系,代码结构不够“优雅”,为了解决这一问题,引入了prototype机制。
//机器
function Machine(ecode, horsepower) {
this.ecode = ecode;
this.horsepower = horsepower;
}
//特别注意这一句,Machine.prototype是第一次初始化的时候就初始化好的,
//当调用Machine作为构造函数的时候,engine的值不会再改变
Machine.prototype.engine = this.ecode + " " + this.horsepower;
Machine.prototype.showme = function () { alert(this.name + " " + this.ecode + " " + this.horsepower); }
借助上述代码,所有Machine类的实例都自动拥有了showme方法。
然而,使用时需特别注意以下关键点:
prototype的作用对象是实例,而非类本身。在JavaScript中,类本身也是一个对象,因此直接调用Machine.showme()会报错,因为Machine类对象上并没有定义showme方法。
因此,要使用showme方法,必须先创建一个Machine的实例,只有实例才能访问该方法。
prototype的作用对象与实例访问
var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme(); //输出machine1 code1 15。
引入prototype后,实现继承关系变得更加简便。例如,若要定义一个继承自Machine类的Car类,只需编写如下代码:
基于prototype的继承实现
//小汽车
function Car(name, ecode, horsepower) {
this.name = name;
//调用父类的构造函数,使得Car的对象有ecode、horsepower属性
Machine.call(this, ecode, horsepower);
}
//Car的原型指向Machine,使Car对象有Machine原型的任意属性和方法,比如showme
Car.prototype = new Machine();
代码中已清晰注释了如何调用父类构造函数以及如何获取父类原型,此处不再赘述。
接下来,我们可以创建一个对象进行测试:
//新建一个类Car的对象。
var xiali = new Car("xiali", "aaa", 15);
alert(xiali.engine);
xiali.showme();
以上展示了prototype的基本应用,这也是其最主要的使用场景。
熟练掌握prototype的使用,有助于在后续开发中更深入地理解对象的构建与继承机制。
如需了解更多JavaScript语法,建议参考《JavaScript 参考教程》和《JavaScript代码风格指南》,也欢迎大家继续支持本站。
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
