浅析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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
微信小程序之购物车功能
Sep 23 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
优化javascript的执行速度
2010/01/23 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python配置文件写入过程详解
2019/10/19 Python
Python selenium的基本使用方法分析
2019/12/21 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
销售业务员岗位职责
2014/01/29 职场文书
人事经理岗位职责
2014/04/28 职场文书
环保项目建议书
2014/08/26 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
小学运动会报道稿
2015/07/22 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL