对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢?
我们会把现实中的一些事物抽象成一个Class并且把事物的属性(名词)作为Class的Property把事物的动作(动词)作为Class的methods。在面向对象的语言中(C#等)都会有一些关键字来修饰类或者属性(Private,public,protect),这些关键词描述了访问的权限,不多做解释。
我们来看看Javascript的易变的特性(我们还用上一次的例子):
01 |
var Man = function (name, age) { |
05 |
var Person = new Interface( "Person" , [ "GetName" , "GetAge" ]); |
06 |
Man.prototype = { GetName: function () { return this .Name; }, |
07 |
GetAge: function () { return this .Age; } |
09 |
var Gonn = new Man( "Gonn" , 25); |
11 |
Gonn.DisplayAll = function () { return "Name: " + this .GetName() + "; Age: " + this .GetAge() } |
12 |
alert(Gonn.DisplayAll()); |
先创建了一个Class(Javascript的匿名方法)拥有2个公共的(public)的字段(本篇blog会详细讲解,继续往下看)和2个public的方法,我们创建了一个Instance--Gonn,但是我可以为这个Instance动态的添加一个DisplayAll的方法,我想任何面向对象的语言是做不到这一点的,Javascript的灵活体现之一。
现在假设一个场景,如果有很多的程序员要用这段代码,由于Javascript的易变性,程序员就可以在实例化后改变Name的值,那初始化的动作就没有意义了:
1 |
var Gonn = new Man( "Gonn" , 25); |
所以我们不能让外部的人去任意的修改这个字段,在Java或C#中我们只需要个这个字段改为Private,就万事OK了,但是Javascript没有这个关键词,那我们需要这么做呢。我们可以想下在C#除了设置Private之外我们还可以怎么做?我们可以设置Setter和Getter方法。
我们来修改下上面的代码:我们称方法一:
01 |
var Person = new Interface( "Person" , [ "SetName" , "SetAge" , "GetName" , "GetAge" ]); |
02 |
var Man = function (name, age) { |
07 |
SetName: function (name) { this .Name = name; }, |
08 |
SetAge: function (age) { this .Age = age; }, |
09 |
GetName: function () { return this .Name; }, |
10 |
GetAge: function () { return this .Age; } |
12 |
var Alan = new Man( "Alan" , 25); |
13 |
Alan.Name = "Alice" ; //悲剧了,我alert的时候变成Alice了 |
14 |
Alan.SetAge(10); //悲剧,被别人把我的年龄给这么小 |
15 |
alert(Alan.GetName()); |
16 |
Alan.DisplayAll = function () { return "Name: " + this .GetName() + "; Age: " + this .GetAge() } |
17 |
alert(Alan.DisplayAll()); |
貌似样子很像C#中的Setter和Getter,但是还是可以被外部修改。但是从约束上来看,貌似比上面的code要好看些,通过方法来设置初始值。但是问题还是没有解决,我们来看看下面一种方法:闭包。解释一下,在Javascript中是通过This关键字来开发权限的(Public)。在讲闭包之前,我们需要了解下闭包的本质: 在Javascript中,只有方法是有作用域的,如果在方法中声明的变量在外部是无法访问的,那Private的概念就出来了。
01 |
var Person = new Interface( "Person" , [ "SetName" , "SetAge" , "GetName" , "GetAge" ]); |
02 |
var Man = function (newname, newage) { |
04 |
this .SetName = function (newname) { name = newname; } |
05 |
this .SetAge = function (newage) { age = newage; } |
06 |
this .GetName = function () { return name; } |
07 |
this .GetAge = function () { return age; } |
09 |
this .SetName(newname); |
11 |
var Alan = new Man( "Alan" , 25); |
12 |
Alan.name= "Alice" ; //现在name是private了,我是无法去修改的 |
现在私有的功能就实现了,我们只是用Var来代替了This而已。//我们把公共(Public)并且可以访问Private的方法称为特权方法,比如上面的this.SetName, this.SetAge.
如果我们的公共方法不涉及到访问Private的字段,那我们可以把他们放到Prototype中。//好处是多个实例的时候内存中也只有一分拷贝
1 |
Man.prototype.DisplayAll = function () { return "Name: " + this .GetName() + "; Age: " + this .GetAge() } |
哈哈~我们来看下稍微有点难度的东西:静态变量和方法。
我们都是知道静态的东西属于类(Class),我们来修改下上面的代码:
01 |
var Person = new Interface( "Person" , [ "SetName" , "SetAge" , "GetName" , "GetAge" , "GetCount" ]); |
02 |
var Man = ( function () { |
04 |
return function (newname, newage) { |
06 |
this .SetName = function (newname) { name = newname; } |
07 |
this .SetAge = function (newage) { age = newage; } |
08 |
this .GetName = function () { return name; } |
09 |
this .GetAge = function () { return age; } |
10 |
this .GetCount = function () { return count; } |
12 |
this .SetName(newname); |
16 |
Man.prototype.DisplayAll = function () { return "Name: " + this .GetName() + "; Age: " + this .GetAge() } |
17 |
var Alan1 = new Man( "Alan" , 25); |
18 |
var Alan2 = new Man( "Alan" , 25); |
19 |
alert( "There are " +Alan2.GetCount()+ " instances of Man" ); |
不管我们是通过Alan1或Alan2去GetCount,结果都一样都是2. 这里count就是一个私有的静态变量。
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- 2018.2.2 JavaScript中的封装
JavaScript中的封装 1.封装的概念 通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以使代码 ...
- JavaScript中面向对象的三大特性(一个菜鸟的不正经日常)
经过几天的学习,把jQuery给啃会了,但是运用的还不算特别熟练,总感觉自己在JavaScript方面的基础十分欠缺,所以继续拾起JavaScript,开始更好的编程之旅~ 今天学的是JavaScri ...
- 如何在 JavaScript 中检查字符串是否包含子字符串?
如何在 JavaScript 中检查字符串是否包含子字符串? // var test4 = _.includes(string, substring); 该方法需要此文件 <script src ...
- 第一百四十三节,JavaScript,利用封装库做百度分享
JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...
- JavaScript中利用Ajax 实现客户端与服务器端通信(九)
一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用X ...
- 如何在JavaScript中使用高阶函数
将另一个函数作为参数的函数,或者定义一个函数作为返回值的函数,被称为高阶函数. JavaScript可以接受高阶函数.这种处理高阶函数的能力以及其他特点,使JavaScript成为非常适合函数式编程的 ...
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
- javaScript中利用ActiveXObject来创建FileSystemObject操作文件
注:如果用javascript读本地文件,遇到安全问题. 需在浏览器中进行设置,如下: 工具—> Internet选项->安全->自定义级别->启用“没有标识为安全的A ...
随机推荐
- mysql 常用函数,基本使用
1:选中排除表1 连接表2 表3 获取选中表1中部分选中表3 的部分 并且设置选中状态select t1.*,if(t2中t3id=t1.id,1,0)as checked from t1 lefet ...
- DedeCMS V5.7sp2最新版本parse_str函数SQL注入漏洞
织梦dedecms,在整个互联网中许多企业网站,个人网站,优化网站都在使用dede作为整个网站的开发架构,dedecms采用php+mysql数据库的架构来承载整个网站的运行与用户的访问,首页以及栏目 ...
- node获取头信息数据
req.fresh req.stale var version = 100; app.get('/test',function(req,res){ res.set('etag',version); i ...
- Odoo8中安装新模块找不到的问题
为了要让系统识别出新的模块,我们需要打开用户的技术特性选项,具体在 左侧栏目->用户->administrator, 将技术特性勾选上,刷新. 然后左侧栏目->模块下面就会 ...
- Android开发——Android系统启动以及APK安装、启动过程
0. 前言 从Android手机打开开关,到我们可以使用其中的app时,这个启动过程到底是怎么样的? 1. 系统上电 当给Android系统上电,在电源接通的瞬间,CPU内的寄存器和各引脚均会被 ...
- uwsgi配置文件
[uwsgi] http = :9000 #the local unix socket file than commnuincate to Nginx #socket端口这个用作nginx与其通讯 s ...
- 【原创】java 获取十个工作日之前或之后的日期(算当天)-完美解决-费元星
[原创]java 获取十个工作日之后的日期(算当天)-完美解决-费元星(仅考虑星期六星期天) /** * * 根据开始日期 ,需要的工作日天数 ,计算工作截止日期,并返回截止日期 * @param s ...
- PostgreSQL 数据库升级
PostgreSQL软件版本升级后,需要使用pg_upgrade迁移旧版本的数据库,具体的操作参数可以参考官方文档,在此记录一下操作过程中出现的细节问题: 新版本软件在initdb的时候要保证loca ...
- 第十二篇 Python函数之全局变量&局部变量&递归函数
全局变量:在定义的时候,顶头写的,没有任何缩进的变量就是全局变量. 全局变量的特点:在当前文件里的任何地方都可以进行调用 局部变量:在子程序里定义的变量,就是局部变量. 子程序:比如.py文件里,写的 ...
- Node.js的require()的工作原理
大多数人都知道Node.js中require()函数做什么的,但是有多少人知道它的工作原理呢?我们每天使用它加载库包和模块,但是它的内部行为原理很神秘. 我们追寻Node模块系统的核心: module ...