利用javaScript闭包做到函数的私有性和公开性
2016-02-28 17:21
671 查看
关于javaScript的闭包我在另一篇博客中实现javaScript对象的”继承”的两种方法(prototype与闭包) 中提到过。
闭包也就是说在函数内部定义的函数,在外部使用的现象。可以使用闭包来完成对象的继承,可以做到函数的私有性和公开性。
需求: 定义一个类,该类有age和name属性。生成实例可以对该类的这两个属性初始化之后可以获取其值,但不允许修改。
这样就利用闭包做到函数的私有性和公开性。
为了更加美观,增加阅读性,重构上面代码:
如上写js的方式就是把所以的内容写在一个大大的json中,数据就对应key为data,操作看对于key为opt。这样写个人感觉比较直观一点。
说到这里了就再简单说一下jQuery的源码,其实整个jQuery其实就是一个自调函数:
闭包也就是说在函数内部定义的函数,在外部使用的现象。可以使用闭包来完成对象的继承,可以做到函数的私有性和公开性。
js中的自调函数:
(function(形参){}) (实参);(function(name){ alert("my name is"+name); })("hello world");
需求: 定义一个类,该类有age和name属性。生成实例可以对该类的这两个属性初始化之后可以获取其值,但不允许修改。
(function(){ /** *专门存放两个属性的json **/ var data = { name:"", age:"" }; /** *私有的方法 **/ function setName(name){ data.name= name; } function setAge(age){ data.age = age; } /** *公开的方法 */ function getName(){ return data.name; } function getAge(){ return data.age; } function init(name,age){ setName(name); setAge(age); } //将要公开的API封装起来 function Person(){ return { init:init, getName:getName, getAge:getAge }; } //将方法Person赋值给window。这样在外部就能访问了 window.Person = Person; })(); var p = Window.Person(); p.init("wx","20"); alert(p.getName()); alert(p.getAge());
这样就利用闭包做到函数的私有性和公开性。
为了更加美观,增加阅读性,重构上面代码:
(function(){ /** *Person模块 **/ var Person = { //数据部分 data:{ name:"", age:""}, //操作部分 opt:{ setName:function(name){ Person.data.name=name; }, setAge:function(age){ Person.data.age=age; }, getName:function(){ return Person.data.name; }, getAge:function(){ return Person.data.age; }, init:function(name,age){ Person.opt.setName(name); Person.opt.setAge(age); } }, /** *公开的API **/ openAPI:function(){ return { init:Person.opt.init, getName:Person.opt.getName, getAge:Person.opt.getAge }; } }; window.Person = Person; })() var p = window.Person.openAPI(); p.init("wx","20"); alert(p.getName()); alert(p.getAge());
如上写js的方式就是把所以的内容写在一个大大的json中,数据就对应key为data,操作看对于key为opt。这样写个人感觉比较直观一点。
说到这里了就再简单说一下jQuery的源码,其实整个jQuery其实就是一个自调函数:
(function(window){ //jQuery是一个函数,一个对象,一个构造器函数 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, //定义了jQuery的prototype的内容 //fn=prototype //加在jQuery的prototype上的方法可以通过选择器创建出来的对象调用 jQuery.fn = jQuery.prototype = { 对象方法 ready:function(){ }, each:function(){ } }, //post方法和extend方法直接加在了jQuery对象上 全局方法 jQuery.post = function(){ }, jQuery.extend = function(){ } //程序员在用jQuery的时候,是window的一个属性 //jQuery=$ window.jQuery = window.$ = jQuery; $.fn=jQuery.prototype=window.$.prototype=window.$.fn=window.jQuery.fn=window.jQuery.prototype 加在jQuery的prototype上的方法和加在jQuery对象上的方法称为jQuery的插件开发 })(window); window.jQuery.fn=$.prototype=window.$.fn=jQuery.prototype=window.jQuery.prototype
相关文章推荐
- Particles.js基于Canvas画布创建粒子原子颗粒效果
- javascript笔记——jikeytang javascript前端群 389875212 精华总结
- javascript高级程序设计笔记-第四章(变量、作用域)
- EL表达式语言,JSTL,文件的上传与下载
- JavaScript变量引用问题
- 实现javaScript对象的"继承"的两种方法(prototype与闭包)
- javascript 拷贝文本
- 深入理解Javascript函数编程
- Jsp中两种请求方式的区别
- [LeetCode][JavaScript]Count Primes
- eval在JS中的作用
- js setInterval和clearInterval 的使用
- JS闭包小结
- Jsonp 复习笔记
- JavaScript--map、reduce、filter、sort
- js中的各种宽高
- 解析JSON数据的详细步骤以及偷懒技巧(使用第三方库GSON以及GsonFormat工具)
- netctoss01_项目概述及规范【Servlet+JSP版】
- html、css、js的命名规范
- js继承学习