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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
VUE实现密码验证与提示功能
Oct 18 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
详解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
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP时间类完整代码实例
2021/02/26 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python根据文件大小打log日志
2014/10/09 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
校园门卫岗位职责
2013/12/09 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
运动会广播稿100字
2014/09/14 职场文书
人事任命通知书
2015/04/21 职场文书
开业典礼致辞
2015/07/29 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL