经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。

具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念。由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法:

1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
   2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!

Tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!

具体来说模拟类有以下5种常见写法:

第一种写法:具体介绍见以下代码注释。

  1. function Circle(r) {
  2. this.r = r;
  3. }
  4.  
  5. Circle.PI = 3.14159;/*Circle.PI属于全局变量 */
  6. Circle.prototype.area = function() {
  7. return Circle.PI * this.r * this.r;
  8. }/*Circle方法调用prototype属性从而能用this调用 Circle方法中的r属性*/
  9.  
  10. var c = new Circle(1.0);/* 实例化 Circle*/
  11. alert(c.area());

第二种写法:与Java类相似,推荐使用!

  1. var Circle = function() {
  2. var obj = new Object(); /*先实例化Object方法,使之能调用 obj.PI属性及obj.area方法*/
  3. obj.PI = 3.14159;
  4.  
  5. obj.area= function( r ) {
  6. return this.PI * r * r;
  7. }
  8. return obj;
  9. }
  10.  
  11. var c = new Circle();
  12. alert( c.area( 1.0 ) );

第三种写法:主要思想是自己先实例化出一个对象,在往这个对象里添加属性及方法

  1. var Circle = new Object();
  2. Circle.PI = 3.14159;
  3. Circle.Area = function( r ) {
  4. return this.PI * r * r;
  5. }
  6.  
  7. alert( Circle.Area( 1.0 ) );

第四种写法:该写法跳过new这一步骤,且电脑简单清晰明了,个人推荐这种写法!!

  1. var Circle={
  2. "PI":3.14159,
  3. "area":function(r){
  4. return this.PI * r * r;
  5. }
  6. };
  7. alert( Circle.area(1.0) );

第五种写法:此方法与前三种大同小异,不过听说这种写法很少人用,不建议推荐使用哦!!

  1. var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");
  2.  
  3. alert( (new Circle()).area(1.0) );

想必各位朋友都在想既然是模拟面向对象,那是不是得有封装继承,getset方法???答案是肯定的,那让我们来看看如下代码:

封装:在看看如下代码我们能清晰的了解到封装的使用,假若我们去掉 var name = "default"; 中的var,那么结果又是怎么样??答案是与先前一样的,由此可见无var定义的属性只是再其变量作用域中充当全局,只有属性在其作用域中是私有的,若要定义一个私有方法需要将其赋予一个变量充当属性。还有本例中new 可加可不加,若不加可往其后添加()。

  1. var person = function(){
  2. //变量作用域为函数内部,外部无法访问
  3. var name = "default";
  4.  
  5. return {
  6. getName : function(){
  7. return name;
  8. },
  9. setName : function(newName){
  10. name = newName;
  11. }
  12. }
  13. }();

alert(person.name);//直接访问,结果为undefined
alert(person.getName());
person.setName("abruzzi");
alert(person.getName());

  1.  

实现类和继承:该例的主要思想是定义一个变量,将一个方法赋予它,在根据prototype方法将需要继承的类放入其中即可达到继承的效果。。

  1. function Person(){
  2. var name = "default";
  3.  
  4. return {
  5. getName : function(){
  6. return name;
  7. },
  8. setName : function(newName){
  9. name = newName;
  10. }
  11. }
  12. }; /* 封装好的一个类Person */ var Jack = function(){};
  13. //继承自Person
  14. Jack.prototype = new Person();
  15. //添加私有方法
  16. Jack.prototype.Say = function(){
  17. alert("Hello,my name is Jack");
  18. };
  19. var j = new Jack();
  20. j.setName("Jack");
  21. j.Say();
  22. alert(j.getName());

注: 本贴代码纯属参考各路大神,切不可以转发哦!!!

JavaScript碎片———函数闭包(模拟面向对象)的更多相关文章

  1. JavaScript碎片—函数闭包(模拟面向对象)

    经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知, ...

  2. JavaScript的函数闭包详细解释

    闭包是指有权访问另一个函数作用域中的变量的函数 一.创建闭包的常见的方式: 就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量. //通过闭包可以返回局部变量 function b ...

  3. javascript匿名函数 闭包

    匿名函数 (function(){                console.info("111111111");            })(); var my = (fun ...

  4. 函数闭包模拟session

    根据上一个认证功能的问题 要解决的就是只需要登录一次 也就是登录一次之后的用户名跟密码可以保存下来让其他函数用-->全局变量 user_dic = {"user_name": ...

  5. 了解Javascript中函数作为对象的魅力

    前言 Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性.并且最重 ...

  6. 深入理解javascript原型和闭包(2)——函数和对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

  7. 简单介绍Javascript匿名函数和面向对象编程

    忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...

  8. 第一百一十节,JavaScript匿名函数和闭包

    JavaScript匿名函数和闭包 学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂 ...

  9. 深入理解javascript原型和闭包(2)——函数与对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

随机推荐

  1. MUI框架-04-切换页面头部文字重叠

    MUI框架-04-切换页面头部文字重叠 从现在开始就只分享 MUI 框架开发时遇到的问题了 开发不懂请查看:官方文档 问题情况 切换页面 title 文字重叠,覆盖 截图: 解决办法 给 h1 标签加 ...

  2. unity震动效果

    using System.Collections; using System.Collections.Generic; using UnityEngine; //思想:在短时间内在规定圆内随机震动对象 ...

  3. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.gaiay.business.helper.dao.LiveRegenrationRecordMapper.insert

    原因分析: 字段名称.报名.类名 对应不上 ,比如colomn和property属性 反了.. 按以下步骤一一执行: 1:检查xml文件所在的package名称是否和interface对应的packa ...

  4. 有关从经典部署模型迁移到 Azure Resource Manager 部署模型的常见问题

    此迁移计划是否影响 Azure 虚拟机上运行的任何现有服务或应用程序? 不可以. VM(经典)是公开上市的完全受支持的服务. 你可以继续使用这些资源来拓展你在 Azure 上的足迹. 如果我近期不打算 ...

  5. CMD命令行下编译.Net Visual Studio 项目

    有时候我们需要编译.net 的sln解决方案,可是VS打开的速度太慢,可以用命令行进行代替,详细过程如下: 1.开始菜单——>Visual Studio 2017(根据你电脑上安装的VS版本来) ...

  6. [EffectiveC++]item13:Use objects to manage resources(RAII)

    baidu百科 RAII 百科名片 RAII,也称为“资源获取就是初始化”,是c++等编程语言常用的管理资源.避免内存泄露的方法.它保证在任何情况下,使用对象时先构造对象,最后析构对象. 目录 RAI ...

  7. T-SQL批处理

    批处理简介 批处理是作为一个逻辑单元的T-SQL语句.如果一条语句不能通过语法分析,那么不会运行任何语句.如果一条语句在运行时失败,那么产生错误的语句之前的语句都已经运行了. 为了将一个脚本分为多个批 ...

  8. Aizu 2249 & cf 449B

    Aizu 2249 & cf 449B 1.Aizu - 2249 选的边肯定是最短路上的. 如果一个点有多个入度,取价值最小的. #include<bits/stdc++.h> ...

  9. struts2面试整理

    struts2的工作原理 客户端发送请求 经过一系列的过滤器 FilterDispatcher通过ActionMapper来决定这个REquest需要调用的Action FilterDispather ...

  10. Angular2.0知识架构图

    知识架构图: