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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
原生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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python绘制简单彩虹图
2018/11/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python SocketServer源码深入解读
2019/09/17 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
SQL Server使用导出向导功能
2022/04/08 SQL Server