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使用$(element).is()来判断获取的tagName
Aug 24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JS数组的常见用法实例
Feb 10 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
React快速入门教程
Jan 17 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
详解JavaScript的变量
Apr 04 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
Vue 实现拨打电话操作
Nov 16 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
c++生成dll使用python调用dll的方法
2014/01/20 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python文件读写代码实例
2019/10/21 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
python实现马丁策略的实例详解
2021/01/15 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
中学教师师德师风演讲稿
2014/08/22 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
交通事故委托书范本
2014/09/28 职场文书
社区宣传标语口号
2015/12/26 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis