浅析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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
js left,right,mid函数
Jun 10 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
详解Node.js异步处理的各种写法
Jun 09 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
2021年最新CPU天梯图
2021/03/04 数码科技
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python中生成ndarray实例讲解
2021/02/22 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
机关搬迁方案
2014/05/18 职场文书
经营理念口号
2014/06/21 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
升职自荐信怎么写
2015/03/05 职场文书
教师节寄语2015
2015/03/23 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书