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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
UI Events 用户界面事件
Jun 27 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
详解vue-router导航守卫
Jan 19 Javascript
微信小程序实现日历小功能
Nov 18 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
php木马攻击防御之道
2008/03/24 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
单方离婚协议书范本2014
2014/10/28 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers