浅析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 相关文章推荐
奇妙的js
Sep 24 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
深入理解vue Render函数
Jul 19 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 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/10/09 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
详解Python函数式编程—高阶函数
2019/03/29 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python实现自动整理文件的脚本
2020/12/17 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015年企业新年寄语
2014/12/08 职场文书
工程款申请报告
2015/05/15 职场文书