javascript 面向对象编程 function也是类


Posted in Javascript onSeptember 17, 2009

但javascript中并没有类概念,所谓的类也是模拟而来,通过函数加闭包模拟出类成员及私有成员(关于闭包可以参见跨越边界: 闭包)。这里我们将用比较平实的方式来了解一下javascript中的”类”,避开一些生硬的原理。

      既然是用function来模拟类,所以编写代码创建类的关键字还是function。我们创建一个座标点类。

function Point() {
this.X = 0;
this.Y = 0;
};
 
var zeroPoint = new Point();
alert("当前座标值( X:" + zeroPoint.X + " , Y:" + zeroPoint.Y + " )");

        javascript 面向对象编程 function也是类

      大家都知道非静态类成员的访问需要通过对象来完成,所以先new出了一个Point类型对象,再通过该对象完成X和Y轴座标值的访问。从语法上来说,javascript类对象的创建过程和C#等差不多,但实现机制却不相同。这里的new创建出了一个Object,后续的Point()函数执行时将其this指向了这个新的Object对象。Point中的this.X和this.Y是Point类的两个公共成员,所以Point的对象可以直接对它们进行访问。

      说到类成员或对象的成员,免不了要提到可访问性的问题。在javascript的类中,也有public成员和private成员之分,但究其细节却不尽相同。javascript私有成员也是些在类外部不可以通过对象进行操作的成员,其实在类的内部成员之间私有成员也不定能被访问。在类的内部一般只有私有成员和私有成员之间可以互相的访问,你可以认为其它成员权限不够不能操作这些隐私的东西,但如果你有特权,那就不一样了,管它私有公开照用不误。私有成员变量和普通变量声明一样,用var关键字,私有方法可以用var声明变量来接收方法对象,也可以像普通方法那样去构建。

function Lady() {
var age = 30;
var name = "菜花";
 
var think = function() {
alert("其实我今年" + age + "岁。");
};

function fancy(){
alert("幻想变成20岁。");
};
 
this.Introduce = function() {
alert("我叫" + name + " , 今年20岁。");
};
};
 
var younglady = new Lady();
alert(younglady.age);//结果undefined
younglady.think(); //不支持
younglady.fancy(); //不支持

      上面是一个Lady类,age、think、fancy都是私有成员,think和fancy方法可以访问age和name,think和fancy两个方法也可以互相进行调用。但它们是私有的,所以创建出来的youngLady对象并不能调用到age、think和fancy,当然也不能调用到name。如果私有成员只能互相之间调用,其实也就失去了私有成员存在的意义。javascript提供特权成员可以建立外界和私有成员互通的桥梁。特权成员是公共成员的一种,公共成员有普通公共成员、特权成员和对象公共成员。

      特权成员就是在类中用this.XX的方式建立的成员,它们可以通过对象来被调用,它们也可以访问私有成员,可以建立私有成员被访问的通道。

function Lady() {
var age = 30;
this.Name = "菜花";
 
var think = function() {
alert("其实我今年" + age + "岁。");
};
 
function fancy() {
alert("幻想变成20岁。");
};
 
this.Introduce = function() {
alert("我叫" + this.Name + " , 今年" + age + "岁。");
};
};
 
var younglady = new Lady();
younglady.Introduce(); //Introduce

        javascript 面向对象编程 function也是类

      普通公共成员的创建,不在类的里面来编码,而是通过类的prototype来创建。添加普通公共成员都直接添加到类的prototype中,而prototype就是一个像JSON对象一样的成员集对象。当我们进行对象创建时,可以认为会将类prototype中的成员整体copy入新的Object对象中。

var younglady = new Lady();
younglady.Introduce(); //Introduce
 
Lady.prototype.Hobby = "上网";
Lady.prototype.GetName = function() {
return this.Name;
};

var lady2 = new Lady();
alert(lady2.GetName());
alert(lady2.Hobby);

      上面代码通过prototype为Lady类添加了普通公共成员GetName方法和Hobby属性,因为是公共成员,所以它们可以和原先定意在类中的特权成员进行互相访问。因为公共成员可以互相访问。对上述代码做些修改。如下。

var younglady = new Lady();
 
Lady.prototype.Hobby = "上网";
Lady.prototype.GetName = function() {
return this.Name;
};
 
alert(younglady.GetName());
alert(younglady.Hobby);

      先创建出Lady对象,再修改类成员,先前创建好的对象也具有了新的成员。这就是prototype做为类原型所带来的好处,这里简单理解,可以认为prototype是类对象的模版,模版的修改会影响到所有该类对象。

      在添加普通成员的时候也可以来个批量的添加,直接用一个新的JSON对象来赋给prototype就可以了。但是要注意,现在是将原先的prototype进行了替换,在替换之前创建的对象引用的是旧的prototype对象,所以对prototype替换之前创建的对象不会有Hobby和GetName成员。

Lady.prototype = {
Hobby: "上网",
GetName: function() {
return this.Name;
}
};
var younglady = new Lady();
alert(younglady.GetName());
alert(younglady.Hobby);

      除了在构建类时可以添加公共成员,还可以对对象直接进行成员操作。这在本小系列第二篇文章里有描述。这里做一下补充,对对象直接添加的成员,也是一种公共成员,这些成员也可以和类中原先具有的公共成员进行访问。

younglady.SetName = function(name) {
this.Name = name;
};
younglady.SetName("菜明");
alert(younglady.GetName());

以上说了一下类成员的东西,下次再说说类继承相关的东西。(如有不当说法请指正)

Javascript 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
详解vue项目打包步骤
Mar 29 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
类似CSDN图片切换效果脚本
Sep 17 #Javascript
var与Javascript变量隐式声明
Sep 17 #Javascript
html数组字符串拼接的最快方法
Sep 16 #Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 #Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 #Javascript
不安全的常用的js写法
Sep 15 #Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 #Javascript
You might like
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
js 内存释放问题
2010/04/25 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python下的twisted框架入门指引
2015/04/15 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python实现最常见加密方式详解
2019/07/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
村党组织公开承诺书
2015/04/30 职场文书
教师工作证明范本
2015/06/12 职场文书
小学体育教学随笔
2015/08/14 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫