javascript中为何在匿名function函数后面还外加

2020-05-20 22:29:05

参考地址 javascript中为何在匿名function函数后面还外加

  对于很多初学者来说,遇到它们经常会产生一系列问号:这是编程吗,用它做什么,怎么我没在其他语言里见过呢?

    接下来我就详细地解释一下:

    它可以解释成为“匿名函数自调用”,也就是说,定义一个匿名函数,然后马上调用它(因为它是匿名的,如果不立即调用就获取不到该函数的引用了)。通常它被应用在一些大型的JS框架中(如上面所说的),因为这个匿名函数的函数体相当于提供一个匿名的名字空间,这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制,但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

    所以说,(function(){代码})()就等于执行了一个函数,只不过它是匿名的而已。如果在这个匿名函数内部想再次调用这个函数,就需要调用constructor属性了(这是Object中定义的,JS的继承机制如同Java一样保证了了所有对象都继承Object类)。

    明白了它是什么了,下面我们就要学习该怎样使用它了,以下这些问题是我们会经常遇到的,不如提前做好理论只是准备以备后期能顺利地实现开发。请看下面问题:

1、下列哪些正确?(B、C

A.function(){

       alert("Here!");

    }();

B.(function(){

       alert("Here!");

    })();

C.(function(){

       alert("Here!");

    }());

2、下列哪个结果是正确的?(A、B、C、D

A.(function(a1,a2){

       alert("Here!"+(a1+a2));

    })(1,2);

B.(function(a1,a2){

       alert("Here!" +(a1+a2));

    }(1,2));

C.void function(a1,a2){

       alert("Here!" +(a1+a2));

    }(1,2);

D.var f = function(a1,a2){

       alert("Here!" +(a1+a2));

    }(1,2)

    注:A 、B、C与D四种格式都正确,前两者属于同种情况的不同写法,后两种是将函数对象的返回值赋给其他变量,C是忽略函数返回值,而D正相反!

    具体举个例子:

function test(){

          return (function(p1,p2){

                            return p1+p2;

          })(1,2);

};

(function(){

          alert(test());

}());

    下面我们就深入研究一下这种匿名函数:

1、

function Foo() { 

    var a = 123; 

    this.a = 456; 

    (function() {

       alert(a); // 123

       alert(this.a); // undefined 

    })(); 

};

var f = new Foo();

② 

function Foo() { 

    var a = 123; 

    this.a = 456; 

    (function(_this) {

       alert(a); // 123

       alert(_this.a); // 456 

    })(this); 

};

var f = new Foo();

以上两个对比,说明:

(1)匿名函数可以直接访问到外层署名函数(Foo)中的变量(使用关键字var定义的),但不能访问外层署名函数的属性(使用关键字this定义的);

(2)匿名函数中的this指向的是匿名函数对象的地址,它与外层署名函数(Foo)对象的this指向的地址不同;

(3)匿名函数若要访问外层署名函数(Foo)中的属性,可以通过参数传递的方式实现。 

2、

① 

function Foo() { 

    var a = 123; 

    this.a = 456; 

    (function(b) {

       alert(a); // 123

       alert(b); // 456 

    })(this.a); 

};

var f = new Foo();

(function() { 

    var a = 123; 

    this.a = 456; 

    (function() {

       alert(a); // 123

       alert(this.a); // 456 

    })();

})();

以上两个对比,说明:

(1) 匿名函数既可以直接访问外层匿名函数中的变量,又直接可以访问外层匿名函数中的属性,而匿名函数却不可以直接访问外层已命名函数中的属性;

2)以上两种方式可以实现相同的功能。

3、

(function() { 

    var a = 123; 

    this.a = 456; 

    (function() { 

       alert(a); // 123 

       alert(this.a); // 456 

       this.b = 789; 

    })(); 

    (function() { 

       alert(this.b); // 789 

    })(); 

})();

(function() {

    alert(this.a); // 456

    alert(this.b); // 789 

})();

function Foo() { 

    var a = 123; 

    this.a = 456;

    (function() { 

       alert(a); // 123 

       alert(this.a); // undefined 

       this.b = 789; 

    })(); 

    (function() { 

       alert(this.b); // 789 

    })(); 

};

var f = new Foo(); 

(function() {

    alert(this.a); // undefined

    alert(this.b); // 789 

})();

以上两个对比,说明:

(1)匿名函数(即用两个小括号括起来的部分)位于一个执行上下文,不论这些代码放在哪个位置上。

4、

function Foo() {

(function() {

this.b = 789;

})();

(function() {

alert(this.b); // 789

alert(b); // 789

var a = 0;

alert(a); // 0

})();

}

var f = new Foo();

(function() {

alert(this.b); // 789

alert(b); // 789

})();

function Foo() {

(function() {

this.b = 789;

})();

(function() {

alert(this.b); // 789

alert(b); // undefined

var b = 0;

alert(b); // 0

})();

}

var f = new Foo();

(function() {

alert(this.b); // 789

alert(b); // 789

})();

以上两个对比,说明:

1)没有加 this取值时,如果当前 {} 中不存在同名的局部变量,则等同于加 this 处理;如果当前 {} 中存在同名的局部变量,则按常规处理。 

以上只是鄙人的粗浅见解,内容还不够完整,还会不断完善删改,如其中有什么错误之处还望读者谅解,真诚希望能留下您的宝贵建议,以图修改!这里欢迎每一位爱好JS的读者,真心希望能和你们交流心得!


  • 2020-04-02 17:02:25

    vue怎么能像jquery那样获得数据

    有时候我们需要获得动态的元素,但是我们没法直接用vue语法,vue一共了当前组件的对象,我们可以避免使用document.get...之类的。

  • 2020-04-02 21:38:15

    Nginx向ExpressJS转发真实IP地址

    由于服务器配置了Nginx的反向代理,在ExpressJS中无法获取到真实的IP地址。本文就介绍了如何配置Nginx以及ExpressJS使其可以显示用户的真实地址。

  • 2020-04-03 08:53:06

    使用自己的QQ邮箱发送自动发送邮件

    话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!!

  • 2020-04-03 10:20:20

    Vue 项目性能优化

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成:

  • 2020-04-03 13:07:46

    flex布局与position:absolute/fixed的冲突问题

    导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局。 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部。 拿到需求之后,思路就是先搞好布局,然后监听window.onscroll,当页面滚的距离大于封面图的时候,给ul加入position:fixed。

  • 2020-04-03 16:56:59

    Inkscape教程

    本教程演示了Inkscape基础使用。这是常规Inkscape文档,你可以预览、编辑、复制、保存。 本教程包括画布导航、管理文档、形状工具基础、选择技术、使用选择转换对象、分组、设置填充和画笔、对齐和Z顺序。有关更高级的主题请查看帮助菜单中的其它教程。