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陷阱题
Feb 07 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
详解php的socket通信
2015/08/11 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
python将unicode转为str的方法
2017/06/21 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python中doctest库实例用法
2020/12/31 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
《影子》教学反思
2014/02/21 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
八一建军节主持词
2015/07/01 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
Python使用Web框架Flask开发项目
2022/06/01 Python