jQuery はどのように自己呼び出し匿名関数を呼び出すのでしょうか?

この記事では、jQuery の自己呼び出し匿名関数がどのように呼び出されるかを紹介します。困っている友人は参考にしていただければ幸いです。

jQuery ソース コードを開くと、まず次のコード構造が表示されます。

(function(window,undefined ){
})();

これは自己呼び出しの匿名関数です。何のこと？最初の括弧内で匿名関数を作成し、2 番目の括弧内でそれをすぐに実行します

なぜこのような「自己呼び出し匿名関数」を作成するのでしょうか?
匿名関数を定義すると、「プライベート」名前空間が作成され、この名前空間の変数とメソッドはグローバル名前空間を破壊しません。これは非常に便利であり、jQuery は何千もの JavaScript プログラムで使用されており、jQuery をインポートするプログラムで使用される変数と競合しないようにする必要があります。
次に、自己呼び出し匿名関数にどのような関数が実装されているかをコード順に見てみましょう:

(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画 FX
// 坐标和大小
window.jQuery = window.$ = jQuery;
})(window);

匿名関数は、文法的には関数リテラルと呼ばれます。実際、自己呼び出し関数は括弧で囲む必要があります。匿名関数 記述方法は 2 つあります:

(function() {
console.info( this );
console.info( arguments );
}( window ) );

(function() {
console.info( this );
console.info( arguments );
})( window );

なぜウィンドウで渡す必要があるのですか?

ウィンドウ変数を渡すことにより、jQuery コード ブロックでウィンドウにアクセスするときに、ウィンドウがグローバル変数からローカル変数に変更され、スコープ チェーンを最上位スコープに戻す必要がなくなります。重要なのは、ウィンドウをパラメータとして渡すことで、コードを圧縮するときに最適化できることです。 (function(a, b){})(window) ; // window は
になるように最適化されています。 上記の導入を通じて、() が関数式を即座に実行できることを大まかに理解しました。

匿名関数は「コンテナ」の役割を果たします。「コンテナ」の内部は外部変数にアクセスできますが、外部環境は「コンテナ」内の変数にアクセスできません。 ) 内部で定義された変数は、一般に「匿名ラッパー」または「名前空間」として知られる外部変数と競合しません。

(function () {
// ... 所有的变量和function都在这里声明，并且作用域也只能在这个匿名闭包里
// ...但是这里的代码依然可以访问外部全局的对象
}());

以下と同じ

(function () {/
内部コード/})();

平たく言えば、() は評価に使用されるため、この () はいつでも空になることはできません。計算する必要があります。関数の解析では、() ではなく、{} のみが解析されます。

() に式を入れると式の値が返されます;

() に関数を入れると関数自体が返されます (function(){}());
() が関数の後に続く場合、それは呼び出しを意味します。関数、つまり関数の評価: (function(){})();

(function() {
//自执行函数中的内部变量，外部是无法访问的
var name = 'kevin';
})( window );

name //未定義、name の値を取得できません

実行プロセス中、コードは最初に [has宣言されている] 関数];

関数式は、実行時にのみ解析できます。パラメータとして渡されます。即時実行機能自体は匿名関数です。JSコード実行の順序：var var test = ’s関数式var test = function（）{}

// function（function（function）を使用してvarテストを使用します（）function () {}) ();

モジュール化されたアプリケーションでクロージャを使用して関数を即時実行するには、次の点を理解する必要があります。

1. 関数本体の後に括弧を追加して、それをすぐに呼び出す場合、関数は関数宣言ではなく関数式である必要があります。
2. 即時実行関数はプライベート スコープと見なすことができ、外部変数はスコープ内でアクセスできますが、外部環境はスコープ内の変数にアクセスできません。したがって、すぐに実行される関数は閉じられたスコープであり、外部スコープと競合しません。
JQuery はこのメソッドを使用します。JQuery コードを (function (window, unknown){...jquery code...} (window) で囲みます。JQuery コードがグローバル スコープで呼び出される場合、内部変数を保護できます。

3. モジュール モードは、自己実行関数の高度なモードです。

モジュール モードは、次のような匿名関数を作成します。式
b. 公開したいものを含む変数を返す
c. 返された変数は window

(function () {
var i = 0;
return {
    get: function () {
        return i;
    },
    set: function (val) {
        i = val;
    },
    increment: function () {
        return ++i;
    }
};
} (window));

    // window作为一个带有多个属性的全局对象，上面的代码对于属性的体现其实是方法，它可以这样调用：
    window.get(); // 0
    window.set(3);
    window.increment(); // 4
    window.increment(); // 5

    window.i; // undefined 因为i不是返回对象的属性
    i; // 引用错误: i 没有定义（因为i只存在于闭包）

/

に割り当てられます。上記は自己呼び出し匿名関数の分析です。これは関数の呼び出し方法です

*// 以下は、グローバル変数の呼び出し、つまり匿名クロージャ関数の呼び出しについてです
*/再びモジュール モードから抜け出します モジュール モード、つまり匿名クロージャの作成と呼び出し:

   a.创建一个立即调用的匿名函数表达式
   b.return一个变量，其中这个变量里包含你要暴露的东西
      c.返回的这个变量将赋值给window

window（或者是任意一个全局对象）作为一个带有多个属性的全局对象，也可以把window当成一个参数,以对象的方式，在其它函数中实现调用。用下面的例子说明：

(function ($, YAHOO) {
// 这里，我们的代码就可以使用全局的jQuery对象了，YAHOO也是一样
$.aa = function(){
    //code
}
} (jQuery, YAHOO));
//调用 jQuery.aa();

下面是一个标准的Module模式，通过匿名函数的返回值来返回这个全局变量：

var blogModule = (function () {
var my = {}, privateName = "博客园";

function privateAddTopic(data) {
    // 这里是内部处理代码
}

my.Name = privateName;
my.AddTopic = function (data) {
    privateAddTopic(data);
};

return my;
} ());
//调用 blogModule.my();

在一些大型项目里，将一个功能分离成多个文件是非常重要的，因为可以多人合作易于开发。再回头看看上面的全局参数导入例子，我们能否把blogModule自身传进去呢？答案是肯定的，我们先将blogModule传进去，添加一个函数属性，然后再返回就达到了我们所说的目的：

var blogModule = (function (my) {
my.AddPhoto = function () {
    //添加内部代码  
};
return my;
} (blogModule || {}));

或

(function (my){
my.AddPhoto = function () {
    //添加内部代码  
};
return my;
})(blogModule || {}));
//调用 blogModule.AddPhoto();

那么，多个自执行函数间是怎么调用的呢？

(function(owner) {
//第一个匿名闭包
owner.debug = true;
//Ajax相关参数配置
owner.ajax = {
    timeout: 10000,
    type: 'post',
    dataType: 'json',
};
})(window.C = {}));

如果第二个函数想调用 全局变量为C中的 对象呢？要怎么写？

(function($, owner) {
//这里调用上面全局变量为C 中的对象呢
if(!C.debug) return false;
var url = 'aaa.html';
mui.ajax({
    url: url,
    dataType: C.ajax.dataType,
    type: C.ajax.type,
});
})(mui, window.app = {});

再举个例子，同样的，不同自执行闭包函数间的调用方法：

(function($, owner) {
//获取语言闭包
owner.getLanguage = function() {
    var language = localStorage.getItem(C.state.field.language);
    if(typeof language == "undefined" || language === null || language == '') {
        var currentLang = navigator.language;
        if(!currentLang)
            currentLang = navigator.browserLanguage;
        language = currentLang.toLowerCase();
        language = language.replace(/-/g, '_');

        if(language != 'en_us' && language != 'zh_cn')
            language = 'en_us';

        localStorage.setItem(C.state.field.language, language);
    }

    //在上面的解析中有说过，Module模式，return 一个变量，这个变量就是要爆露的东西。通过这个函数的全局变量，这个  language  可以在任何地方调用   
    //return一个变量，其中这个变量里包含你要暴露的东西 
    //全局调用  storage.language                                  
    return language;
};
})(mui, window.storage = {}));

(function($, owner) {
owner.language = {};
owner.preload = function(settings){
    var defaults = {
        name: 'i18n',
        language: '',
        path: '/',
        cache: true,
        encoding: 'UTF-8',
        autoReplace: true,
        success: null,
        error: null,
    };
    
    settings = $.extend(defaults, settings);
    if(settings.language === null || settings.language == '') {
        //全局调用  storage.language                                                                            
        settings.language = storage.getLanguage();
    }
}   
})(mui, window.i18n = {});

所以 匿名闭包的调用规则是这样的，立即执行(最后一个括号) (window)，如果把window作为一个参数进行传递，那么就把它以对象的方式，在其它函数中实现全局调用。

相关推荐：

js实现模态窗口增加与删除案例分享（纯代码）

js对象类型怎么判断？详解js里的基本类型转换

以上がjQuery はどのように自己呼び出し匿名関数を呼び出すのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。