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 相关文章推荐
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
node.js中的console用法总结
2014/12/15 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
input框中的name和id的区别
2016/11/16 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python循环结构的应用场景详解
2019/07/11 Python
python matplotlib库的基本使用
2020/09/23 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
日语系毕业生推荐信
2013/11/11 职场文书
有创意的广告词
2014/03/18 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
导师评语大全
2014/04/26 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
学习张林森心得体会
2014/09/10 职场文书
队名及霸气口号大全
2015/12/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android