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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
深入理解node.js之path模块
May 03 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 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实现维护文件代码
2007/06/14 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
基于Django的python验证码(实例讲解)
2017/10/23 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python 实现微信防撤回功能
2019/04/29 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python能自学吗
2020/06/18 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
中医学专业自荐信范文
2014/04/01 职场文书
青春演讲稿范文
2014/05/08 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
高三英语教学反思
2016/03/03 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
java实现对Hadoop的操作
2021/07/01 Java/Android
MySQL 5.7常见数据类型
2021/07/15 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js