JavaScript の関数で this が指す値を変更するにはどうすればよいですか?

fun.apply(context,[argsArray])

fun をすぐに呼び出し、同時に fun 関数の元の this を渡された新しい context オブジェクトにポイントします。これにより、同じメソッドを別のメソッドで再利用できます。オブジェクト。

context: fun 関数の元の this を置き換えて渡されるオブジェクト。

argsArray: 配列パラメーターが展開され、別の実パラメーターとして fun 関数に渡される配列または配列のようなオブジェクト。パラメータの順序に注意する必要があります。

fun.call(context,[arg1],[arg2],[…])

パラメータリストが異なることを除いて、applyと同じです。callのパラメータは1つずつ渡す必要があります。パラメータの数がわからない場合は、apply を使用します。

使用:

Math.max() //個々のパラメータのみを受け取ります。次のメソッドを通じて配列に対して max メソッドを使用できます:
Math.max.apply(null, array) // 配列の配列パラメータ別々のパラメータに展開され、
Array.prototype.push.apply(arr1, arr2) に渡されます。 // 配列を分割し、適用せずに別の配列にプッシュします。後続の配列パラメータは 1 つの要素としてプッシュされます。
Array.prototype.slice.call(arguments); //分類子オブジェクトでスライスメソッドを使用します

function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}  //验证是否是数组

fun.bind(context,[arg1],[arg2],[…])

fun メソッドによって実行されるコンテキストが変更されないようにします。

arg1: 新しい関数に渡されるパラメータリスト

その後の呼び出しのために関数を返します。その関数本体は元の関数 fun と同じですが、新しい関数の this は新しく渡されたコンテキスト オブジェクトを指します。 。新しい関数には、bind メソッドで指定された初期パラメータ arg1/arg2... が含まれます。その後、新しい関数を呼び出すときの実際のパラメータは、既存のパラメータの後ろに配置されます。

//原来的函数有4个参数
var displayArgs = function (val1, val2, val3, val4) {
  console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时bind方法指定了2个参数，则新函数会带着这个两个实参
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数，要在bind方法传入的2个实参后面
displayArgs2("b", "c");
// Output: 12 a b c

イベント処理関数でbindを使用する:

var obj = {
  arg1 : 1,
  attach: function(){
    //var self = this; 普通传入this 的方法
    $('xxx').on('click',function (event) {
      console.log(this.arg1);//若不绑定this，回调函数中的this常指目标元素
     }.bind(this));  //使用bind方法绑定this
  }
}

bind()メソッドを使用してslice()メソッドを書き換える:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind()はIe5~ie8の処理と互換性があります

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this, // 调用bind方法的目标函数
    args = arguments;
    return function() {
      self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
    }
  }
}

通常、setTimeout() の this はウィンドウまたはグローバル オブジェクトを指します。クラス メソッドを使用し、これがクラス インスタンスを指すようにする必要がある場合、self を渡す代わりに、bind() を使用してこれを呼び出し側オブジェクトにバインドできます。

this

このオブジェクトは、関数の実行時に関数の実行環境に基づいてバインドされます。グローバル関数では、これは window に等しく、関数がオブジェクトのメソッドとして呼び出される場合は、このオブジェクトがバインドされます。はそのオブジェクトと等しいです。

判定方法: 関数の実行時、 . 演算子がある場合は、 . より前のオブジェクトを参照します。 new キーワードが呼び出されると、新しいオブジェクトが参照されます。 apply/call/bindがある場合は第一パラメータを参照します。

/*例1*/
function foo() {
  console.log( this.a );
} 
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42;当foo函数被调用时，其本身是归obj2所拥有
/*例2*/
function foo() {
  console.log( this.a );
} 
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;   // bar引用foo函数本身
var a = "global";   // 全局对象的属性
bar();        // "global" ;

HTML DOM イベント ハンドラーでは、これは常にハンドラーがバインドされている DOM ノードを指します。

以上がJavaScript の関数で this が指す値を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。