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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
jquery操作select方法汇总
Feb 05 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
初识php MVC
2014/09/10 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
取得传值的函数
2006/10/27 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
浅析使用Python操作文件
2017/07/31 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python数据归一化及三种方法详解
2019/08/06 Python
python操作cfg配置文件方式
2019/12/22 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
协议书的格式
2014/04/23 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
工商局调档介绍信
2015/10/22 职场文书
初中英语教学反思范文
2016/02/15 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle