《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析


Posted in Javascript onApril 07, 2020

本文实例讲述了Javascript面向对象程序设计对象成员的定义。分享给大家供大家参考,具体如下:

序:

刚接触javascript的时候,觉得这语言有点儿摸不着门道,感觉这玩意儿太难学了,没什么规范,没什么像样的手册,而且还跟html,dom,css打交道,更觉得一团糟,代码可读性也很差,面向过程的勉强能看懂,看面向对象的代码简直就是杯具,各种括号啊,后来了解ajax,了解了jquery,知道了很多网页特效都是用javascript写的,才慢慢有了好感,来了bd以后写javascript和php一半一半才渐渐发现javascript的强大和灵活,看了《javascript权威指南》和《javascript高级编程》之后发现,正是因为她的灵活,铸就了她的伟大,接下来我会把学习javascript中的一些内容记录下来,一方面加深自己的印象,另一方面也算是分享吧。

1.公有成员

我们都知道,在javascript里,万物皆对象,因此定义一个对象和公有成员最简单不过了:

var obj = {
 aa:"I'm public"
}

但是这个对象只是一个空壳,不论在java还是C++/C#中对象都是有构造函数的,怎么能让定义对象的时候,同时定义他的构造函数呢?在java/C++中,构造函数其实是对象的一个成员函数,但是在javascript中我们要换一种思维,如果仅仅定义构造函数:

var obj = {
 aa:"I'm public",
 _construct:function(){
 }
}

我们在new这个对象的时候,构造函数是不会“自动”执行的,所以想想之前说到的“万物皆对象”,如何让一个对象在定义的时候执行一个函数呢?那就是定义一个函数对象:)

var obj = function(mem1){
 this.aa = mem1;
};

这样我们就定义了一个具有“构造函数”的对象了

2.公有方法

定义公有方法的方式和定义公有成员的方式一样,只不过这个成员是一个函数,而不是一个string或者其他类型的对象

var obj = fucntion(mem1){
 this.a = mem1;
 this.getA = function(){
  return this.a;
 }
};

3.私有成员和私有方法

我们知道虽然javascript中有对象的概念,但是却没有“私有”的概念,也就是说我们不能像java/C++一样使用关键词private来定义一个私有成员,只要是成员,就是公有的,那么怎么实现私有成员呢?我们首先考虑这个问题:什么叫私有成员?私有成员就是在对象的外部不能直接访问的成员,比如对象obj,如果我们能直接引用obj.a那么他就是公有的,如果引用obj._b,提示错误或者抛出异常,那么_b就是私有的。实现私有成员也就是实现在类的外部不能访问他的某种成员,而只能通过他的成员函数访问。在1中已经说了,我们现在定义的是函数对象,那么也就是说要实现在函数的外部不能访问他的某种成员,而只能通过他的成员函数访问。函数的成员函数这叫什么话?我们换一种说法:函数内部定义的函数。那么我们要实现的就是在函数的外部不能访问,但是在函数内部定义的函数能访问的某种变量,如果了解javascript特性的开发人员,应该对黑体的这句话感觉似曾相识,没错,这就是闭包的概念。

关于闭包的概念在这儿就不解释了,这个概念可以当作一个专题来讲了,太复杂了,可以看看《javascript高级编程》或者google之。

有了上面的想法,就可以改造一下上面的对象定义。

var obj = function(){
 //private member
 var _b;
 //public member
 this.a = mem1;
 
 //constructor
 _b = mem2;

 //private method definations
 function _getB(){return _b};

 //public method definations
 this.getA = function(){return this.a;};
 this.getB = function(){return _getB();};
 this.setA = fucntion(){……};
 this.setB = fucntion(){……};
}

由于局部变量_b是在函数作用域定义的,因此在函数对象外部无法访问,同样“局部”函数_getB也是在函数作用域中定义的,也无法在函数对象外部访问,但是同是在函数作用域定义的函数getA和getB由于闭包的作用,即使对象(函数)定义时,对象(函数)的代码执行完了(即离开局部作用域),依然能够访问局部变量(成员)_b和局部变量(函数)_getB,从而实现了私有成员和私有函数。

4.静态变量和静态函数

没错,是“静态变量和静态函数”,当我看到这里的时候也很惊讶,闭包实现私有也就算了,怎么还要搞出来一个静态变量和静态函数?熟悉javascript的都知道原型(prototype)的概念,在我看来,其实原型类似于类属性和类方法,但是他在运行期是可以任意改变的,这里再介绍一下javascript中实现静态变量和静态函数

在私有成员和私有方法中,介绍了可以用闭包来实现将“成员”定义在函数作用域中,从而限制其访问,那么如何实现所有对象共享的成员和函数呢?所谓的所有对象共享,换一种思路其实就是这种成员的作用域和其他成员的作用域不同,还是考虑闭包的概念,我们在私有成员和私有方法中定义的对象,对象定义时他的作用域其实就是整个函数作用域,在函数中定义所有内容在new的时候都会执行一遍,那怎么做才能让对象在new的时候其静态成员和静态函数不再被定义呢?别忘了,我们在定义对象的时候他还是个函数,我们写了这么多函数,为啥没写return呢?因为我们一直把他当对象来用,改把人家当成函数看了吧,如果我们再return一个对象的话,那么在new的时候,就只会new我们return的对象了,因此,在外层函数定义的内容只在定义的时候执行,在new的时候就不再执行了。有人又问了,那我们的对象就不再是外层函数对象了,在他里面定义的内容咋用啊?别忘了“闭包”这个概念,return的函数也是在(外层)函数作用域内定义的函数,他“有权”访问外层函数定义的内容,因此,静态变量和静态函数的定义如下:

var obj = (function(){
 
 //static attribute
 var obj_num = 0;
 //static method
 function add(){obj_num++};
 
 return function(mem1){
  this.a = mem1;
  this.func = function(){};
  
  //blow you can write some constructor codes
 }

})();//最早看到这一行我就头大,现在看起来是多么的艺术啊^_^

通常静态方法的时候都是私有的,如果想定义公有的静态方法,可以加上:

obj.pubmethod = function(){
};

5.常量

什么是常量?常量就是对象中不能改变的量,什么又叫对象中不能改变的量?就是说无论在对象内部还是外部都不能改变的量,私有变量本身在外部无法改变,内部无法改变的话也就是没有一个能改变其值的函数即可^_^

以上便是关于javascript中定义最基础对象的一些方法和技巧了,语言越灵活,留给人们思考的空间也就更广阔。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
Ionic快速安装教程
Jun 03 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php5数字型字符串加解密代码
2008/04/24 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
幼儿教师求职信
2014/05/24 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis