浅析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 AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
解决linux下node.js全局模块找不到的问题
May 15 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
Layui 动态禁止select下拉的例子
Sep 03 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
用js计算页面执行时间的函数
2006/12/07 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
好军嫂事迹材料
2014/01/15 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
销售员自我评价
2015/03/11 职场文书
小学数学教师研修日志
2015/11/13 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python