TIL 55 day第4章コールバック関数

4734 ワード
コアJavaScript テキストリンク
Callback Function
  • 他のコードパラメータに渡される関数
  • 制御権に関連
    コールバック関数とは
    制御権をパラメータとして他のコード(関数またはメソッド)の関数に渡します.
    • var count = 0;
var cbFunc = function(){
  console.log(count);
  if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);

// 결과 (0.3초마다)
0
1
2
3
4
    cbFunc(); => 呼び出し主体:ユーザー、制御権:ユーザー
    setInterval(cbFunc, 300); => 呼び出しボディ:setInterval、制御権:setInterval
  • コールバック関数の制御権を受けるコードは、コールバック関数の呼び出し時点に対する制御権を有する.
    • this
    Array.prototype.map = function(callback, thisArg) {
  var mappedArr = [];
  for(var i = 0; i <this.length; i++) {
    var mappedValue = callback.call(thisArg || window, this[i], i, this);
    mappedArr[i] = mappedValue;
  }
  return mappedArr;
}
  • call/applyメソッド=>thisArg値がある場合は、その値、またはグローバルオブジェクト
    • を指定します.
    コールバック関数は関数です
  • コールバック関数は、メソッドではなく
    • を呼び出す.
    var obj = {
  vals : [1,2,3],
  logValues: function(v, i) {
    console.log(this,v,i);
  }
};
obj.logValues(1,2);
[4, 5, 6].forEach(obj.logValues);

// 결과
{vals: Array(3), logValues: ƒ} 1 2
Window {...} 4 0
Window {...} 5 1
Window {...} 6 2
  • コールバック関数の位置にメソッドが追加されましたが、通常の関数として呼び出され、グローバルオブジェクトを観察しています.
    • コールバック関数でこのアイテムをバインド
    変数に割り当てる方法
  • 従来の方法では、
    • を使用して変数に割り当てる.
  • オブジェクトにおける関数の回収方法
    • var obj1 = {
        name: 'obj1',
        func: function () {
            var self = this;
            return function() {
                console.log(self.name);
            };
        }
};
    
var callback = obj1.func();
setTimeout(callback, 1000); // obj1

var obj2 = {
        name: 'obj2',
        func: obj1.func
};
var callback2 = obj2.func();
setTimeout(callback2, 1500); // obj2

var obj3 = { name: 'obj3'};
var callback3 = obj1.func.call(obj3);
setTimeout(callback3, 2000); //obj3
    =>funcの再使用方法は、変数を割り当てることによって使用されます.
    変数を割り当て、変数を指定します.
    bindメソッドの使い方
    var obj1 = {
    name: 'obj1',
    func: function () {
        console.log(this.name);
    }
};
    
setTimeout(obj1.func.bind(obj1), 1000); // obj1

var obj2 = {name: 'obj2'};
setTimeout(obj1.func.bind(obj2), 1500); // obj2
  • bindメソッドを使用して
    • を直接指定
    コールバック地獄と非同期制御
  • コールバック地獄(callback hell):コールバック関数を匿名関数に渡すプロセスを繰り返し、コードのインデント深さに耐えられない
  • 非同期:同期の反意語、非同期コードは、現在実行中のコードが完了しているかどうかにかかわらず、以下のコードを実行します.
  • 同期:同期コードは現在実行中のコードが完了した後に以下のコードを実行し、ほとんどの即時処理可能なコードは同期の
    • である.
  • 要求、実行待ち、保留等に関するコードは非同期
    • である.
    1)非同期タスクの同期表示Promise
    var addCoffee = function(name) {
  return function(prevName) {
    return new Promise(function(resolve) {
      setTimeout(function() {
        var newName = prevName ? (prevName + ', ' + name) : name;
        console.log(newName);
        resolve(newName);
      }, 500);
    });
  };
};

addCoffee('에스프레소')()
  .then(addCoffee('아메리카노'))
  .then(addCoffee('카페모카'))
  .then(addCoffee('카페라떼'));
  • 3行目のエンクロージャ(変数prevNameとnameを使用)
    • 2)非同期タスクの同期表示ジェネレータ
    var addCoffee = function(prevName, name) {
  setTimeout(function() {
    coffeeMaker.next(prevName? prevName + ', ' + name : name)
  }, 500);
};

var coffeeGenerator = function* () {
  var espresso = yield addCoffee('', '에스프레소');
  console.log(espresso);
  var americano = yield addCoffee(espresso, '아메리카노');
  console.log(americano);
  var mocha = yield addCoffee(americano, '카페모카');
  console.log(mocha);
  var latte = yield addCoffee(mocha, '카페모카');
  console.log(latte);
};
var coffeeMaker = coffeeGenerator();
coffeeMaker.next();
  • 発電機を使用すると、nextの方法を有する奇形器が返されます.
  • nextメソッドを呼び出すと、Generator関数で最初に現れる降伏停止関数が
    • 実行する.
  • 以降にnextメソッドが再び呼び出されると、以前に停止する部分から、次いで完成品において
    • が停止する.
    非同期タスクの同期表示Promis+Async/await
    var addCoffee = function (name) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(name);
    }, 500);
  });
};

var coffeeMaker = async function () {
  var coffeeList = "";
  var _addCoffee = async function (name) {
    coffeeList += (coffeeList ? "," : "") + (await addCoffee(name));
  };
  await _addCoffee("에스프레소");
  console.log(coffeeList);
  await _addCoffee("아메리카노");
  console.log(coffeeList);
  await _addCoffee("카페모카");
  console.log(coffeeList);
  await _addCoffee("카페라떼");
  console.log(coffeeList);
};
coffeeMaker();
  • の非同期動作を必要とする関数の前にasyncタグ
    • を付ける
  • 関数で実質的な非同期操作が必要な場合は、必要な位置ごとにタグを待機し、その後の内容は自動電話
    • を承諾するものとする.
  • この問題を解決した後、
    • を継続する.
    callback
    技術共有|explain format=json詳細