JavaScript碎片———函数闭包(模拟面向对象)
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。
具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念。由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法:
1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
Tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!
具体来说模拟类有以下5种常见写法:
第一种写法:具体介绍见以下代码注释。
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类相似,推荐使用!
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 ) );
第三种写法:主要思想是自己先实例化出一个对象,在往这个对象里添加属性及方法
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
} alert( Circle.Area( 1.0 ) );
第四种写法:该写法跳过new这一步骤,且电脑简单清晰明了,个人推荐这种写法!!
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
第五种写法:此方法与前三种大同小异,不过听说这种写法很少人用,不建议推荐使用哦!!
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 可加可不加,若不加可往其后添加()。
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方法将需要继承的类放入其中即可达到继承的效果。。
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 ...
随机推荐
- 【QT】在子窗体中控制父窗体
[背景说明]我的主窗体的名字叫做MainWindow,其子窗口是一个叫subDialog的类.我现在想做的是在子窗口的函数中调用父窗口. 在父窗口中打开子窗口 //弹出对话框确定变换的参数 subDi ...
- python面向对象编程(2)—— 实例属性,类属性,类方法,静态方法
1 实例属性和类属性 类和实例都是名字空间,类是类属性的名字空间,实例则是实例属性的名字空间. 类属性可通过类或实例来访问.只有通过类名访问时,才能修改类属性的值. 例外的一种情况是,当类属性是一个 ...
- 2 Docker 镜像基础
Docker 镜像可以从docker.io 下载,也可以自己通过Dockerfile来构建镜像,我有时从国外下载镜像时,网速不行,我就改成国内的镜像,修改如下: # vim /etc/docker/d ...
- Azure 登录设置
转自 http://blog.csdn.net/azure_nonofficial/article/details/38095459 这是我们Azure非官方的第一篇博文,欢迎大家各种拍砖. 微软云计 ...
- msysgit 上传文件夹,规范化的日常
在我们第一次成功的上传到github之后,要上传文件夹的我们要在msysgit里输入些什么呢? 选择要上传的文件夹前一项右键点击git bash here 进入msysgit后 首先初始化,输入 gi ...
- Mininet自定义网络拓扑
在Mininet上的网络拓扑有两种方式 第一种 用mininet自带的miniedit可视化工具,在mininet/mininet/examples/的目录下的一个miniedit.py,运行这个文件 ...
- PostgreSQL 连接问题 FATAL: no pg_hba.conf entry for host
The server doesn't grant access to the database: the server reports FATAL: no pg_hba.conf entry for ...
- programming-languages学习笔记--第7部分
programming-languages学习笔记–第7部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...
- jmeter接口测试2-断言
接上篇 要想更好的查看接口测试结果,可以添加断言 举一个最简单的响应断言的例子 前提环境:根据接口文档可知,待测试接口返回值1,-1,-2,-3 (1)添加断言 (2)设置断言内容,看响应的内容是否含 ...
- EasyUI Calendar 日历插件,只显示年月。
从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...