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 ui resizable bug解决方法
Oct 26 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue的$http的get请求要加上params操作
Nov 12 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生成xml简单实例代码
2009/12/16 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php实现计数器方法小结
2015/01/05 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
新手入门常用代码集锦
2007/01/11 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
python线程、进程和协程详解
2016/07/19 Python
django批量导入xml数据
2016/10/16 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
简单了解Python生成器是什么
2019/07/02 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
倡议书格式
2014/08/30 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers