浅析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 相关文章推荐
使用typeof判断function是否存在于上下文
Aug 14 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue-cli3配置与跨域处理方法
Aug 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
实用函数8
2007/11/08 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
详解JS数值Number类型
2018/02/07 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
详解Python当中的字符串和编码
2015/04/25 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Django choices下拉列表绑定实例
2020/03/13 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python归并排序算法过程实例讲解
2020/11/04 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
学校岗位设置方案
2014/01/16 职场文书
公休请假条
2014/04/11 职场文书
启动仪式策划方案
2014/06/14 职场文书
党性分析材料格式
2014/12/19 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript