JavaScript 基于原型的对象(创建、调用)


Posted in Javascript onOctober 16, 2009

JavaScript中的对象有三种
1,内部对象
如Array,Boolean,Data,Math,Number,Object,RegExp,String对象等
这些对象系统给我们提供了各自的属性与方法供调用。
2,基于类的对象
用类的方式实现对象的引用,这些类需要我们自己定义
3,基于原型的对象
提供有关如何使用 JavaScript 基于原型的对象模型的指南,并且提供指向特定信息的链接,这些信息描述基于原型的对象的自定义构造函数和继承。

在我们写js代码的时候,内部对象是不可避免的要引用,但是光靠这些对象是不够的,所以需要我们自己定义对象,这个时候通常用到的对象是第三种,即基于原型的对象,下面就如何创建自己的对象,定义对象的方法、属性,调用对象给出详细的说明。

//JScript 的一个强大功能是能够定义构造函数,以创建自定义的基于原型的对象,以便在您的脚本中使用。 
//要创建基于原型的对象的实例,首先必须定义一个构造函数。 
//此过程将创建一个新对象并将它初始化(创建属性并赋初始值)。 
//当完成后,构造函数将返回对所构造对象的引用。 
//在构造函数内部,创建的对象是通过 this 语句引用的。 
function people(name,age)//定义people对象 
{ 
this.mName=name;//这里的mName表示属性,无需在外面定义,this指示的是people这个对象 
this.Age=age; 
this.category="哺乳动物"; 
this.toString=Exporting;//方法,注意这里只能写toString,而不是toString() 
this.myMethod=function()//等价于this.myMethod=method;然后下面写method的方法 
{ 
return "你好"; 
} 
} 
function Exporting()//可以有返回值,但函数名前不用写返回值的类型,如string,int之类 
{ 
return "我的名字是——"+this.mName+",年龄是——"+this.Age; 
} 
/*function method() 
{ 
return "你好"; 
}*/ 
people.prototype.getName=function()//在构造函数外面写方法, 
//也也可以这样写function people.prototype.getName() 
//等价于在构造函数里面的方法:this.getName 
{ 
return this.mName; 
} 
people.prototype.getAge=this.Age;//在构造函数外面写属性, 
//等价于在构造函数里面的方法:this.getAge 
function people.prototype.getMoney()//同people.prototype.getMoney=function()等价 
//也等价于在构造函数里的写法:this.getMoney 
{ 
return "1000"; 
} 
function show()//调用people对象 
{ 
var me=new people("刘德华",22);//实例化people对象,关键字new 
//var myName=me.getName(); 
//alert(myName); 
me.sex="男";//这里的sex属性只能用于me这个实例,即特有属性 
//而如果有定义var you =new people("小强",1); 
//you这个实例却不能调用sex属性 
//如果要这两个实例都可以引用的话应该把sex属性写作people.prototype.sex 
//alert(me.sex); 
//alert(me.category); 
//alert(me.toString());//或者直接写alert(me)即可 
//alert(me.myMethod()); 
//alert(me.getMoney()); 
alert(me.myMethod()+"\n姓名:"+me.getName()+"\n性别:"+me.sex+"\n类别:"+me.category+"\n总资产:"+me.getMoney()+"\n总结:"+me.toString()); 
}

根据上面的思路,可以在JavaScript内置对象上添加其它属性或者方法,下面为String对象增加一
good方法和bad属性,这是内置对象中所没有的方法和属性
String.prototype.good=function()//自定义方法 
{ 
return "恭喜你成功对内置String对象追加good方法"; 
} 
String.prototype.bad="恭喜你成功对内置String对象追加bad属性";//自定义属性 
function test()//调用String对象追加的属性和方法 
{ 
var str="good good study";//定义一个字符串实例str 
alert(str.good()+"\n"+str.bad);//调用自定义的string对象的方法good和属性bad 
}

最后在html中添加两个button按钮,测试对象people和string对象追加的方法和属性
<html> 
<title>JavaScript基于原型的对象</title> 
<body> 
<div> 
<input type="button" value="自定义对象定义" onclick="show()"> 
</div> 
<div> 
<input type="button" value="内置对象追加方法" onclick="test()"> 
</div> 
</body> 
</html>

测试结果通过。。。。。。。表明对象的创建、对象方法属性的调用、内部对象的追加方法和属性调用都是正确的。
Javascript 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
微信小程序实现蓝牙打印
Sep 23 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
JavaScript 定义function的三种方式小结
Oct 16 #Javascript
JavaScript 函数式编程的原理
Oct 16 #Javascript
实现JavaScript中继承的三种方式
Oct 16 #Javascript
显示js对象所有属性和方法的函数
Oct 16 #Javascript
半角全角相互转换的js函数
Oct 16 #Javascript
JavaScript 三种创建对象的方法
Oct 16 #Javascript
JQuery困惑—包装集 DOM节点
Oct 16 #Javascript
You might like
珊瑚虫IP库浅析
2007/02/15 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
php依赖注入知识点详解
2019/09/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Openlayers绘制地图标注
2020/09/28 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python处理json数据中的中文
2014/03/06 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
numpy.array 操作使用简单总结
2019/11/08 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python如何设置静态变量
2020/09/07 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
单位办理社保介绍信
2014/01/10 职场文书
老师的检讨书
2014/02/23 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
单位租车协议书
2015/01/29 职场文书
小学体育教学随笔
2015/08/14 职场文书