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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
vue cli 3.0 搭建项目的图文教程
May 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数据库类
2009/05/27 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python issubclass 和 isinstance函数
2019/07/25 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
销售自荐信
2013/10/22 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
租房协议书
2014/04/10 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
文员岗位职责范本
2015/04/16 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
2016新年晚会开场白
2015/12/03 职场文书