JS中prototype关键字的功能介绍及使用示例


Posted in Javascript onJuly 21, 2013

prototype 关键字可以为 JS原有对象 或者 自己创建的类 中添加方法或者属性。
也可以实现继承。
例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS中 prototype 关键字的使用</title> 
</head> 
<script> 
<!-- demo1 JS中原有对象中 添加方法 --> 
Number.prototype.add = function (num){ 
return this+num; 
} 
function but1_click(){ 
alert((3).add(8)); 
} 
<!-- demo2 JS中新建对象中, 添加属性 ,方法 --> 
function Car(cColor,cWeight){ 
this.cColor = cColor; 
this.cWeight = cWeight; 
} 
Car.prototype.drivers = new Array('zhangsan','lisi'); 
Car.prototype.work = function (cLong){ 
alert("我跑了"+cLong+"公里"); 
} 
function but2_click(){ 
var c = new Car("red","5"); 
c.drivers.push('zhaoliu'); 
alert(c.drivers); 
c.work(1); 
} 
<!-- demo3 JS中新建对象中, 添加属性 ,方法 紧凑的写法 --> 
function Rectangle(rWeight,rHeight){ 
this.rWeight = rWeight; 
this.rHeight = rHeight; 
if( typeof this._init == 'undefined'){ 
Rectangle.prototype.test = function (){ 
alert("test"); 
} 
} 
this._init = true; 
} 
function but3_click(){ 
var t = new Rectangle(6,8); 
t.test(); 
} 
<!-- demo4 prototype 继承 --> 
function objectA(){ 
this.methodA = function (){ 
alert("我是A方法"); 
} 
} 
function objectB(){ 
this.methodB = function (){ 
alert("我是B方法"); 
} 
} 
objectB.prototype = new objectA(); 
function but4_click(){ 
var t = new objectB(); 
t.methodB(); 
t.methodA(); 
} 
</script> 
<body> 
<h2> prototype 关键字的使用 </h2> 
<hr /> 
<input id="but1" type="button" value="demo1" onclick="but1_click()" /> 
<input id="but2" type="button" value="demo2" onclick="but2_click()" /> 
<input id="but3" type="button" value="demo3" onclick="but3_click()" /> 
<input id="but4" type="button" value="demo4" onclick="but4_click()" /> 
</body> 
</html>
Javascript 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 #Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 #Javascript
jquery封装的对话框简单实现
Jul 21 #Javascript
jquery触发a标签跳转事件示例代码
Jul 21 #Javascript
用JavaScript实现动画效果的方法
Jul 20 #Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 #Javascript
js动态创建表格,删除行列的小例子
Jul 20 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
php导入导出excel实例
2013/10/25 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Django Highcharts制作图表
2016/08/27 Python
Python实现购物程序思路及代码
2017/07/24 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python实现图像外边界跟踪操作
2020/07/13 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
《梅花魂》教学反思
2014/04/30 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
学生病假条怎么写
2015/08/17 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python