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 使用手册(六)
Sep 23 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 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获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
10个php函数实用却不常见
2015/10/13 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
Require.js的基本用法详解
2017/07/03 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
研究生自荐信
2013/10/09 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
电子商务求职信
2014/06/15 职场文书
优秀会计求职信
2014/07/04 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
高中班主任评语
2014/12/30 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
如何在Python中创建二叉树
2021/03/30 Python