浅析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用图作提交按钮或超连接
Mar 26 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Django如何实现上传图片功能
2019/08/16 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python如何代码集体右移
2020/07/20 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
消防安全责任书
2014/04/14 职场文书
网页美工求职信范文
2014/04/17 职场文书
我爱我校演讲稿
2014/05/21 职场文书
文明班集体申报材料
2014/05/23 职场文书
综艺节目策划方案
2014/06/13 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
小学教研工作总结2015
2015/05/13 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript