bind(this)とes 6矢印関数

2749 ワード

オブジェクトのメソッドをコールバック関数として渡す場合は、特定のthisを定義する必要があります.そうしないと、thisの指向に問題が発生する関数として実行されます.たとえば、配列を巡り、配列の各項目を新しい配列に入れたいのですが、この新しい配列とpushメソッドはオブジェクトobjの属性とメソッドであり、通常の書き方は次のように感じられます.
var obj={
    ar:[],
    push: function (c) {
        console.log(this);-->  window
        this.ar.push(c);
    }
}

    var arr=[1,2,3];
    arr.forEach(obj.push)
    console.log(obj.ar);

しかし、間違ったことを報告しました.TypeError:Array.prototype.Push called on null or undefinedとは、そのオブジェクトにpushメソッドがないことを意味します.やはり、このメソッドのthisを印刷するのはobjではなくwindowを指すので、objのpushメソッドを呼び出すことはできません.そこで、thisの指向を修正してobjを指すようにすればいいと思います.方法1:forEachメソッドの2番目のパラメータにthisが指すオブジェクトを設定します.このパラメータは一般的には使えないので無視されていますが、forEachの基本的な使い方をもう一度見てみると正常です.pushメソッドのthisの指向もobjを正しく指しています.
var obj={
    ar:[],
    push: function (c) {
        console.log(this);-->obj
        this.ar.push(c)
    }
}

    var arr=[1,2,3];
    arr.forEach(obj.push,obj)
    console.log(obj.ar);--> [1, 2, 3]

方法2:bindを使用してthisに指向を再設定し、objを指向させることもできます.
arr.forEach(obj.push.bind(obj));

方法3:コールバック関数でobjのpushメソッドを呼び出す
  arr.forEach(function (val) {
        obj.push(val)
    });

方法4:矢印関数を使うと、実は方法3のes 6の書き方です!これにより、thisが最初の指向であることが保証されます.
arr.forEach((val)=>obj.push(val));