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+json 通用三级联动下拉列表
Apr 19 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JavaScript简介
Feb 15 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
程序员机试试题汇总
2012/03/07 面试题
中学生秋季运动会广播稿
2014/09/21 职场文书
同学聚会感言一句话
2015/07/30 职场文书
小组口号霸气押韵
2015/12/24 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android