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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery的live使用注意事项
Feb 18 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jQuery定义插件的方法
Dec 18 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
JS轮播图的实现方法
Aug 24 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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python连接数据库的方法
2017/10/19 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python实现Zabbix-API监控
2018/09/17 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python持续监听文件变化代码实例
2020/07/22 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
2019入党申请书格式和范文
2019/06/25 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL