《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 相关文章推荐
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
详解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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
scrapy爬虫实例分享
2017/12/28 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python列表对象实现原理详解
2019/07/01 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
厨房工作人员岗位职责
2013/11/15 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
老师对学生的评语
2014/04/18 职场文书
大学生安全责任书
2014/07/25 职场文书
店面出租协议书范本
2014/11/28 职场文书
升职感谢信
2015/01/22 职场文书
教师岗位职责
2015/02/03 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书