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 相关文章推荐
JScript的条件编译
May 29 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
为python设置socket代理的方法
2015/01/14 Python
python获取当前日期和时间的方法
2015/04/30 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
个人简历自荐信
2013/12/05 职场文书
教师党员思想汇报
2014/01/06 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
研发工程师岗位职责
2014/04/28 职场文书
大学生活感想
2015/08/10 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python