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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
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
Windows下的PHP5.0详解
2006/11/18 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
javascript制作2048游戏
2015/03/30 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
layUI实现三级导航菜单效果
2019/07/26 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
社区志愿者培训方案
2014/06/10 职场文书
司机个人年终总结
2015/03/03 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript