欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript中prototype的使用详解

程序员文章站 2022-06-29 21:22:20
先看下面一段代码: function machine(ecode, horsepower) { this.ecode = ecode; this.ho...

先看下面一段代码:

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对象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只是面对实例的,而不是面对类对象的。(js中,类本身就是一个对象)所以machine.showme();会报错误,因为machine这个对象是没有showme方法的。

那么,我们怎么使用showme方法呢?必须得新建一个machine实例,只有machine实例才会有这个方法。

var machine = new machine("code1", 15);
machine.name = "machine1";
machine.showme(); //输出machine1 code1 15。

有了prototype之后,我们更加容易实现继承关系。比如我现在写一个car类,需要继承目前这个machine类,只需要写如下代码即可:

//小汽车
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的最主要的应用。

掌握的prototype的使用,在以后的过程中,对于对象的构建和继承,会有更深层次的理解。

查看更多javascript的语法,大家可以关注:《javascript 参考教程》、《javascript代码风格指南》,也希望大家多多支持。