浅析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的计算文本框字数的代码
Jun 06 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
JSON取值前判断
Dec 23 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
php自动加载的两种实现方法
2010/06/21 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JavaScript 指导方针
2007/04/05 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python中比较两个列表的实例方法
2019/07/04 Python
python中的global关键字的使用方法
2019/08/20 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python 读取数据库并绘图的实例
2019/12/03 Python
详解Python IO编程
2020/07/24 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
高中生学习的自我评价
2013/12/14 职场文书
农场厂长岗位职责
2013/12/28 职场文书
求职自荐信怎么写
2014/03/06 职场文书
倡议书格式范文
2014/04/14 职场文书
入党推优材料
2014/06/02 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
利用python进行数据加载
2021/06/20 Python
浅谈Python数学建模之整数规划
2021/06/23 Python
css3 选择器
2022/05/11 HTML / CSS