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 特性检测并非浏览器检测
Jan 15 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
js实现简单的轮播图效果
Dec 13 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
iis6+javascript Add an Extension File
2007/06/13 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
Express的路由详解
2015/12/10 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python设计模式之观察者模式实例
2014/04/26 Python
Python中__call__用法实例
2014/08/29 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 自动去除空行的实例
2018/07/24 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
什么是Python中的匿名函数
2020/06/02 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
代理商会议邀请函
2014/01/27 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
教师演讲稿开场白
2014/08/25 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
员工辞退通知书
2015/04/17 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
如何在Python中创建二叉树
2021/03/30 Python
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
python神经网络 使用Keras构建RNN训练
2022/05/04 Python