機能とクロージャの概要

1つ、機能

機能:n個のステートメントのカプセル化本体

  • 作成する
  1. function関数名(){}宣言された関数:
    宣言されると、グローバルに呼び出されます(書き込み位置は関係ありません)。
  2. var関数名= function(){}関数式:
    無名関数に名前がある場合、その名前は無効になります。
  3. **コンストラクターvar関数名=新しい関数(パラメーター、ステートメント)**一般的には使用されません
  • 属性
    -name関数の名前
    -lengthは、関数の仮パラメーターの数を返します

  • 正式なパラメータ、実際のパラメータ
    -形状パラメーターの数>引数の超過数は未定義のパラメーター値です
    -形状パラメーターの数<パラメーターの実数引数の追加引数
    -引数:すべての実際のパラメーターのコレクションは疑似配列であり、可変パラメーター関数を実装するためによく使用され
    ます。-arguments.calleeは、非厳密モードの関数への参照です。厳密モードは使用できません。

  • 引数としての単純型の値と引数としての参照型の違い:
    1.パラメーターとしての単純な型の値。関数の変更は渡される変数に影響しません
    。2。パラメーターとしての参照型の値、関数の変更は渡される変数に影響します-
    デフォルトのパラメーター短絡ステートメント

  • 戻り値
    -returnが書き込まれない場合、デフォルトはundefinedを返します

  • 関数スコープ
    -内部で外部関数またはウィンドウ変数を使用できます-
    関数の外部で関数内部変数を使用できません-
    関数をすぐに実行します(独立したスペースを作成します)関数式の即時実行3

  • 高度な機能:関数をパラメータまたは戻り値として受け取る関数

    • 閉鎖:別の関数のスコープ内の変数にアクセスできる関数
  • 関数宣言の昇格>変数宣言の昇格

1.不定関数の引数
 function add(){
    
    
            var count = 0;
            for(var i = 0; i < arguments.length; i ++){
    
    
                count += arguments[i];
            }
            return count;
        }

        var returnValue = add(1,2); // 3
2. ES6不定パラメーター(... args)既知のパラメーター以外のパラメーターのセット
    // 剩余参数必须写在末尾
  function add2(a,b, ...args){
    
    
    console.log(args);
}
add2(1,2,3,4,5); //    [3,4,5]
3.デフォルトパラメータ
  function mul(a, b){
    
    
            // 如果没有a, a = 2
            // 如果没有b, b = 3
            a = a || 2;
            b = b || 3;
            
            return a * b;
        }
        console.log(mul()); // 6
function mul1(a = 3, b = 2){
    
    
            console.log("默认参", a * b);
        }
        mul1(); // 6
        mul1(4); // 8
        mul1(undefined, 4); // 12
4.obj.assignマージされたオブジェクト
  function sayName(obj){
    
    
            obj = Object.assign({
    
    
                name: "xx"
            }, obj);
            console.log(obj.name);
        }
        sayName(); // "xx"
        sayName({
    
    }); // "xx"
        sayName({
    
     name: "李白"}); // "李白"
5.環境の範囲内:最初に関数宣言がプロモートされ、次にプロモートする変数宣言の番です。
 var a = 10;
        function fn(){
    
    
            
            console.log(a); // undefined
            return; 
            a += 30;
            var a = 20;
            console.log(a); 
        }

        fn();
        console.log(a); // 10
6.すぐに機能を実行します
// 1. 函数表达式的立即执行
var fn = function (){
    
    
	console.log("函数表达式的立即执行");
}();
// 2. 声明函数的立即执行
(function fn(){
    
    
	console.log("立即执行");
}())
(function fn(){
    
    
	console.log("立即执行");
})()
// 3. 函数表达式使用两个括号时
var fn = (function(){
    
    
	console.log("函数表达式的立即执行");
}())
var fn = (function(){
    
    
	console.log("函数表达式的立即执行");
})()
7.閉鎖の質問

クロージャの本質は次のとおりです。それは、別の関数のスコープ内の変数にアクセスできる関数を指します。

 function fun(n, o) {
    
    
            console.log(o);
            return {
    
    
                fun: function (m) {
    
    
                    return fun(m, n);
                }
            };
        }
第一道:
        // var a = fun(0); // undefined
        // a.fun(1); // 0     
        // a.fun(2); // 0
        // a.fun(3); // 0
第二道:链式操作

        // var b = fun(0).fun(1).fun(2).fun(3); // undefined 0 1 2
第三道:
        var c = fun(0).fun(1); // undefined 0
        c.fun(2); // 1
        c.fun(3); // 1
  • 効果:

    • ローカル変数のライフサイクルを延長する
    • 内部ローカル変数の外部の関数を操作できるようにします
  • クロージャのスコープチェーンには、独自のスコープと、それを含む関数のスコープとグローバルスコープが含まれています。

  • 閉鎖申請:

    • 折り返し電話
    • モジュラーコーディング:一部のデータと関数をカプセル化してデータを操作し、一部の動作を公開します
    • トラバーサル用のイベントリスナーを追加します
  • 短所:

    • 変数がメモリを占有するのに時間がかかりすぎる場合があります

    • メモリリークを引き起こす可能性があります

    • 解決策:時間内にリリース:f = null; //内部関数オブジェクトをガベージオブジェクトにする

  • 閉鎖の質問2

 // 闭包题1:编写一个像 sum(a)(b) = a+b 这样工作的 sum 函数。
        function sum(a, b) {
    
    
            return function (b) {
    
    
                console.log(a + b);
            }
        }
        sum(3)(-4);
  • 閉鎖問題3
    //クロージャーの質問2:並べ替えを簡略化してフィールドで並べ替える
        // 有一组需要排序的对象
        let users = [
            {
    
     name: "John", age: 20, surname: "Johnson" },
            {
    
     name: "Pete", age: 18, surname: "Peterson" },
            {
    
     name: "Ann", age: 19, surname: "Hathaway" }
        ];

        // 通常的做法:

        // 通过 name (Ann, John, Pete)
        users.sort(function (a, b) {
    
     return a.name > b.name ? 1 : -1 });
        console.log(users);
        // 通过 age (Pete, Ann, John)
        // users.sort(function (a, b) {
    
     return a.age > b.age ? 1 : -1 });
        // console.log(users.sort());

        // 要求简化为: 根据key升序排列
        function byField(key) {
    
    
            return function (a, b) {
    
    
                return a[key] > b[key] ? 1 : -1;
            }
        }
        users.sort(byField('name'));
        console.log(users);

        users.sort(byField('age'));
        console.log(users);
// 排序后修改对象数组地址,以前打印的同一堆地址的对象数组,所以结果都一致。

おすすめ

転載: blog.csdn.net/weixin_47067248/article/details/107966491