浅析JavaScript中的类型和对象


Posted in Javascript onNovember 29, 2013

JavaScript是基于对象的,任何元素都可以看成对象。然而,类型和对象是不同的。本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型。毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的。

网上对于prototype的文章很多,一直没明白核心的思想。最后写了很多例子代码后才明白:prototype只能用在类型上。

以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系:

  例子代码 说明
1 Object.prototype.Property = 1;Object.prototype.Method = function () {     alert(1); }   var obj = new Object(); alert(obj.Property); obj.Method(); 可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String
2 var obj = new Object();obj.prototype.Property = 1; //Error //Error obj.prototype.Method = function() {     alert(1); } 在实例上不能使用prototype,否则发生编译错误
3 Object.Property = 1; Object.Method = function() {     alert(1); }   alert(Object.Property); Object.Method(); 可以为类型定义“静态”的属性和方法,直接在类型上调用即可
4 Object.Property = 1; Object.Method = function() {     alert(1); } var obj = new Object(); alert(obj.Property); //Error obj.Method(); //Error 实例不能调用类型的静态属性或方法,否则发生对象未定义的错误。
5 function Aclass() { this.Property = 1; this.Method = function() {     alert(1); } } var obj = new Aclass(); alert(obj.Property); obj.Method(); 这个例子演示了通常的在JavaScript中定义一个类型的方法
6 function Aclass() { this.Property = 1; this.Method = function() {     alert(1); } } Aclass.prototype.Property2 = 2; Aclass.prototype.Method2 = function {     alert(2); } var obj = new Aclass(); alert(obj.Property2); obj.Method2(); 可以在外部使用prototype为自定义的类型添加属性和方法。
7 function Aclass() { this.Property = 1; this.Method = function() {     alert(1); } } Aclass.prototype.Property = 2; Aclass.prototype.Method = function {     alert(2); } var obj = new Aclass(); alert(obj.Property); obj.Method(); 在外部不能通过prototype改变自定义类型的属性或方法。 该例子可以看到:调用的属性和方法仍是最初定义的结果。
8 function Aclass() { this.Property = 1; this.Method = function() {     alert(1); } } var obj = new Aclass(); obj.Property = 2; obj.Method = function() {     alert(2); } alert(obj.Property); obj.Method(); 可以在对象上改变属性。(这个是肯定的) 也可以在对象上改变方法。(和普遍的面向对象的概念不同)
9 function Aclass() { this.Property = 1; this.Method = function() {     alert(1); } } var obj = new Aclass(); obj.Property2 = 2; obj.Method2 = function() {     alert(2); } alert(obj.Property2); obj.Method2(); 可以在对象上增加属性或方法
10 function AClass() {        this.Property = 1;        this.Method = function()        {               alert(1);        } }   function AClass2() {        this.Property2 = 2;        this.Method2 = function()        {               alert(2);        } } AClass2.prototype = new AClass();   var obj = new AClass2(); alert(obj.Property); obj.Method(); alert(obj.Property2); obj.Method2(); 这个例子说明了一个类型如何从另一个类型继承。
11 function AClass() {        this.Property = 1;        this.Method = function()        {               alert(1);        } }   function AClass2() {        this.Property2 = 2;        this.Method2 = function()        {               alert(2);        } } AClass2.prototype = new AClass(); AClass2.prototype.Property = 3; AClass2.prototype.Method = function() {        alert(4); } var obj = new AClass2(); alert(obj.Property); obj.Method(); 这个例子说明了子类如何重写父类的属性或方法。
以上例子中,关于通过类型实现重用方面,重要的有:
·例子1:JavaScript中允许添加行为的类型
·例子2:prototype使用的限制
·例子3:如何定义类型上的静态成员
·例子7:prototype在重定义类型的成员上的限制
·例子10:如何让一个类型继承于另一个类型
·例子11:如何在子类中重新定义父类的成员

JavaScript能够实现的面向对象的特征有:
·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
中止javascript执行的方法
Feb 14 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
vue组件生命周期详解
Nov 07 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 #Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 #Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 #Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 #Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
总结对比php中的多种序列化
2016/08/28 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
js实现网页随机验证码
2020/10/19 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python入门篇之字典
2014/10/17 Python
Python实现CET查分的方法
2015/03/10 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
用Eclipse写python程序
2018/02/10 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
护理专科学生自荐书
2014/07/05 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书