闭包的应用

创建私有变量:

变量 privateVariable 只能通过特权方法 publicMethod()来访问。在创建 MyObject 的实例后,除了使用 publicMethod()这一个途径外,没有任何办法可以直接访问 privateVariable 。

function MyObject(){
		//私有变量
		var privateVariable = 10;
	//特权方法
	    this.publicMethod = function (){
	     privateVariable++;
	     return privateVariable;
	     };
	}
	var obj1 = new MyObject();
	var obj2= new MyObject();

静态私有变量:

(function(){
//私有变量
	var privateVariable = 10;
	//构造函数
	MyObject = function(){
	};
	//公有/特权方法
	MyObject.prototype.publicMethod = function(){
	privateVariable++;
	return privateVariable;
	};
})();
var obj1 = new MyObject();
var obj2 = new MyObject();	

2.实现累加器

3.模块化开发,防止污染全局变量

 

### 闭包的实际应用案例 #### 定时器和延迟执行 在 JavaScript 中,定时器经常利用闭包来保存状态。例如,在 `setTimeout` 或 `setInterval` 的回调函数中访问外部作用域的变量是一种典型的闭包应用场景[^3]。 ```javascript function setupTimer() { let count = 0; setTimeout(function timer() { console.log(count++); // 访问并修改外部变量count if (count < 5) { setTimeout(timer, 1000); } }, 1000); } setupTimer(); ``` 上述代码展示了如何通过闭包让计数器持续运行一段时间,并且能够记住上一次的状态[^4]。 #### 防抖与节流(Debouncing & Throttling) 防抖和节流是前端性能优化的重要技术之一,它们通常依赖于闭包实现内部状态管理。以下是一个简单的防抖函数示例: ```javascript function debounce(func, delay) { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(this, args), delay); }; } const handleResize = debounce(() => console.log('Window resized'), 300); window.addEventListener('resize', handleResize); ``` 这里,`timeoutId` 被封闭在返回的新函数中,从而实现了对外部不可见的状态控制。 #### 模块模式(Module Pattern) 模块模式允许创建具有私有成员的对象结构,这正是借助闭包完成的。下面的例子展示了一个简单模块的设计方式: ```javascript const CounterModule = (() => { let privateCount = 0; return { increment: () => ++privateCount, getCount: () => privateCount }; })(); console.log(CounterModule.getCount()); // 输出:0 CounterModule.increment(); console.log(CounterModule.getCount()); // 输出:1 ``` 此模式下,`privateCount` 不会被直接暴露给全局命名空间,仅能通过公开的方法间接操作它。 #### Vue.js 中的闭包运用 Vue 组件内的许多地方都涉及到了闭包的概念,比如计算属性、生命周期钩子以及事件处理器等。考虑如下情形: ```javascript export default { data() { return { message: 'Hello' }; }, computed: { reversedMessage() { const original = this.message; // 使用data中的message值 return original.split('').reverse().join(''); } } }; ``` 这里的 `reversedMessage` 是基于组件实例的数据动态生成的结果,而这种绑定关系本质上也是由闭包机制支持的。 #### 方法链设计 当构建复杂的 API 接口或者工具库时,可以通过闭包维持上下文对象的一致性以便支持流畅接口风格。看这样一个例子: ```javascript class QueryBuilder { constructor(query = '') { this.query = query; } select(field) { this.query += ` SELECT ${field};`; return this; } where(condition) { this.query += ` WHERE ${condition};`; return this; } build() { return this.query.trim(); } } const qb = new QueryBuilder(); const sqlQuery = qb.select('*').where('id > 10').build(); console.log(sqlQuery); // 输出完整的SQL语句字符串 ``` 每个方法调用之后仍然保留着当前查询构造器的状态直到最终组装完毕为止。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值