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


Posted in Javascript onMarch 13, 2019

经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 #Javascript
详解jQuery-each()方法
Mar 13 #jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 #Javascript
react同构实践之实现自己的同构模板
Mar 13 #Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 #Javascript
你可能不知道的CORS跨域资源共享
Mar 13 #Javascript
react项目如何使用iconfont的方法步骤
Mar 13 #Javascript
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php实现的用户查询类实例
2015/06/18 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
javascript的push使用指南
2014/12/05 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Python中文字符串截取问题
2015/06/15 Python
详解Python文本操作相关模块
2017/06/22 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
全运会口号
2014/06/20 职场文书
个人委托函范文
2015/01/29 职场文书
通知范文怎么写
2015/04/16 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python