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 相关文章推荐
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
用原生js做单页应用
Jan 17 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
Vue路由前后端设计总结
Aug 06 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Python交换变量
2008/09/06 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
keras多显卡训练方式
2020/06/10 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
上课打牌的检讨书
2014/02/15 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
职务聘任书范文
2014/03/29 职场文书
博士论文答辩开场白
2015/06/01 职场文书
素质拓展训练感想
2015/08/07 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python