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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
jquery构造器的实现代码小结
May 16 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
javascript实现前端分页功能
Nov 26 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python测试人员需要掌握的知识
2018/02/08 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
应届生.NET方向面试题
2015/05/23 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
政治思想表现评语
2014/05/04 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年计生工作总结
2014/11/21 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python