你不知道的js (3)匿名函数

匿名函数:没有名字的函数。

使用场景:
1,事件

var ele = document.querySelector("div");
ele.onClick = function(){ console.log(1) }

2,对象的属性

var obj = {
	getName:function(){
		console.log(1)
	}
}

3,回调函数(函数作为参数)

var arr = [1,3,4];
arr.map( (item)=>{
	console.log(item)
} )

4,自执行函数(IIFE)
1,(function(){ … }())
2,(function(){})()
3,!function(){console.log(‘lala’)} // 也可以换成其他的运算符如:-,+

“隐藏”变量和函数都是从最小特权原则中引申出来 的,也叫最小授权或最小暴露原则。
这个原则是指在软件设计中,应该最小限度地暴露必要内容,而将其他内容都“隐藏”起来

规避冲突
“隐藏”作用域中的变量和函数所带来的另一个好处,是可以避免同名标识符之间的冲突, 两个标识符可能具有相同的名字但用途却不一样,无意间可能造成命名冲突。冲突会导致 变量的值被意外覆盖。

  1. 全局命名空间
    对象 被用作库的命名空间,所有需要暴露给外界的功能都会成为这个对象(命名空间)的属 性
  2. 模块管理
    通过依赖管理器 的机制将库的标识符显式地导入到另外一个特定的作用域中。
    (function fn) 函数会被当做一个函数表达式,而不是一个标准的函数声明来处理

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。
(function foo(){ … })作为函数表达式意味着foo只能在…所代表的位置中 被访问

匿名函数的缺点:
1,在栈追踪中不会显示出有意义的函数名,使得调试很困难
2,函数需要引用自身时只能使用 arguments.callee 引用如递归,另外一个函数需要引用自身的例子是在事件触发后事件监听器需要解绑自身
省略了对于代码可读性(可理解性)很重要的函数名,一个描述性的名称很重要

IIFE,代表立即执行函数表达式
(function(){ … }())
(function(){})()

var a = 2;
(function IIFE( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
})( window );
console.log( a ); // 2

这个模式的另外一个应用场景是解决 undefined 标识符的默认值被错误覆盖导致的异常(虽 然不常见)。
保证在代码块中 undefined 标识符的值真的是 undefined:


undefined = true; // 给其他代码挖了一个大坑!绝对不要这样做!
(function IIFE( undefined ) {
var a;
if (a === undefined) {
console.log( “Undefined is safe here!” );
}
})();
IIFE 还有一种变化的用途是倒置代码的运行顺序,将需要运行的函数放在第二位,在 IIFE 执行之后当作参数传递进去。
var a =2;
(function IIFE( def ) { def( window );
})(function def( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
});

window 传入当作 global 参数的值。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值