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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
Underscore源码分析
Dec 30 Javascript
js实现文字滚动效果
Mar 03 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
vue实现日历表格(element-ui)
Sep 24 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
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php数组键名技巧小结
2015/02/17 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python 合并文件的具体实例
2013/08/08 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python中将字典转换为列表的方法
2016/09/21 Python
彻底理解Python list切片原理
2017/10/27 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python语言的优势是什么
2020/06/17 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
什么是接口(Interface)?
2013/02/01 面试题
大学生简历自我评价2015
2015/03/03 职场文书
成事在人观后感
2015/06/16 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
TV动画《间谍过家家》公开PV
2022/03/20 日漫
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python