匿名函数是没有函数名的,不能单独使用;
立即执行函数是基于匿名函数实现的,也没有函数名,会在定义后立即执行;
闭包是有权访问另一个函数作用域中的变量的函数。匿名函数、立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件,就成了闭包。
匿名函数:没有函数名的函数
匿名函数不能单独定义与使用
function foo() {
console.log('普通函数');
}
// 去掉函数名 foo
function () { // SyntaxError: Function statements require a function name
console.log('匿名函数');
}
用于函数表达式
var sum = function (num1, num2) {
return num1 + num2;
};
console.log(sum(2, 3));
作为返回值
function sum(sum1, sum2) {
return function() {
return sum1 + sum2;
}
}
console.log(sum(2, 3)); // [Function]
console.log(sum(2, 3)()); // 5
用于定义对象方法
var obj = {
name: 'uakora',
age: 27,
foo: function() {
console.log(this.name + ' ' + this.age);
}
};
obj.foo(); // uakora 27
作为回调函数
setTimeout(function() {
console.log('匿名函数作为回调函数');
}, 1000);
用于立即执行函数
(function() {
console.log('立即执行函数是基于匿名函数创建的');
}());
用于DOM元素注册事件
<input type="button" value="Click me!" id="btn">
<script>
var btn = document.querySelector("#btn");
//给按钮注册点击事件
sub.onclick = function(){
console.log('Click event');
}
</script>
立即执行函数(IIFE,Immediately-Invoked Function Expression),是一种在定义后就会立即执行的函数,其实质是一种语法。
两种常用形式
常用形式一:将匿名函数包裹在一个括号运算符中,后面再跟一个括号
(function () {
console.log('立即执行函数');
})(); // !!!特别说明:若此立即执行函数后面立马又跟着一个立即执行函数,一定要在结尾加分号,否则后面的立即执行函数会报错!
// 上一个立即执行函数不加分号,下行代码将报错:TypeError: (intermediate value)(...) is not a function
(function (a, b, c) { // 形参
console.log(a + b + c); // 6
})(1, 2, 3); // 实参
常用形式二:匿名函数后面跟一个括号,再将整个包裹在一个括号运算符中
(function () {
console.log('立即执行函数');
}());
(function (a, b, c) { // 形参
console.log(a + b + c); // 6
}(1, 2, 3)); // 实参
其他形式
可以用 !、+、-、~ 运算符代替常用形式一中的第一个括号
!function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
+function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
-function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
~function (a, b, c) {
console.log(a + b + c); // 6
}(1, 2, 3);
立即执行函数最本质的作用是:创建一个独立的作用域。利用这一功能,可以
案例分析
var liList = document.getElementsByTagName('li');
for(var i = 0; i < liList.length; i++) {
liList[i].onclick = function() {
alert(i); // 结果:alert 出来的总是 6, 而不是0、1、2、3、4、5
}
}
期望结果:0、1、2、3、4、5
实际结果:alert 出来的总是 6
原因分析:没有形成独立作用域,每次点击执行函数都是去访问同一个 i 值(且是循环结束后的值 6)
解决方案:使用立即执行函数为每个 li 元素的点击事件函数创建独立作用域
var liList = document.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {
(function (i) {
liList[i].onclick = function () {
alert(i); // 0、1、2、3、4、5
}
})(i);
}
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。闭包可以有函数名,也可以是匿名函数(没有函数名);
闭包形式一:直接以匿名函数的形式作为外部函数的返回值(普遍用法)
function outer() {
var n = 1;
return function() {
n++; // 访问 outer 函数作用域中的变量 n,形成闭包
console.log(n);
}
}
outer()();
闭包形式二:在外部函数内定义一个内部函数,并返回内部函数名
function outer() {
var n = 1;
function inner() {
n++; // 访问 outer 函数作用域中的变量 n,形成闭包
console.log(n);
}
return inner;
}
outer()();
闭包形式三:在外部函数内定义一个立即执行函数
function outer() {
var n = 1;
(function() {
n++; // 访问 outer 函数作用域中的变量 n,形成闭包
console.log(n);
})();
}
outer();
作用一:可以直接访问函数作用域中的变量
作用二:可以将函数作用域中的变量如全局变量一样始终保存在内存中 (其实能否一直保存局部变量,跟闭包的执行形式有关)
说明:作用二的解析为个人理解
以下示例为证明观点:闭包能否一直保存局部变量,跟闭包的执行形式有关
闭包执行方式一:在返回的闭包后面紧跟一个 () ,立即执行
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
outer()(); // 2
outer()(); // 2
闭包执行方式二:将返回的闭包赋值给一个全局变量,全局变量运行 () 操作,执行闭包
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
var inner = outer();
inner(); // 2
inner(); // 3 (是在 2 的基础上加 1)
以上两种执行方式单独使用,只能说明 第二种执行方式,能使闭包一直保存局部变量,但还不能证明闭包的第一种执行方式不能一直保存局部变量,因为每次执行 outer()函数时,变量 n 都被重新初始化了。
请继续看以下代码,同时使用了闭包的两种执行方式:
function outer() {
var n = 1;
function inner() {
n++;
console.log(n);
}
return inner;
}
var inner = outer();
outer()(); // 2
outer()(); // 2 (Flag1)
inner(); // 2 (Flag2)
inner(); // 3
可以看到,Flag1 跟 Flag2 的值都是 2,假设 outer()() 这样的闭包执行方式会一直保存局部变量在内存的话,那 Flag2 处的值应该是 3。
显然假设不成立。
从而说明:闭包并非就一定可以一直保存局部变量在内存,还跟执行方式有关。
function outer() {
var n = 1;
function inner() {
n++;
console.log('n = ', n);
}
return inner;
}
var inner = outer();
inner(); // 2
inner(); // 3
inner = null; // 解除对闭包的引用,以便释放内存
由于闭包会携带 包含它的函数 的作用域,因此会比其他函数占用跟多的内存。过度使用闭包可能会导致内存占用过多
js和其他编程语言相对比较随意,首先来理解下函数基本概念:函数声明、函数表达式、匿名函数。函数声明和函数表达式区别有哪些?
无论你在什么时候读代码,您都必须注意到匿名函数。有时它们被称为 lambda,有时是匿名函数,不管怎样,我认为他们是不好使用的。匿名函数是一种在运行时动态声明的函数。它们之所以被称为匿名函数是因为不同于普通函数,它们并没有函数名 。
突然,看到附件选择的方法,人家是设置的this.fileUrl成功的。比对下,什么区别。这就是JS中匿名方法的this指向问题,function的声明方式,this指向的是本身,父级的变量都无法访问。
我们知道,在创建一个函数时如果要用到变量来存取信息的话,要尽量使用局部变量。因为一方面局部变量会随着函数的执行结束被销毁;另一方面在不执行函数的时候也不会创建这个局部变量,对节省空间资源有很大的好处。
在前端面试中面试官基本都会问到什么是匿名函数、什么是闭包函数。匿名函数顾名思义就是没有名字的函数,通常我们所写的函数都是这样的:
匿名函数没有自己的this,因此,在构造对象中调用全局函数时,可以省去保存临时this,再将其传入全局函数这一步:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!