您的位置:首页 > Web前端 > JavaScript

利用javaScript闭包做到函数的私有性和公开性

2016-02-28 17:21 671 查看
关于javaScript的闭包我在另一篇博客中实现javaScript对象的”继承”的两种方法(prototype与闭包) 中提到过。

闭包也就是说在函数内部定义的函数,在外部使用的现象。可以使用闭包来完成对象的继承,可以做到函数的私有性和公开性。

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: