浅析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 相关文章推荐
正则表达式语法
Oct 09 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
canvas实现探照灯效果
Feb 07 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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服务器页面间跳转实现方法
2012/08/02 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jquery 常用操作方法
2010/01/28 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python安装gdal的两种方法
2019/10/29 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
PHP开发的一般流程
2013/08/13 面试题
家长会主持词
2014/03/26 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
运动会标语
2014/06/21 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers