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中的ajax再封装,简化操作示例
Feb 12 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
js+html5生成自动排列对话框实例
Oct 09 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
Ajax实现局部刷新的方法实例
Mar 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
PHP 采集获取指定网址的内容
2010/01/05 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
Python日志模块logging简介
2015/04/13 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python语音识别实践之百度语音API
2018/08/30 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
进步之星获奖感言
2014/02/22 职场文书
国培远程培训感言
2014/03/08 职场文书
2015年党性分析材料
2014/12/19 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
小学新课改心得体会
2016/01/22 职场文书
中学教代会开幕词
2016/03/04 职场文书
团组织关系介绍信
2019/06/24 职场文书
Python基础详解之邮件处理
2021/04/28 Python
小程序实现筛子抽奖
2021/05/26 Javascript
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL