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 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
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
php5 and xml示例
2006/11/22 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python根据经纬度计算距离示例
2014/02/16 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
哪些情况下不应该使用索引
2015/07/20 面试题
What is EJB
2016/07/22 面试题
致裁判员加油稿
2014/02/08 职场文书
管理标语大全
2014/06/24 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python