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 相关文章推荐
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
javascript模块化简单解析
Apr 07 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php7下的filesize函数
2019/09/30 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Python制作Windows系统服务
2017/03/25 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python绘制随机网络图形示例
2019/11/21 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
一份Java笔试题
2012/02/21 面试题
参观监狱心得体会
2014/01/02 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
预备党员转正意见
2015/06/01 职场文书