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继承 笔记
Jul 13 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
js 颜色选择插件
Jan 23 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php url路由入门实例
2014/04/23 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
详解python3中的真值测试
2018/08/13 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
红色故事汇观后感
2015/06/18 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android