JavaScript中prototype的使用详解

作者:函数茶馆时间:2026-10-30 09:20:43浏览:662

本文详细解析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代码风格指南》,也欢迎大家继续支持本站。

作者最新文章