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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 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
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP学习笔记之一
2011/01/17 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php邮件发送的两种方式
2020/04/28 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
教师岗位职责
2013/11/17 职场文书
销售活动策划方案
2014/08/26 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python