自执行函数

Posted 2020-10-07 可恶の小郑

javascript中为何在匿名function函数后面还外加一个括号？

 (function(){...}()) 或 (function(){...})()

名词解释：“匿名函数自执行”

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

Demo：基本使用

(function(){
　　console.log("郑久胜!");
　　})();

或者：

(function(){
　　console.log("郑久胜!");
　　}());

如果要传参的话：

(function(a1,a2){
　　console.log("郑久胜!" +(a1+a2));  //郑久胜!3
　　}(1,2));

下面列出几段代码作为比较：

function Fn() {
    var a = 123;
    this.a = 456;
    (function () {
        alert(a); // 123 　　
        alert(this.a); // undefined 　　　
    })();
};
var f = new Fn();

function Fn() {
　　　 var a = 123;
　　　 this.a = 456;
　　　 (function(_this) {
　　　　　 alert(a); // 123
　　      alert(_this.a); // 456
　　　 })(this);
　　};
　　var f = new Fn();

以上两个对比，说明：

　　（1）匿名函数可以直接访问到外层署名函数（Fn）中的变量（使用关键字var定义的），但不能访问外层署名函数的属性（使用关键字this定义的）；

　　（2）匿名函数中的this指向的是匿名函数对象的地址，它与外层署名函数（Fn）对象的this指向的地址不同；

　　（3）匿名函数若要访问外层署名函数（Fn）中的属性，可以通过参数传递的方式实现。

function Fn() {
　　　 var a = 123;
　　　 this.a = 456;
　　　 (function(b) {
　　　　　 alert(a); // 123
　　      alert(b); // 456
　　　 })(this.a);
　　};
　　var f = new Fn();

(function() {
　　　 var a = 123;
　　　 this.a = 456;
　　　 (function() {
　　　　　 alert(a); // 123
　　      alert(this.a); // 456
　　　 })();
　　})();

以上两个对比，说明：

　　（1） 匿名函数既可以直接访问外层匿名函数中的变量，又直接可以访问外层匿名函数中的属性，而匿名函数却不可以直接访问外层已命名函数中的属性；

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