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 ...
随机推荐
- 了不起的WebRTC:生态日趋完善,或将实时音视频技术白菜化
本文原文由声网WebRTC技术专家毛玉杰分享. 1.前言 有人说 2017 年是 WebRTC 的转折之年,2018 年将是 WebRTC 的爆发之年,这并非没有根据.就在去年(2017年),WebR ...
- nginx+lua学习
1. nginx+lua学习 1.1. 网关架构 1.2. nginx命令和信号控制 nginx -s stop 快速关闭,不管有没有正在处理的请求 nginx -s quit 优雅关闭方式,推出前完 ...
- Spring Boot(八):RabbitMQ 详解
RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用. 消息中间件在互联网公司的使用中越来越多,刚才还看到新闻阿里将 RocketMQ 捐献给了 ...
- 【array】数组复习
一.定义 数组:一组相关变量的集合. 二.初始化 三种方法初始化: int [] intArray = new int[4]; //必须表明容量才表示已经初始化,不带的话会报错未初始化 String ...
- python(leetcode)-48旋转图像
给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1: 给定 m ...
- 整理+学习《骆昊-Java面试题全集(上)》
★可以关注微信公众号,了解更多技术和行业信息 2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不 ...
- rest-framework之权限组件
权限 权限 作用 : 校验用户是否有权限访问 检测权限肯定是在用户认证通过之后,所有可以直接在request中取出用户做判断 先定义一个类,继承 BasePermission. from rest_f ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 【原创】单片系统SoC
人们根据需要把一些功能模块(蓝牙.GPRS.TCP/IP通信模块等等)与MCU进行有机的结合,制造出集成度更高的系统级的芯片. SoC是System on Chip的缩写,直译是“芯片级系统” ...
- SHELL脚本--简介
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 脚本都以#!/bin/bash开头,“#”称为sharp,“! ...