浅析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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
基于vue的验证码组件的示例代码
Jan 22 Javascript
详解React 条件渲染
Jul 08 Javascript
javascript实现随机抽奖功能
Dec 30 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
关于vue.js组件数据流的问题
2017/07/26 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
Python发展简史 Python来历
2019/05/14 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python 占位符的使用方法详解
2019/07/10 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
管道维修工岗位职责
2013/12/27 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang