浅析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给基本控件的取值、赋值示例
May 23 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 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+MSSQL分页的例子
2006/10/09 PHP
PHP 开发工具
2006/12/06 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
js实现自定义路由
2017/02/04 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
python字典多条件排序方法实例
2014/06/30 Python
星球大战与Python之间的那些事
2016/01/07 Python
用python制作游戏外挂
2018/01/04 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
家庭贫困证明
2014/09/23 职场文书
大学学生会辞职信
2015/05/13 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
Python经常使用的一些内置函数
2022/04/11 Python