JavaScript碎片—函数闭包(模拟面向对象)
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。
具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念css3翻转。由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法:
1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,网页特效,此静态方法中无法使用this变量来调用对象其他的属性!
2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
Tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!
具体来说模拟类有以下5种常见写法:
第一种写法:具体介绍见以下代码注释。
|
1
2
3
4
5
6
7
8
9
10
11
|
function Circle(r) { this.r = r; } Circle.PI = 3.14159;/*Circle.PI属于全局变量 */ Circle.prototype.area = function() { return Circle.PI * this.r * this.r; }/*Circle方法调用prototype属性从而能用this调用 Circle方法中的r属性*/ var c = new Circle(1.0);/* 实例化 Circle*/ alert(c.area()); |
第二种写法:与Java类相似,推荐使用!
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var Circle = function() { var obj = new Object(); /*先实例化Object方法,使之能调用 obj.PI属性及obj.area方法*/ obj.PI = 3.14159; obj.area= function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); |
第三种写法:主要思想是自己先实例化出一个对象,在往这个对象里添加属性及方法
|
1
2
3
4
5
6
7
|
var Circle = new Object(); Circle.PI = 3.14159; Circle.Area = function( r ) { return this.PI * r * r; } alert( Circle.Area( 1.0 ) ); |
第四种写法:该写法跳过new这一步骤,且电脑简单清晰明了,个人推荐这种写法!!
|
1
2
3
4
5
6
7
|
var Circle={ "PI":3.14159, "area":function(r){ return this.PI * r * r; } }; alert( Circle.area(1.0) ); |
第五种写法:此方法与前三种大同小异,不过听说这种写法很少人用,不建议推荐使用哦!!
|
1
2
3
|
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}"); alert( (new Circle()).area(1.0) ); |
想必各位朋友都在想既然是模拟面向对象,那是不是得有封装继承,getset方法???答案是肯定的,那让我们来看看如下代码:
封装:在看看如下代码我们能清晰的了解到封装的使用,假若我们去掉 var name = "default"; 中的var,那么结果又是怎么样??答案是与先前一样的,由此可见无var定义的属性只是再其变量作用域中充当全局,只有属性在其作用域中是私有的,若要定义一个私有方法需要将其赋予一个变量充当属性。还有本例中new 可加可不加,若不加可往其后添加()图片切换。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var person = function(){ //变量作用域为函数内部,外部无法访问 var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }(); alert(person.name);//直接访问,结果为undefined alert(person.getName()); person.setName("abruzzi"); alert(person.getName()); |
实现类和继承:该例的主要思想是定义一个变量,将一个方法赋予它,在根据prototype方法将需要继承的类放入其中即可达到继承的效果。。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }; /* 封装好的一个类Person */ var Jack = function(){}; //继承自Person Jack.prototype = new Person(); //添加私有方法 Jack.prototype.Say = function(){ alert("Hello,my name is Jack"); }; var j = new Jack(); j.setName("Jack"); j.Say(); alert(j.getName()); |
JavaScript碎片—函数闭包(模拟面向对象)的更多相关文章
- JavaScript碎片———函数闭包(模拟面向对象)
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知, ...
- JavaScript的函数闭包详细解释
闭包是指有权访问另一个函数作用域中的变量的函数 一.创建闭包的常见的方式: 就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量. //通过闭包可以返回局部变量 function b ...
- javascript匿名函数 闭包
匿名函数 (function(){ console.info("111111111"); })(); var my = (fun ...
- 函数闭包模拟session
根据上一个认证功能的问题 要解决的就是只需要登录一次 也就是登录一次之后的用户名跟密码可以保存下来让其他函数用-->全局变量 user_dic = {"user_name": ...
- 了解Javascript中函数作为对象的魅力
前言 Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性.并且最重 ...
- 深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
- 简单介绍Javascript匿名函数和面向对象编程
忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...
- 第一百一十节,JavaScript匿名函数和闭包
JavaScript匿名函数和闭包 学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂 ...
- 深入理解javascript原型和闭包(2)——函数与对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
随机推荐
- 安全运维中基线检查的自动化之ansible工具巧用
i春秋作家:yanzm 原文来自:安全运维中基线检查的自动化之ansible工具巧用 前几周斗哥分享了基线检查获取数据的脚本,但是在面对上百台的服务器,每台服务器上都跑一遍脚本那工作量可想而知,而且都 ...
- CCS3怎么实现border边框渐变效果
下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图. ...
- Anaconda / Conda 实践
一.环境 CentOS 7.6 有预装 python 2.7 二.Anaconda 与 Conda 区别 1.Anaconda Anaconda 是Python的一种发行版.包含了: (1)conda ...
- 神经网络架构PYTORCH-几个概念
使用Pytorch之前,有几个概念需要弄清楚. 什么是Tensors(张量)? 这个概念刚出来的时候,物理科班出身的我都感觉有点愣住了,好久没有接触过物理学的概念了. 这个概念,在物理学中怎么解释呢? ...
- TS - 问题分析与处理的一般性方法
本文是对解决问题的一些方法内容的改写与补充! 1 接触与了解 从总体着眼,从细节入手! 确认基本相关信息是必须执行的首要环节,也是后续处理问题的基础. 如果无法清楚地辨别或陈述问题的基本信息,那么,此 ...
- 简单聊一聊那些svg的沿路径运动
之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...
- 使用 Docker 部署 Grafana + Prometheus 监控 MySQL 数据库
一.背景 在平时开发过程当中需要针对 MySQL 数据库进行监控,这里我们可以使用 Grafana 和 Prometheus 来实现监控功能.Grafana 是一款功能强大的仪表盘面板,支持多种数据源 ...
- 细读 php json数据和JavaScript json数据
关于JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强 5.容 ...
- 通过Calendar简单解析Date日期,获取年、月、日、星期的数值
有时候项目中需要用到Date的年.月.日.星期的数值.那么解析方法如下: /**解析日期,获取年月日星期*/ private void parseDateToYearMonthDayWeek(Date ...
- 健康,home? [java的内存浅析]
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 乐观上上,how can other kno u,u r yoursel ...