Javascript中prototype的使用详解


Posted in Javascript onJune 18, 2016

先看下面一段代码:

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代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
原生JavaScript实现进度条
Feb 19 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
jQuery UI Bootstrap是什么?
Jun 17 #Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 #Javascript
JavaScript获取当前url根目录(路径)
Jun 17 #Javascript
You might like
简单的PHP留言本实例代码
2010/05/09 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
老生常谈js中的MVC
2017/07/25 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中的super()方法使用简介
2015/08/14 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python+微信接口实现运维报警
2016/08/27 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python微信操控itchat的方法
2019/05/31 Python
python之生产者消费者模型实现详解
2019/07/27 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
聚美优品广告词改编
2014/03/14 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
2014年党员整改措施
2014/10/24 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis