浅析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的修改当前TAB显示标题的代码
Dec 11 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
redux.js详解及基本使用
May 24 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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
2006/12/13 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
nodejs教程之入门
2014/11/21 NodeJs
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python程序中设置HTTP代理
2016/11/06 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
中国好声音华少广告词
2014/03/17 职场文书
环保志愿者活动总结
2014/06/27 职场文书
电子专业自荐信
2014/07/01 职场文书
班级出游活动计划书
2014/08/15 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
总经理聘用协议书
2015/09/21 职场文书
师德培训心得体会2016
2016/01/09 职场文书
初三化学教学反思
2016/02/22 职场文书